Visual Regression Testing

Visual regression testing approaches, snapshot comparison, and visual QA automation.

dragoon0x b46f7d2 1.0 KB Updated

File contents

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

  1. Component-level screenshots in Storybook (isolated, deterministic).
  2. Page-level screenshots for layout validation.
  3. Threshold: Allow 0.1% pixel difference (anti-aliasing varies).
  4. 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.

dragoon0x/everything-design-taste/tree/main/skills/visual-regression-testing commit b46f7d293c

Frequently asked questions

npx skillmds@latest add dragoon0x/visual-regression-testing