Screenshot Comparisons in Playwright

From the Playwright cheat sheet · Visual & Snapshot Testing · verified Jul 2026

Screenshot Comparisons

Capture and compare page or element screenshots against baselines

typescript

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

test('homepage visual check', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveScreenshot();
});

test('component visual check', async ({ page }) => {
  await page.goto('/dashboard');
  await expect(page.getByTestId('chart')).toHaveScreenshot();
});

💡 Golden files auto-generate on first run — commit them to git for CI comparisons

⚡ Use mask to hide dynamic content like timestamps or avatars that change between runs

📌 Run npx playwright test --update-snapshots to regenerate baselines after intentional changes

🟢 Screenshots are browser-specific — each project gets its own snapshot folder

screenshotvisualsnapshotcomparison

Back to the full Playwright cheat sheet