Visual Regression: Desktop UI
all
Persona: designer
Touchpoint: all pages (desktop 1920x1080)
Preconditions
- Page components styled consistently
- Baseline visual snapshots captured
Steps
| # | Action | Expected Result |
|---|---|---|
| 1 | Capture homepage screenshot (desktop) | Hero visible, heading readable, CTA buttons visible. Layout balanced. |
| 2 | Capture pricing page screenshot | All three tier cards visible without scroll. Pricing and features readable. |
| 3 | Capture admin dashboard screenshot | Tabs visible, content loads, no overlapping elements. |
| 4 | Compare screenshots against baseline | Layout unchanged. Colors, spacing, typography match baseline. No pixel drift. |
| 5 | Check for layout shifts (CLS) | No content jumping as page loads. All elements stable. |
| 6 | Verify button hover states | Buttons change appearance on hover. Cursor shows pointer. |
| 7 | Check responsive breakpoints | Layout adapts at 1024px (tablet) and 768px (mobile). No broken layout. |
Known Failure Modes
- Layout shift — content moves after render (poor UX, SEO penalty)
- Color mismatch — branding inconsistency
- Button states missing — unclear what's clickable
- Text overflow — unreadable content
References
- Playwright spec:
e2e (visual regression) - Code files:
Notes
Visual regression testing captures and compares page screenshots. Detects unintended style changes (broken CSS, wrong colors, layout shifts). Use tools like Percy or Chromatic for automated visual diff detection.