Visual regression & snapshot testing using Playwright is now GA.

With one line of code, you can now check visual regressions for your sites, apps and component libraries in production and get alerted when things break.

No extra tokens, wrappers or confusing config needed.

import { test, expect } from '@playwright/test';

test('Google search homepage', async ({ page }) => {
   await page.goto('https://google.com')
   await expect(page).toHaveScreenshot()
})

It's super simple:

1. Add an expect().toHaveScreenshot() or expect().toMatchSnapshot() line to any browser check.

2. Create a golden image with one click.

3. Run your check around the clock. Checkly takes care of storing your images in our cloud.

Using our CLI, you can manage this all from your code base. Just add the --update-snapshots flag to your test command.

npx checkly test --update-snapshots

When your snapshot comparison fails, you can inspect it in the handy diff viewer.

To get going with snapshot testing using our CLI and / or the Checkly agent on your private location, make sure to upgrade to the latest version.

• Checkly CLI v4.5.2

• Checkly Agent v3.2.0

Next steps

• Check out the full docs right here

• Check out our video which demos this feature

• Read up on our blog

This feature is available Team and Enterprise plans.

Questions or feedback? Join our Slack community.