What is Visual Regression Testing?
Visual Regression Testing is most commonly used to prevent unintentional changes to an application's visual appearance. For example, let's say you have a website and you know what each page should look like. You instruct your test framework to take a screenshot of each page, then tell the framework that the page should always look identical to the screenshot you just took.
Ideally, your website will always look perfect to the end user, just like the screenshots you took. Sometimes however, bugs might cause your website to look differently than the screenshots you took. Perhaps a deploy that went wrong, a CSS change that causes a rendering issue on an (old) browser, or any other bug causing problems for your website visitors.
Visual Regression Testing allows you to test and find these regression problems. You will be alerted whenever your website's design changes.
How can I use Playwright to do visual regression testing?
You can use Playwright in combination with a testing framework, such as Jest or Mocha.
Both of these test frameworks offer good support for Playwright automation.
In your Mocha or Jest test scripts, you simply supply a snippet of code which connects via Playwright to the browser under test.
The test can then interact with the browser and mimick user behavior, such as clicking buttons, entering text and perform all other actions similar to your end users.
Jest provides a preset called
jest-playwright-preset which connects to Playwright.
For Mocha testing, you can connect to Playwright in the
beforeEach part of the test, similar to this piece of code:
How to configure Visual Regression Testing with Playwright?
Playwright comes with a package called Playwright Test which allows you to run automated tests via Playwright.
When you run a test with Playwright Test, it will take a screenshot of the current page and save it as a baseline screenshot (or golden image). Subsequent tests will take new screenshots and compare these with the baseline via pixel-by-pixel matching.
As an example, suppose you've already created a golden image (reference screenshot) and you want to compare it to the screenshot you just took with Playwright. You can use a snippet of code similar to the one below:
Playwright will use the
page object and call the
screenshot method to save a screenshot. It will then use the pixelmatch library to compare both of these screenshots for visual differences.
You can use the
threshold option to finetune the pixel matching in your screenshots.
For a more complete example, please see the snippet below:
What are some popular visual testing libraries?
Playwright offers its own, built-in visual regression testing solution through Playwright Test.
With Playwright's Visual comparison testing, you can take reference screenshots and compare these with new screenshots.