01
How visual regression testing works
- 1Baseline: screenshots of each page or component are approved as correct
- 2Compare: after a change, new screenshots are taken under the same conditions and compared with the baseline
- 3Highlight: the differences are marked, usually as a diff image with a percentage of pixels changed
- 4Review: a person approves an intended change as the new baseline, or fixes an unintended one
02
What visual testing catches
- A CSS change in one place that breaks a layout somewhere else
- Missing or broken images, icons and fonts
- Elements shifted, hidden, overlapping or resized
- Wrong colours or styles after a design system or library update
- Differences between screen sizes or browsers
03
Visual testing vs functional testing
Functional UI tests check that things work: clicking Sign up opens the form, submitting it shows a message. They usually don’t notice how the page looks. Visual tests check the look but not the behaviour. Together they cover both; on their own, each misses what the other catches.
04
Avoiding false alarms
The hard part of visual testing is noise: differences that are not bugs. Good setups keep it low:
- Freeze animations and transitions before taking screenshots
- Hide or mask content that changes on its own: dates, carousels, ads, live counters
- Wait for fonts and lazy-loaded images before capturing
- Compare at the same screen size, browser and fonts every time
- Set a threshold so a few anti-aliased pixels don’t fail a check
Tip: Start with a few key pages at two or three screen sizes. A small baseline that people actually review beats a huge one everyone ignores.
05
Types of visual comparison
- Pixel comparison: exact pixel differences above a threshold (pixelmatch, BackstopJS, Playwright’s screenshot assertions)
- AI-assisted comparison: models that ignore rendering noise and group real changes (Applitools)
- Layout and rule checks: measuring the rendered page for known problems such as overflow, overlaps or cut-off text, which needs no baseline
06
Visual testing tools
Percy (by BrowserStack) and Applitools add visual snapshots to existing automated tests; Chromatic does it for Storybook components; BackstopJS and Playwright’s built-in screenshot comparison are free options you run yourself. UICheck does visual regression from a URL with no test code: approve a check as the baseline, and later checks compare every page and screen size pixel by pixel, with areas you can ignore, alongside its layout and accessibility checks.
Checklist
Questions
What is visual testing?
Visual testing checks that a website or app looks right, usually by comparing screenshots with approved versions and flagging any difference for review.
What is the difference between visual testing and visual regression testing?
Visual regression testing is the most common kind of visual testing: it compares new screenshots with a baseline to catch unintended changes. Visual testing can also mean checking the look against rules or a design file.
Is visual testing manual or automated?
The comparison is automated; deciding whether a flagged change is intended stays with a person, who approves it as the new baseline or fixes it.
What are visual testing tools?
Percy, Applitools, Chromatic, BackstopJS, Playwright’s screenshot comparison and UICheck’s visual baselines are common choices.