comparizen-playwright
v0.0.8
Published
Comparizen integration for Playwright
Downloads
16
Readme
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.
- Make sure your playwright project's
package.json
file contains the following line
"type": "module",
- Install comparizen-playwright in your Playwright project:
npm install comparizen-playwright
- 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.
- 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 - 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)
});
- 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.
- 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. - 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.