Frontent Testing Framework

Do you know anything interesting for testing Frontend? I'm mainly looking for something for Visual Regression Test, something that will allow me to test given URLs and see what changes have occurred on a particular page after changes in the code. In the sense that I take screenshots of 20 pages before the changes, then I commit the changes, run an automated test and it shows me the differences in the screenshots (if there are any). BrowserStack and Percy are too expensive. I checked PlayWright, but it has problems with cookies and logging in. I was thinking about Jest..., or Puppeteer. BackstopJS also seems interesting. Maybe some of you can share your experiences? poohheh
Solution:
This is a guess, but something I've seen before is that the event handler for forms (like login) will expect inputs to get/lose focus, or otherwise receive events that playwright injecting values will not trigger. Personally, if you can do a login by hand and watch for the ajax call, it'd probably be easier to just do the login API directly and not bother with the login screen.
Jump to solution
7 Replies
Graff
Graff•10mo ago
I'd be curious what kinds of cookie/auth issues you had in playwright, as that's what I would have recommended as I skimmed what you wrote. Applitools Eyes might also be worth a look.
Rezix
Rezix•10mo ago
Maybe i misconfigured the Playwright Script, but it couldn't click the buttons.
const { test } = require('@playwright/test');

test('Log in to the website', async ({ page }) => {
// Navigate to the login page
await page.goto('https://example.com/login');

// Fill in the username and password
await page.fill('input[name="username"]', 'your_username');
await page.fill('input[name="password"]', 'your_password');

// Click the login button
await Promise.all([
page.waitForNavigation(), // Waits for the next navigation (page load)
page.click('button[type="submit"]') // Clicks the login button
]);

// Now you are logged in, and you can test the restricted area
});
const { test } = require('@playwright/test');

test('Log in to the website', async ({ page }) => {
// Navigate to the login page
await page.goto('https://example.com/login');

// Fill in the username and password
await page.fill('input[name="username"]', 'your_username');
await page.fill('input[name="password"]', 'your_password');

// Click the login button
await Promise.all([
page.waitForNavigation(), // Waits for the next navigation (page load)
page.click('button[type="submit"]') // Clicks the login button
]);

// Now you are logged in, and you can test the restricted area
});
Tried also Cookie / Session Storage trick, but it didn't worked either. Hmm, maybe the state was missing:
await page.waitForSelector('selector', { state: 'visible' });
await page.waitForSelector('selector', { state: 'visible' });
Solution
Graff
Graff•10mo ago
This is a guess, but something I've seen before is that the event handler for forms (like login) will expect inputs to get/lose focus, or otherwise receive events that playwright injecting values will not trigger. Personally, if you can do a login by hand and watch for the ajax call, it'd probably be easier to just do the login API directly and not bother with the login screen.
Graff
Graff•10mo ago
It also might be worthwhile to add assertions in between each page.fill to ensure the input actually gets the values you want it to. Not necessarily useful for your intended test, but could be helpfull with debugging your login subroutine. EG:
// Navigate to the login page
await page.goto('https://example.com/login');

const usernameLocator = page.locator('input[name="username"]');
const passwordLocator = page.locator('input[name="password"]');
const un = 'your_username';
const pw = 'your_password';
// Fill in the username and password
await usernameLocator.fill(un);
await expect(usernameLocator).toHaveValue(un);
await passwordLocator.fill(pw);
await expect(passwordLocator).toHaveValue(pw);
// ...the rest
// Navigate to the login page
await page.goto('https://example.com/login');

const usernameLocator = page.locator('input[name="username"]');
const passwordLocator = page.locator('input[name="password"]');
const un = 'your_username';
const pw = 'your_password';
// Fill in the username and password
await usernameLocator.fill(un);
await expect(usernameLocator).toHaveValue(un);
await passwordLocator.fill(pw);
await expect(passwordLocator).toHaveValue(pw);
// ...the rest
Rezix
Rezix•10mo ago
Thanks! Going to try it out 🙂
Graff
Graff•10mo ago
If you can and you haven't already, I highly recommend utilizing the built-in report from playwright via 'npx playwright show-report'. Playwright trace files are awesome for seeing exactly what happened in your tests.
Rezix
Rezix•10mo ago
Thanks for the help! It worked using extra page.waitForTimeout(2000) and page.waitForSelector(mySelector, { state: 'visible'}) Used also your locator approach with locator and fill. Worked like a charm 🙂
Want results from more Discord servers?
Add your server