Visual regression
Visual regression testing captures screenshots of UI components and compares them pixel-by-pixel (with tolerance) against baseline images on every change — catching unintended visual changes that escape unit and integration tests. Tools include Percy, Chromatic, Loki, BackstopJS, and Playwright's built-in screenshot comparison.
Visual regression is essential for design-system maintenance and any application where unintended UI changes have customer impact. The implementation challenges are practical: managing baselines (storing thousands of reference images, updating them deliberately on intentional changes), handling flakiness (font rendering differs across machines, animations cause noise), and CI integration (uploading screenshots to a comparison service, blocking merges on visual diffs). The wins are real: visual regression catches the class of defect that no other test type does — the button that's now invisible because a CSS rule changed two levels up.
Related terms
- Snapshot testing
Snapshot testing captures the serialised output of a function or component (rendered HTML, formatted JSON, computed data structure) and compares against a committed baseline on every run.
- End-to-end testing
End-to-end (E2E) tests exercise an entire user journey across the full stack — UI, API, database, external services — as a real user would.
- Regression test
A regression test verifies that previously working functionality still works after a code change.