Comparizen-playwright

Perform visual regression tests with Comparizen using Playwright.

Getting started

Example project

Download a fully configured example project here. Extract that zip file on your local machine and read its README.md file to get started quickly.

Manual configuration for existing projects

Follow the steps below to integrate Comparizen into your existing Playwright project.

1. Make sure your playwright project's package.json file contains the following line

  "type": "module",

2. Install comparizen-playwright in your Playwright project: npm install comparizen-playwright
3. Add these bits to playwright.config.ts

import {defineConfig, expect } from '@playwright/test';
import { setupComparizen } from 'comparizen-playwright'

setupComparizen(expect, {
  // make sure to set your own Comparizen api-key and -project-id here.
  apiKey: `your api key`, 
  projectId: 'your project id'
})

export default defineConfig({
    // add this `globalSetup` entry to your defineConfig, you can leave all other entries like they were.
    globalSetup: 'node_modules/comparizen-playwright/comparizen-global-setup.js'
})

• It's highly recommended to not commit the API key in your code repository. Instead you can use something like dotenv to externalize it.

3. Make sure there's a tsconfig.json file in the root of your Playwright project. If there's not one there yet, just create an empty file with that name. This enables your editor to detect Comparizen's extensions to Playwright
4. Add Comparizen tests to your test-scripts

    test('get started link', async ({ page }, testInfo) => {
        await page.goto('https://playwright.dev/');
        await expect(page).toMatchComparizen('comparizen-playwright test', testInfo)
    });

5. Run the playwright test(s).
   • Note that the Comparizen tests will always fail the first time, as you'll need to accept any new uploaded screenshot to your Comparizen project's baseline.
6. In Playwright's test log you should see one or more failing Comparizen test(s), mentioning a link to https://app.comparizen.com/#/.... Visit that link to review and approve the newly uploaded images in Comparizen. This will establish the new images as the baseline.
7. Execute npm run test to run the tests again. The new images will now compare with the baseline. If there are no differences between the baseline image(s) and the newly uploaded image(s), the test will succeed.