Visual Regression Testing
Visual Regression Testing
Tools
- Chromatic (Storybook integration).
- Percy (BrowserStack).
- Playwright visual comparisons.
- BackstopJS (open source).
What to Test
- Component states (default, hover, focus, disabled, error, loading).
- Responsive breakpoints (mobile, tablet, desktop).
- Dark mode vs light mode.
- Content edge cases (empty, long text, many items).
Strategy
- Component-level screenshots in Storybook (isolated, deterministic).
- Page-level screenshots for layout validation.
- Threshold: Allow 0.1% pixel difference (anti-aliasing varies).
- CI integration: Block PRs that introduce visual changes without approval.
Anti-Patterns
- Testing pages with dynamic data (timestamps, random content cause false positives).
- Screenshot resolution inconsistency.
- Not testing dark mode.
- Ignoring font rendering differences between CI and local.