Comparizen-playwright

Perform visual regression tests with Comparizen using Playwright.

Getting started

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 tests and see the results in your Comparizen project