All docs
Getting started3 min readUpdated

What is visual regression testing?

Visual regression testing catches unintended UI changes by diffing a screenshot of your UI against a known-good baseline, pixel by pixel.

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.

See it in action: UI Verify catches a regression on a real pull request, from screenshot diff to AI verdict to fix.

How does visual testing work?

  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 your coding agent accepts or rejects each one.
  5. Accepted screenshots become the new baseline the next run is compared against.

Why does visual testing matter?

Visual testing catches the failure 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.

How does visual testing work with coding agents?

A coding agent can check what its change did to the UI while it works, before it opens a pull request, and every pull request is checked again. That matters because agents now write a lot of UI, 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 labels which changes look like the one the agent meant to make and which look like regressions.

This is the core of what UI Verify does differently: the review closes where the agent already works. Because every build's diffs and verdicts are exposed over MCP, the same agent that wrote the PR can pull up its own visual changes, read the judge's reasoning, and accept the intended ones - without you leaving the terminal or opening a dashboard. The agent that used to stop at "I changed the CSS, please check it looks right" is now unblocked to verify the result itself. See Triage visual changes from your coding agent.

How is visual testing different from snapshot and end-to-end testing?

  • 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.
Ready to set it up? See how to set up visual regression testing to pick the capture method that matches your project.

Visual testing for agents

UI Verify is visual regression testing for Playwright, Storybook and Vitest. Your coding agent sees what its UI change did and fixes it before users see it. See how it works.

Get started