---
title: Playwright Visual Regression Testing
description: Run visual UI tests with Playwright. Perform visual comparison checks
  on multiple browsers with Playwright and TestingBot.
source_url:
  html: https://testingbot.com/support/visual-testing/automated/playwright
  md: https://testingbot.com/support/visual-testing/automated/playwright/index.md
---
# Playwright Visual Testing

While [Playwright Visual Regression Testing](https://testingbot.com/support/web-automate/playwright/visual-regression-testing) is already included with Playwright Test, TestingBot now offers a visual comparison feature for all automated tests.

Using TestingBot's visual command, you will be able to take screenshots during your Playwright tests and compare these with baselines. You will see these results in the TestingBot member area, with additional details such as match percentage, a diff of the image and more useful information.

## Setup

TestingBot added a new `page.evaluate` command which can be used in your Playwright tests. Simply pass a ``testingbot_executor: ${JSON.stringify({action: 'visual.snapshot', arguments: { name: 'uniqueIdentifier' }})}`` argument to have TestingBot take and compare the screenshot.

TestingBot will perform a pixel comparison scan, comparing the screenshot of your website with the original golden image (baseline).   
 If TestingBot detects the number of different pixels to be higher than the supplied threshold, the test will be marked as failed.

    const results = await page.evaluate(_ => {}, `testingbot_executor: ${JSON.stringify({action: 'visual.snapshot', arguments: { name: 'uniqueIdentifier' }})}`)

In the example above, the screenshot will be saved as `uniqueIdentifier`. Any future calls will compare the screenshot with the screenshot that was saved the first time this command was run.

### Full Playwright Example

Below is a full example on how to run a visual Playwright test on TestingBot's browser cloud.

    const playwright = require('playwright-core');
    
    (async () => {
      const browser = await playwright.chromium.connectOverCDP('wss://cloud.testingbot.com/?key=api_key&secret=api_secret&browserName=chrome&browserVersion=latest')
    
      const page = await browser.newPage()
      await page.goto('https://testingbot.com')
      const results = await page.evaluate(_ => {}, `testingbot_executor: ${JSON.stringify({action: 'visual.snapshot', arguments: { name: 'uniqueIdentifier' }})}`)
      console.log(results)
      await browser.close()
    })();

Visual testing with Playwright on TestingBot's browser cloud currently only works with Chromium-based browsers (Chrome, Microsoft Edge) through `connectOverCDP`.

## Visual Comparison Response

Every time you run a `visual.snapshot` command, TestingBot will return back the visual comparison result in less than 2 seconds.   
The response will contain the following information:

- Does the screenshot match the baseline?
- What are the number of pixels that are different between the two snapshots?
- The URL to the result in the TestingBot dashboard
- The visualId and runId of the visual test

    {
          "match": false,
          "pixelDifference": 341575,
          "url": "https://testingbot.com/members/visual/:visualId/runs/:runId",
          "visualId": ":visualId",
          "runId": ":runId"
    }

Please see the example below on how to check whether a visual change was detected:

    const visual_response = await page.evaluate(_ => {}, `testingbot_executor: ${JSON.stringify({action: 'visual.snapshot', arguments: { name: 'uniqueIdentifier' }})}`)
    const json_response = JSON.parse(visual_response)
    const visual_test_passed = json_response['match'] === true

## Visual Baseline

To set a new baseline for your snapshots, you can use the following command:

    const visual_response = await page.evaluate(_ => {}, `testingbot_executor: ${JSON.stringify({action: 'visual.baseline', arguments: { name: 'uniqueIdentifier' }})}`)

## Visual Testing Options

TestingBot offers various options to customize the visual comparison tests. Options can be passed with the `visual.snapshot` command:

    const visualSnapshotJsonCmd = JSON.stringify({
      name: 'testing123',
      options: {
        threshold: 0.3
      }
    })
    
    const visual_response = await page.evaluate(_ => {}, `testingbot_executor: ${JSON.stringify({action: 'visual.snapshot', arguments: visualSnapshotJsonCmd })}`)

 Option Name | Default Option Value | Description || `threshold` | `0.1` | 

This defines the color difference threshold (from 0 to 1). The smaller the number, the more precise the comparison will be.

 |
| `antialiasing` | `true` | 

When this is set to `true`, TestingBot will not count antialiased pixels to the diff of the snapshot.

 |
| `ignoreRegions` | `[]` | 

Regions to ignore, defined in pixel coordinates. Needs to be an array with these objects:

    [{
      "x1": number,
      "y1": number,
      "x2": number,
      "y2": number
    }]

 |
| `ignoreSelectors` | `[]` | 

Pass an array of CSS Selectors to ignore these DOM elements during the visual check.

    ["body div.test", "#sidebar"]

 |
| `selector` | `-` | 

Pass a CSS selector to take a screenshot of this specific element only. If this is not specified, TestingBot will take a screenshot of the viewport.

    "body div.test"

 |

Was this page helpful? Yes No 

## Looking for More Help?

Have questions or need more information?   
 You can reach us via the following channels:

- [Email us](https://testingbot.com/contact/new)
- [Join our Slack Channel](https://join.slack.com/t/testingb0t/shared_invite/zt-3bcw9xch-jk19~6XPs_xBrsAgAedkCw)