Theo's Typesafe Cult•6mo ago

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•6mo 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•6mo 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•6mo 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•6mo ago

Thanks! Going to try it out 🙂

Graff•6mo 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•6mo 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 🙂

Gaming

Programming

Frontent Testing Framework