How to do visual regression testing using Playwright

• 00:09 Screenshot test creation
• 00:41 Running initial test
• 00:48 Creating snapshot
• 00:54 Changing page visually
• 00:58 Visual regression detection
• 01:03 Checking changed pixels

Hey friends! Did you know that you can use Playwright to do visual regression testing with just a few lines of JavaScript? In this video, we'll show you how to write a simple test case to check that your web page, featuring a raccoon, is looking good.

First, create a screenshot spec file and require "test" and "expect" from the Playwright test runner. Now you're ready to write a test case using an async function.

const { test, expect } = require('@playwright/test');

Use the passed in page object to navigate somewhere (in this example, we're navigating to "localhost"). Write your assertion using the "expect" function. Expect that the screenshot, which we can take inline, actually matches a given snapshot. Snapshots can be images, too. Name the image file (e.g., raccoon.png).

test('raccoon page is looking good', async ({ page }) => {
  await page.goto('http://localhost');
  expect(await page.screenshot()).toMatchSnapshot('raccoon.png');
});

Now you're ready to run the test in the terminal: npx playwright test.

If the test fails initially, it's likely because there is no snapshot yet. Create a snapshot using --update-snapshots in the terminal. Run the test again to ensure it's working correctly.

To demonstrate the visual regression testing, make a visual change to the test page and run the test case again. If the test fails, Playwright will inform you of the visual regression.

To see what changed, locate the test results image with 'diff' in its name, which will show the pixels that have changed. And that's it - simple visual regression testing using Playwright!