What is visual regression testing?

Unit tests prove your logic is correct, but they never see the UI. A refactor, a one-line CSS tweak, or a dependency bump can shift a layout, push a button off-screen, or break dark mode - and every assertion still passes green. Visual testing is the check for exactly that: the pixels, not the logic.

1. Render each component or page in a known, repeatable state.
2. Capture a screenshot of that render.
3. Diff the screenshot against the stored baseline for that state.
4. Review the changes - a human or an AI judge accepts or rejects each one.
5. Accepted screenshots become the new baseline the next run is compared against.

The failure it catches is the one that spans your whole app. Edit a design token, a shared Button, or a global stylesheet and the effect ripples across dozens of screens at once. A unit test on the checkout button still passes while the button is now white text on a white background. Visual testing is the only test that would have seen it.

• Catches CSS and layout regressions that logic tests structurally cannot see.
• Covers cross-cutting changes - design tokens, shared components, dependency bumps - in one pass.
• Turns an intended UI change into a reviewable diff, so it is documented, not discovered in production.
• Protects dark mode, responsive breakpoints, and states that are tedious to check by hand.

Coding agents now write a lot of UI, and they move fast and touch shared components confidently. The bottleneck has shifted: the hard part is no longer writing the code, it is verifying the pixels the agent produced. Visual testing gives every agent pull request a screenshot diff, and an AI judge that separates the change the agent meant to make from the one it did not.

• Snapshot tests serialize the DOM or a component tree to text. They break on trivial markup noise and never see a rendered pixel - a wrong color passes.
• End-to-end tests (Playwright, Cypress) prove a flow works, but they rarely assert appearance - a broken layout still clicks through.
• Visual tests assert the rendered pixels themselves, which is the one thing the other two miss.