Regression triage table

Markdown export

# Screenshot Comparison Checklist

- Page: Target page
- URL: Add URL before capture
- Baseline: main
- Candidate: current-branch
- Page type: Marketing page
- Viewport pairs: 15 screenshot pairs
- Page states: Default, Scrolled, Navigation open
- Tolerance: Balanced release (0.2% to 0.6%, channel diff 16 to 32)

## Viewport Pairs

| State | Viewport | Baseline | Candidate | Diff |
| --- | --- | --- | --- | --- |
| Default | iPhone SE 375x667 | page-default-iphone-se-main.png | page-default-iphone-se-current-branch.png | page-default-iphone-se-diff.png |
| Default | iPhone 15 393x852 | page-default-iphone-15-main.png | page-default-iphone-15-current-branch.png | page-default-iphone-15-diff.png |
| Default | iPad 820x1180 | page-default-ipad-main.png | page-default-ipad-current-branch.png | page-default-ipad-diff.png |
| Default | Laptop 1366x768 | page-default-laptop-main.png | page-default-laptop-current-branch.png | page-default-laptop-diff.png |
| Default | Desktop HD 1920x1080 | page-default-desktop-hd-main.png | page-default-desktop-hd-current-branch.png | page-default-desktop-hd-diff.png |
| Scrolled | iPhone SE 375x667 | page-scrolled-iphone-se-main.png | page-scrolled-iphone-se-current-branch.png | page-scrolled-iphone-se-diff.png |
| Scrolled | iPhone 15 393x852 | page-scrolled-iphone-15-main.png | page-scrolled-iphone-15-current-branch.png | page-scrolled-iphone-15-diff.png |
| Scrolled | iPad 820x1180 | page-scrolled-ipad-main.png | page-scrolled-ipad-current-branch.png | page-scrolled-ipad-diff.png |
| Scrolled | Laptop 1366x768 | page-scrolled-laptop-main.png | page-scrolled-laptop-current-branch.png | page-scrolled-laptop-diff.png |
| Scrolled | Desktop HD 1920x1080 | page-scrolled-desktop-hd-main.png | page-scrolled-desktop-hd-current-branch.png | page-scrolled-desktop-hd-diff.png |
| Navigation open | iPhone SE 375x667 | page-navigation-open-iphone-se-main.png | page-navigation-open-iphone-se-current-branch.png | page-navigation-open-iphone-se-diff.png |
| Navigation open | iPhone 15 393x852 | page-navigation-open-iphone-15-main.png | page-navigation-open-iphone-15-current-branch.png | page-navigation-open-iphone-15-diff.png |
| Navigation open | iPad 820x1180 | page-navigation-open-ipad-main.png | page-navigation-open-ipad-current-branch.png | page-navigation-open-ipad-diff.png |
| Navigation open | Laptop 1366x768 | page-navigation-open-laptop-main.png | page-navigation-open-laptop-current-branch.png | page-navigation-open-laptop-diff.png |
| Navigation open | Desktop HD 1920x1080 | page-navigation-open-desktop-hd-main.png | page-navigation-open-desktop-hd-current-branch.png | page-navigation-open-desktop-hd-diff.png |

## Visual Diff Tolerance Notes

- Use 0.2% to 0.6% changed pixels as the review band for balanced release.
- Use 16 to 32 as the per-channel threshold before marking noise as a diff.
- Use for most marketing pages, docs, dashboards, and product screens.
- Accept tiny antialiasing shifts, image compression noise, and sub-pixel font differences.
- Escalate layout movement, overlapping UI, hidden content, and changed hierarchy.
- Mask timestamps, ads, avatars, random IDs, live counters, and loading shimmers before comparing.

## Page State Checklist

- [ ] Default: initial page load after fonts, images, and consent state settle.
- [ ] Wait for network idle, document fonts, lazy images, and app hydration.
- [ ] Pin cookie or consent state so the banner is consistently present or hidden.
- [ ] Disable animations that are not part of the regression being reviewed.
- [ ] Scrolled: mid-page scroll with sticky UI, lazy sections, and anchor content visible.
- [ ] Scroll to the first content section where sticky headers or banners can overlap content.
- [ ] Confirm lazy images and animated sections have finished loading before capture.
- [ ] Compare scroll position by selector instead of raw pixels when possible.
- [ ] Navigation open: mobile menu, dropdown, command menu, or account menu open.
- [ ] Open the same menu at phone, tablet, and desktop widths.
- [ ] Mask notification counts, avatars, and user-specific labels if they are not under test.
- [ ] Check focus outline, backdrop, body lock, and menu item wrapping.

## Regression Triage

| Severity | Diff signal | Likely cause | Action |
| --- | --- | --- | --- |
| Blocker | CTA hidden, form unusable, content clipped, checkout path changed | Layout regression, fixed/sticky UI overlap, breakpoint rule conflict | Stop release, reproduce in the smallest failing viewport, assign owner |
| Major | Navigation wraps badly, modal shifts, table overflow breaks reading | Container width, z-index, long content, or missing responsive state | Fix before merge or document an explicit product/design acceptance |
| Minor | Small spacing, antialiasing, image crop, or color token variance | Browser rendering, asset compression, font loading, token drift | Attach diff, confirm intent, batch with nearby polish work |
| Ignore | Timestamp, avatar, ad, random ID, live chart, loading shimmer | Expected dynamic content or non-deterministic third-party surface | Mask selector, freeze data, or exclude from the visual comparison |

## Playwright Capture Prompt

```text
Write a Playwright visual regression capture script for this page.
URL: https://example.com
Page type: Marketing page. Focus the review on hero, navigation, social proof, pricing cards, and CTA placement.

Capture baseline and candidate screenshots for these viewports:
- iPhone SE: 375x667 (small mobile)
- iPhone 15: 393x852 (modern iPhone)
- iPad: 820x1180 (tablet portrait)
- Laptop: 1366x768 (common desktop)
- Desktop HD: 1920x1080 (wide desktop)

Capture these page states:
- Default: initial page load after fonts, images, and consent state settle
- Scrolled: mid-page scroll with sticky UI, lazy sections, and anchor content visible
- Navigation open: mobile menu, dropdown, command menu, or account menu open

Use the Balanced release tolerance profile: 0.2% to 0.6% changed pixels and 16 to 32 channel difference.
Ask me for selectors to mask if dynamic content appears in the diff.
Wait for network idle, fonts, images, hydration, and deterministic test data before every screenshot.
Save screenshots with stable names and produce a markdown table with pass, fail, and review statuses.
```

## Diff Review Prompt

```text
Review these visual regression diffs and triage them for release.
Page: Target page
Page type: Marketing page
Tolerance: Balanced release (0.2% to 0.6%, channel diff 16 to 32)

Classify each finding using this triage rubric:
- Blocker: CTA hidden, form unusable, content clipped, checkout path changed. Action: Stop release, reproduce in the smallest failing viewport, assign owner.
- Major: Navigation wraps badly, modal shifts, table overflow breaks reading. Action: Fix before merge or document an explicit product/design acceptance.
- Minor: Small spacing, antialiasing, image crop, or color token variance. Action: Attach diff, confirm intent, batch with nearby polish work.
- Ignore: Timestamp, avatar, ad, random ID, live chart, loading shimmer. Action: Mask selector, freeze data, or exclude from the visual comparison.

Return a table with viewport, page state, severity, changed area, likely cause, decision, and owner.
```