Choose high-value states first
Do not capture the entire site immediately. Prioritise the home page, sign-in, key conversion, form errors, empty states and commonly reused components, then choose viewports that expose their breakpoint risk.
Record route, data state, language, theme, viewport, engine and baseline date for every reference.
Remove noisy variables
Fix test data and time zone, disable animation, wait for fonts and images, and mask random identifiers, clocks, carousels and third-party ads. Exclude third-party content from the comparison when it cannot be controlled.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}Keep component and full-page evidence
Component captures support precise comparison of buttons, cards and dialogs; full-page captures reveal document height, sticky elements and footer problems. For long pages, using both is more useful than simply increasing the pixel tolerance.
Classify differences before accepting them
Mark each difference as an expected design update, a regression, environment noise or a product decision. Replace the baseline only after the intended change is confirmed, so a defect never becomes the new standard by accident.
- Typography and line wrapping
- Spacing, alignment and layering
- Missing or unexpected content
- Colour, contrast and focus states
Connect failures to reproduction steps
A report should include baseline, current image, difference image, URL, viewport, version and reproduction steps. Retest the same and an adjacent width so the fix does not introduce brittle CSS for one screenshot.