Visual Testing with Playwright TUTORIAL

• 00:37 Creating test case
• 01:05 Writing assertion and taking screenshot
• 03:58 Snapshot created on first test run
• 05:42 Changing website codebase
• 07:19 Running test case after visual change
• 08:45 Using debugger interface to compare differences
• 12:46 Updating snapshots

In this tutorial, we will learn how to perform visual regression testing using Playwright with just a few lines of JavaScript.

To get started, we need a simple test file in a fresh playwright project. First, require test and expect from the playwright test runner:

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

Next, create a test case to check the appearance of your website's homepage. Provide a title and an async function:

test('Homepage looks good', async ({ page }) => {
  // test content here
});

After that, navigate to the website and write your assertion using the expect function:

await page.goto('https://www.example.com');
expect(await page.screenshot()).toMatchSnapshot('homepage.png');

Now you're ready to run the test using the command npx playwright test. The first test execution fails because there isn't a snapshot yet. However, the test will create one for future test executions.

Run the tests again, and they should pass since there's a snapshot available and no visual differences in the application. The snapshots are located in the tests folder, with one image per enabled browser.

To test the visual comparison feature, make some visual changes to your website and rerun the test case. If there are visual differences, the test will fail. To see the exact changes, rerun the test using the --ui flag to get the debugger interface or use the trace feature.

In the debugger interface, you can compare the expected and actual images by dragging a bar to reveal the differences. If the changes are intentional and you want to update the snapshots with updated images, just type npx playwright test --update-snapshots, and the test will start passing again.

That's all it takes to perform visual regression testing using playwright. Happy testing!