Don Cheli: Visual Test
Instructions
- Detect the visual testing tool in use: Playwright, Cypress, Percy, Chromatic, Storybook, or custom
- Run the visual test suite and capture screenshots of the current state
- Compare against the stored baseline snapshots
- Report each visual difference:
- Component / page name
- Diff percentage (pixels changed vs. total)
- Category: layout shift, color change, missing element, new element
- Classify severity:
-
5% diff → blocker (likely regression)
- 1-5% diff → warning (review required)
- < 1% diff → info (minor or anti-aliasing)
-
- For new snapshots (no baseline exists), prompt the user to approve them as the new baseline
- Never auto-approve baselines — always require explicit human confirmation
- Generate a visual diff report with image paths or URLs if available
- Save report to
.dc/visual-test-report-<timestamp>.md
Output Format
## Visual Test Report — 2026-03-28T15:00Z ### Summary - Compared: 24 snapshots - Passed: 21 - Diffs: 3 (1 blocker, 2 warnings) ### Blocker 🔴 - CheckoutPage/desktop — 12.3% diff Category: layout shift — payment form moved 40px down Baseline: .visual/baselines/checkout-desktop.png Current: .visual/current/checkout-desktop.png ### Warnings 🟡 - Button/primary — 2.1% diff — color shift (likely theme variable change) - NavBar/mobile — 1.8% diff — font rendering difference (check font loading) ### New Snapshots (approval required) - VoiceModal/desktop — no baseline found — run with --approve to set baseline


