Visual regression testing
Visual regression testing is comparing screenshots of a page against an approved baseline image to catch visual change nobody intended. A tool renders the page, captures it, and flags every region where the pixels differ from the baseline. A reviewer then decides whether each difference is a defect to fix or a deliberate change to accept as the new baseline.
The longer version
The loop has three parts. A baseline is captured from a build someone has approved. On every later build the same pages are rendered in the same browser at the same viewport, and the new screenshot is laid over the baseline. Pixels that differ are highlighted, and a threshold decides how much difference counts. Anything over the threshold fails the run and waits for a human, who either fixes the code or approves the new image, which replaces the baseline for the next run.
Functional regression tests assert on the document: this element exists, this text reads so. A page can pass all of them while a stylesheet change pushes the button under the footer, because nothing asserted on where it was. The screenshot catches that class of change, and also whole-page effects such as a font that failed to load or a margin that moved by a few pixels. It says nothing about whether the behaviour behind the page works, which is why it sits beside the functional suite and never replaces it.
The cost is noise. Anti-aliasing differs between machines, so a run on a build server flags text that is identical to the eye. Animations, carousels, timestamps and ads change between captures. A font missing from the runner reflows every paragraph. Teams that do not pin the browser, the viewport and the fonts, and freeze or mask the moving parts, end up approving diffs without reading them, and a suite that is approved by reflex catches nothing.
In a team's flow the run happens on each pull request, against a preview build, and the diff is reviewed by whoever owns the design. It covers only the pages and states someone thought to capture, so a layout broken at a viewport nobody listed, or on a device the runner does not emulate, still reaches a person looking at a real screen.
Common questions
What is the difference between visual regression testing and functional regression testing?
Functional regression tests assert on behaviour and document content, such as an element existing or a total being correct. Visual regression tests compare how the rendered page looks against an approved image. A button pushed off screen by a stylesheet change passes the first kind and fails the second.
Why do visual regression tests fail when nothing changed?
Rendering differs between machines through anti-aliasing, installed fonts, browser version and viewport size, and pages carry content that moves, such as animations, dates and ads. Pinning the browser, viewport and fonts, then masking or freezing the moving regions, removes most false failures.
Who approves a visual regression baseline?
Whoever owns the appearance of that page, normally a designer or a front-end developer, approves the baseline and every later update to it. When the person approving is the person who made the change, the review has no second pair of eyes and the baseline drifts.
Can visual regression testing replace manual checking of a page?
Visual regression runs replace the repetitive comparison against a known-good page, which people do badly and slowly. A person is still needed to judge a new design, to look at states and devices outside the captured set, and to decide whether a flagged difference is a defect or the intended change.
How much difference should a visual regression test tolerate?
A small threshold absorbs sub-pixel rendering variation, and a stricter one catches subtle spacing changes at the price of more false alarms. Teams usually start permissive, tighten it on the pages where layout matters most, and compare only the regions that carry meaning instead of whole pages.
Bug reports that arrive ready to triage.
Collect replay, console, network and browser context with the Free plan.