# Visual Regression Testing

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

- Skill: `dragoon0x/visual-regression-testing` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/visual-regression-testing`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/visual-regression-testing/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/visual-regression-testing

---


# 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.