Playwright

Visual Testing Commands

Compare screenshots against baselines for visual regression testing across browsers.

5 commands

Pro Tips

Use --update-snapshots to update baseline images

Set threshold for acceptable pixel differences

Visual comparisons may vary between OS and browser versions

$ await expect(page).toHaveScreenshot();

Compare against baseline image.

$ npx playwright test --update-snapshots

Update baseline screenshots.

$ await expect(page).toHaveScreenshot('homepage.png');

Visual test with custom name.

$ await expect(page.locator('.card')).toHaveScreenshot();

Visual test for element.

$ await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.1 });

Allow 10% pixel difference.