Visual Regression Testing
Testing that detects unintended visual changes in a user interface by comparing screenshots of the current build against approved baseline images.
Visual regression testing automates what the human eye does during a manual review: spotting things that look wrong. Tools capture screenshots of pages or components, then perform pixel-by-pixel or perceptual comparisons against stored baselines. Differences are highlighted for human review.
This approach catches CSS regressions, layout shifts, font changes, broken images, and z-index issues that functional tests overlook entirely. Popular tools include Percy, Chromatic, BackstopJS, and Playwright's built-in screenshot comparison.
Why It Matters for QA Teams
A functional test can confirm a button exists and is clickable, but it will not notice that the button is now invisible because a CSS change turned its text white on a white background. Visual regression testing catches these silent UI breaks.
Example
After updating a shared CSS utility class, visual regression tests flag that the hero banner on the homepage has shifted 20 pixels to the right and the footer links have lost their underline styling. Neither change caused any functional test failures, but both would have confused users.