Day 19 of 60
·
E2E, UI, accessibility
Visual regression testing
Functional tests can pass while the UI is a wreck. Pixel-diffing is how you find out before users do.
ProblemCSS, layout, and rendering bugs that pass functional tests but visibly break the UI.
How it works
Take screenshots of every key view; diff against approved baselines; gate on unintended pixel changes.
What it catches
Layout breakage, theme regressions, font-loading issues, rendering bugs across browsers. Maintenance dominated by baseline approvals.
Tools
Playwright screenshots · OSS BackstopJS · OSS Percy · SaaS Chromatic · SaaS
Verdict by project size
Small
Skip
Medium
Opt
Large
Rec
Extra-large
Rec
Cost
| Project size | Setup | Maint / mo | Tool / mo | CI / run |
|---|---|---|---|---|
| Small <10k LOC | 4h | 2h | $0 | +2m |
| Medium 10–100k LOC | 2d | 10h | $200 | +5m |
| Large 100k–1M LOC | 8d | 40h | $1k | +10m |
| Extra-large >1M LOC | 25d | 120h | $5k | +20m |
Setup = engineer-days to first useful run ·
Maint = engineer-hours / month at steady state ·
Tool = out-of-pocket $ / month ·
CI = minutes added (or saved) per pipeline run
Lifecycle & ownership
When in lifecycle
Test Release
Per release · Runs before promotion to production.
Who owns it
QA / Test Engineer
Strategy, exploratory, eval design
Collaborates with: Developer
Reference implementations
-
BackstopJS
Visual regression testing with screenshot baselines and approval workflows.
-
Chromatic Storybook examples
Component-driven visual review and regression workflow.
-
Percy examples
Screenshot diffing example wired into browser automation.
Quick check
Visual regression testing primarily catches what?
One question. Pick the best answer. Your streak is saved locally on this device.
Save the lesson
Download SVG ↓
Screenshot for a 1:1, drop it in Slack, or download the SVG.