What is visual regression testing?

Visual regression testing compares screenshots of UI pages or components before and after a change to detect unintended layout, color, or typography shifts. Tools diff images pixel-by-pixel or use perceptual algorithms to ignore anti-aliasing noise. It catches CSS regressions that functional assertions miss - misaligned buttons, overflow, broken responsive breakpoints. Baselines must be managed per browser and viewport; intentional design updates require approving new baselines. Visual tests are brittle if content is dynamic (ads, timestamps); stabilize data or mask volatile regions. Use visual checks selectively on high-visibility screens rather than every element. Pair with functional tests: visuals show “something looks wrong,” functional tests explain “behavior broke.”