Even when functionality is correct, visual regressions can break user experience and brand consistency. Playwright’s screenshot and comparison tools let you detect unintended UI changes automatically as part of your test suite.
Capturing Baseline and Comparison Screenshots
You can use expect(page).toHaveScreenshot() or locator.screenshot() to create and compare images. On the first run, Playwright stores baseline images; on later runs, it flags differences.
// visual-regression.spec.ts
import { test, expect } from '@playwright/test';
test('homepage visual regression', async ({ page }) => {
await page.goto('https://demo.myshop.com');
await expect(page).toHaveScreenshot('homepage.png');
});Visual tests are most valuable around critical pages such as checkout, dashboards and high-traffic landing pages.
Common Mistakes
Mistake 1 — Relying only on full-page screenshots
This creates large, noisy diffs.
❌ Wrong: Capturing the entire page where many unrelated elements change frequently.
✅ Correct: Focus on stable, important components or regions.
Mistake 2 — Running visual tests in unstable environments
This leads to flaky results.
❌ Wrong: Changing fonts, themes or feature flags between runs.
✅ Correct: Keep visual tests on a controlled environment with consistent assets and data.