---
title: Visual Testing with Playwright | Testing Resources
description: Playwright provides automated browser testing. It offers a built-in feature
  to perform visual regression testing for your website.
source_url:
  html: https://testingbot.com/resources/articles/playwright-visual-regression-testing
  md: https://testingbot.com/resources/articles/playwright-visual-regression-testing.md
---

![Visual Testing with Playwright](https://testingbot.com/assets/resources/articles/14.webp)

# Playwright Visual Regression Testing

Playwright provides automated browser testing. It offers a built-in feature to perform visual regression testing for your website.

By [Jochen D.](https://testingbot.com/about/jochen-d)2021-12-28

 Share on Facebook 

 Share on Twitter 

 Post on Reddit 

 Share link 

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](https://testingbot.com/features/screenshot-testing) in the cloud? Automatically test your UI for visual bugs across a wide range of browsers.

## Table of Contents

- [What is Visual Regression Testing?](https://testingbot.com#visual)
- [How can I use Playwright to do visual regression testing?](https://testingbot.com#how)
- [How to configure Visual Regression Testing with Playwright?](https://testingbot.com#configure)
- [What are some popular visual testing libraries?](https://testingbot.com#solutions)
- [Comparing binary or text formats](https://testingbot.com#binary)

## 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](https://testingbot.com/support/playwright/jest.html) provides a preset called `jest-playwright-preset` which connects to Playwright.

For [Mocha](https://testingbot.com/support/playwright/mocha.html) testing, you can connect to Playwright in the `beforeEach` part of the test, similar to this piece of code:

```javascript
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:

```javascript
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:

```javascript
// 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](https://github.com/garris/BackstopJS) for Puppeteer or [Loki](https://github.com/oblador/loki).

Playwright offers its own, built-in visual regression testing solution through **Playwright Test**.

With Playwright's [Visual comparison testing](https://playwright.dev/docs/test-snapshots), 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:

```javascript
// 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.

## Sidebar

### TestingBot Cloud Testing

Run automated, manual and visual tests on remote browsers and devices. Sign up for a free trial.

[Free Trial](https://testingbot.com/users/sign_up)

### Latest articles

[![Testing Flutter Apps with Appium](https://testingbot.com/assets/resources/articles/13-77f190ec948df41b31594f8fc224348844ebc412f374eb6f18c9d4215b4fa49b.webp)](https://testingbot.com/resources/articles/appium-flutter-app-testing)

#### [Testing Flutter Apps with Appium](https://testingbot.com/resources/articles/appium-flutter-app-testing)

Learn how to do automated mobile app testing with Flutter...

[Read article →](https://testingbot.com/resources/articles/appium-flutter-app-testing)

[![How to do localisation testing for mobile apps](https://testingbot.com/assets/resources/articles/12-9db6c7be671827ade1212fa6e476ee36e3365f01569100ee46fe22405c035760.webp)](https://testingbot.com/resources/articles/localized-testing-mobile-app)

#### [How to do localisation testing for mobile apps](https://testingbot.com/resources/articles/localized-testing-mobile-app)

Find out how to perform localisation testing with mobile ...

[Read article →](https://testingbot.com/resources/articles/localized-testing-mobile-app)

[![Automated Testing with Puppeteer](https://testingbot.com/assets/resources/articles/11-416015eb394d928299663409dccd67993b0a664f4b3ff456803fefc6bf1f325a.webp)](https://testingbot.com/resources/articles/automated-testing-with-puppeteer)

#### [Automated Testing with Puppeteer](https://testingbot.com/resources/articles/automated-testing-with-puppeteer)

Puppeteer combined with a test framework provides a great...

[Read article →](https://testingbot.com/resources/articles/automated-testing-with-puppeteer)

## Other Articles

[![Testing Flutter Apps with Appium](https://testingbot.com/assets/resources/articles/13-77f190ec948df41b31594f8fc224348844ebc412f374eb6f18c9d4215b4fa49b.webp)](https://testingbot.com/resources/articles/appium-flutter-app-testing "Testing Flutter Apps with Appium")

### [Testing Flutter Apps with Appium](https://testingbot.com/resources/articles/appium-flutter-app-testing)

Learn how to do automated mobile app testing with Flutter and Appium.

[Read article →](https://testingbot.com/resources/articles/appium-flutter-app-testing)

[![How to do localisation testing for mobile apps](https://testingbot.com/assets/resources/articles/12-9db6c7be671827ade1212fa6e476ee36e3365f01569100ee46fe22405c035760.webp)](https://testingbot.com/resources/articles/localized-testing-mobile-app "How to do localisation testing for mobile apps")

### [How to do localisation testing for mobile apps](https://testingbot.com/resources/articles/localized-testing-mobile-app)

Find out how to perform localisation testing with mobile apps. Change your language or locale with Appium, XCUITest and Espresso.

[Read article →](https://testingbot.com/resources/articles/localized-testing-mobile-app)

[![Automated Testing with Puppeteer](https://testingbot.com/assets/resources/articles/11-416015eb394d928299663409dccd67993b0a664f4b3ff456803fefc6bf1f325a.webp)](https://testingbot.com/resources/articles/automated-testing-with-puppeteer "Automated Testing with Puppeteer")

### [Automated Testing with Puppeteer](https://testingbot.com/resources/articles/automated-testing-with-puppeteer)

Puppeteer combined with a test framework provides a great way to run automated browser tests. Follow this guide for more information.

[Read article →](https://testingbot.com/resources/articles/automated-testing-with-puppeteer)

[![Tutorial on debugging Cypress tests](https://testingbot.com/assets/resources/articles/10-7ae9f6d9435bea1c54ec815ad535dc4a590086e6165263a9eba3441635d55726.webp)](https://testingbot.com/resources/articles/how-to-debug-cypress-tests "Tutorial on debugging Cypress tests")

### [Tutorial on debugging Cypress tests](https://testingbot.com/resources/articles/how-to-debug-cypress-tests)

This article will focus on how to debug your Cypress tests with Cypress debugger and other developer tools.

[Read article →](https://testingbot.com/resources/articles/how-to-debug-cypress-tests)

## Ready to start testing?
[Start a free trial](https://testingbot.com/users/sign_up)