Recipe: Visual regression test setup

Ingredients

• Playwright 1.45+
• Pixelmatch or Resemble.js
• GitHub Actions (Linux runner)
• Reference screenshots committed to repo

Step 1 — Capture baseline

Run Playwright against a local build. Store PNGs in tests/screenshots/baseline/. Use a fixed viewport (1440×900) and disable animations via prefers-reduced-motion.

Step 2 — Diff on PR

In CI, capture fresh screenshots and compare pixel-by-pixel against baseline. Fail the check if any page exceeds a 0.5% diff threshold. Upload diff images as artifacts for review.

Step 3 — Update workflow

When a visual change is intentional, regenerate baselines locally and commit them alongside the PR. Never auto-accept diffs in CI — every shift must be signed off by a human.