Playwright is a NodeJS framework created by Microsoft. It offers similar features to Puppeteer, which is another popular headless testing framework. Both libraries provide browser automation.
Playwright allows you to start or connect to a Chrome, Edge, Safari or Firefox browser and interact with the browser. The framework utilizes a fast protocol to interact with the browsers; the DevTools protocol (for Chromium browsers) or a custom protocol for Firefox and WebKit browsers.
One of the advantages of using Playwright is that Playwright supports multiple browser vendors, whereas Puppeteer only supports Chromium-based browsers.
Did you know TestingBot provides Visual Testing in the cloud? Automatically test your UI for visual bugs across a wide range of browsers.
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:
const pw = require('playwright-core')
beforeEach(async function() {
browser = await pw.chromium.connectOverCDP({
wsEndpoint: 'wss://cloud.testingbot.com?browserName=edge&browserVersion=latest'
})
context = await browser.newContext()
page = await context.newPage('https://testingbot.com')
})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:
expect(await page.screenshot()).toMatchSnapshot('golden.png')
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:
// example.spec.js
const { test, expect } = require('@playwright/test');
test('example test', async ({ page }) => {
await page.goto('https://testingbot.com');
expect(await page.screenshot('.hero')).toMatchSnapshot('hero.png', { threshold: 0.2 });
});What are some popular visual testing libraries?
Visual regression testing is becoming a popular trend among QA and developer teams.
Quite a few visual testing libraries are available online, such as BackstopJS for Puppeteer or Loki.
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.
Comparing binary or text formats
Playwright supports comparing binary and text formats payloads.
This allows you to compare DOM elements for identical text content. For example, you can write tests where you match the text contents of a DOM element with a pre-defined text which you know will not change.
An example of such a test case is located below:
// example.spec.js
const { test, expect } = require('@playwright/test');
test('example test', async ({ page }) => {
await page.goto('https://testingbot.com');
expect(await page.textContent('.login')).toMatchSnapshot('login.txt');
});
Here we take the text from the .login DOM element and compare it to the text inside the login.txt file.
