visual-testinglisted

# Visual & UX Testing ## Visual regression testing - Capture baseline screenshots of key screens/components at known states (empty, populated, error, loading) and compare against new builds pixel-by-pixel or via perceptual diff. - Set a **sensible diff threshold** — pixel-perfect comparison breaks on anti-aliasing/font-rendering noise across environments; use a perceptual diff tolerance instead of exact match. - Mask/ignore known-dynamic regions (timestamps, ads, randomized content, animations) so they don't cause false-positive diffs every run. - Run against a **consistent rendering environment** (same OS/browser/font set, typically headless Chrome in CI) — cross-machine font rendering differences are the #1 source of visual-regression flakiness. - Triage every flagged diff as: intentional change (update baseline), real regression (file it), or noise/flake (fix the test's stability, don't just approve blindly). ## Playwright visual testing ``` await expect(page).toHaveScreenshot('checkout.png', { maxDiffPixelRatio: 0.01 }); ``` Store baselines in version control alongside the test; review baseline updates in PR diffs like code changes, since an unreviewed baseline update can silently hide a real regression. ## Design-system / Figma-to-production validation - Compare implemented spacing, typography scale, color tokens, and component states (hover/focus/disabled/error) against the design system spec, not just "looks about right." - Check that design tokens (colors, spacing,