visual-regression
Use when setting up visual regression testing, screenshot comparison, or visual CI pipelines. Covers Playwright toHaveScreenshot(), Chromatic for Storybook, Argos CI, and Lost Pixel. Also use when debugging screenshot flakiness or configuring visual testing in Docker CI.
| Model | Source |
|---|---|
| sonnet | pack: frontend |
Full Reference
┏━ 🔧 visual-regression ━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃ Use when setting up visual regression testing,… ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
Visual Regression Testing
Section titled “Visual Regression Testing”Catch UI changes before they ship. Screenshot comparison that fails the build when pixels drift.
Version: Playwright 1.50+ · Chromatic 11+ · Argos @argos-ci/playwright 6.1.3 · Lost Pixel OSS (February 2026)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Quick Reference — Tool Selection
Section titled “Quick Reference — Tool Selection”| Scenario | Tool | Why |
|---|---|---|
| Already have Playwright tests | Playwright toHaveScreenshot() | Free, built-in, zero extra deps |
| Storybook-heavy project | Chromatic | Native Storybook integration, visual review UI |
| Open source project | Chromatic (free unlimited) or Argos | Both offer free OSS tiers |
| Self-hosted requirement | Lost Pixel Engine | Fully self-hosted, no cloud dependency |
| Playwright + cloud review UI | Argos CI | Wraps Playwright with better defaults + PR review |
| Budget-conscious, no Storybook | Playwright built-in | $0 — just needs Docker for CI consistency |
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Reference Index
Section titled “Reference Index”| File | What’s inside |
|---|---|
reference/playwright-screenshots.md | Full toHaveScreenshot() API, all options, global config, element vs page screenshots, baseline generation |
reference/docker-ci.md | Why Mac vs Linux differs, Docker image setup, baseline generation inside Docker, GitHub Actions workflow |
reference/chromatic.md | Pricing (Feb 2026), setup, TurboSnap, GitHub Actions integration, review workflow |
reference/argos.md | When to use vs Chromatic, setup, argosScreenshot() API, GitHub Actions |
reference/lost-pixel.md | Supported modes (Storybook/Ladle/Histoire/page/custom), config, OSS engine setup |
reference/snapshot-management.md | Baseline update workflow, where baselines live, threshold tuning, dynamic region masking |
reference/cross-browser.md | Multi-browser config, mobile viewports, responsive breakpoint testing, project targeting |
reference/debugging.md | Flaky screenshot diagnosis table, diff output, animation timing, font rendering, wait helpers |
Usage: Read the reference file matching your current task from the index above. Each file is self-contained with code examples and inline gotchas.