Screenshot comparison guide
Responsive Visual Regression Checklist for Screenshot Comparison
A screenshot comparison checklist should make visual regressions repeatable: same pages, same viewports, same states, same masks, and a clear rule for what blocks the release.
Responsive coverage
Compare phone, tablet, laptop, and wide desktop captures instead of approving one lucky browser size.
State coverage
Include menus, forms, modals, dark mode, scrolled positions, and error states where layout shifts happen.
Triage coverage
Separate blocker regressions from harmless rendering noise before the review turns into a guessing game.
The screenshot comparison checklist
Use this structure before you capture a baseline and candidate build. It keeps the review focused on responsive bugs that users can actually feel.
1. Pick the pages that can break a release
- Start with revenue, signup, pricing, docs, dashboard, and checkout screens.
- Include one long-content state, one empty state, one loading state, and one error state.
- Add pages with sticky headers, cookie banners, modals, tables, charts, and third-party embeds.
2. Capture the right responsive viewports
- Use a small phone, large phone, tablet, laptop, and wide desktop for every comparison.
- Add widths just below and just above each CSS breakpoint when a layout recently changed.
- Keep height stable for baseline and candidate captures so scroll positions compare cleanly.
3. Freeze anything that changes between runs
- Mask timestamps, avatars, ads, random IDs, blinking cursors, live counters, and charts.
- Wait for fonts, images, lazy sections, hydration, and network idle before taking screenshots.
- Pin logged-in state, locale, dark mode, cookie consent, feature flags, and seeded test data.
4. Review diffs by user impact
- Block releases when CTAs vanish, forms become unusable, content clips, or navigation breaks.
- Escalate table overflow, modal drift, wrapped menus, hidden labels, and sticky UI overlap.
- Accept tiny antialiasing, compression, and sub-pixel changes only after confirming intent.
Recommended visual diff tolerance
The tolerance should match the risk of the page. Strict thresholds are useful for critical UI, while content-heavy pages need room for image and rendering noise.
Strict UI
Navigation, forms, pricing, checkout, auth, and critical dashboard controls.
0.05% to 0.15% changed pixels
Balanced release
Marketing pages, docs, account screens, and normal product UI.
0.2% to 0.6% changed pixels
Content heavy
Blogs, galleries, media grids, feeds, and pages with editorial images.
0.6% to 1.5% changed pixels
Dynamic app
Charts, maps, dashboards, canvases, and personalized data-heavy views.
1% to 3% changed pixels plus semantic checks
Turn the guide into a live checklist
The Sizzy screenshot comparison checklist generates viewport pairs, state coverage, tolerance notes, Playwright capture prompts, and a markdown export.
Build the checklist
Related Sizzy responsive tools
Screenshot Comparison Checklist
Generate the live baseline, candidate, tolerance, and triage plan.
Responsive Screenshot Generator
Plan viewport screenshot batches for phone, tablet, and desktop QA.
Responsive QA Checklist
Build a broader release checklist for layout, media, forms, and accessibility.
Viewport Checker
Convert a viewport size into a responsive breakpoint and QA report.
Breakpoint Finder
Plan the widths where a page needs extra responsive coverage.
CSS Breakpoint Checker
Turn CSS breakpoints into a practical responsive testing matrix.
FAQ
What is a responsive visual regression checklist?
It is a repeatable plan for comparing screenshots across the viewports, page states, masks, and tolerance settings where responsive layout bugs usually appear.
How is a screenshot comparison checklist different from a normal QA checklist?
A normal QA checklist asks what to test. A screenshot comparison checklist also defines baseline and candidate captures, visual diff tolerance, dynamic content masks, and triage rules.
Which pages should be included in screenshot comparison testing?
Include the pages that affect conversion, support, onboarding, checkout, account access, and core product usage. Add any page with sticky UI, forms, tables, media, or recently changed responsive CSS.
Can Sizzy help with responsive visual regression review?
Yes. Sizzy helps you inspect the same site across synchronized devices, capture screenshots, and review responsive states before you export or automate a visual regression checklist.