Back to DocsRecipe

Visual Regression Testing

Catch unintended UI changes before they ship. Pixel-diff every component state against a golden baseline so no visual bug ever reaches production unnoticed.

1

Capture Baselines

Render every story or route at a fixed viewport and store screenshots as the source of truth.

2

Diff on PR

Compare current renders against baselines. Flag any pixel deviation above a configurable threshold.

3

Review & Accept

Side-by-side overlays let reviewers approve intentional changes or block regressions instantly.

Quick Start

npx playwright test --update-snapshots
npx chromatic --project-token=<token>

Integrates with Playwright, Chromatic, Percy, or any screenshot-comparison backend. Run in CI on every push.