Visual Regression: Mobile UI
all
Persona: designer
Touchpoint: all pages (mobile 375x812, iPhone)
Preconditions
- Mobile-responsive CSS implemented
- Baseline mobile screenshots captured
Steps
| # | Action | Expected Result |
|---|---|---|
| 1 | Capture homepage on mobile (375px width) | Hero stacks vertically. Navigation hamburger menu. Single-column layout. |
| 2 | Capture pricing page on mobile | Tier cards stack. Prices readable. No horizontal scroll. |
| 3 | Capture chatbot demo on mobile | Chat input at bottom. Messages scrollable. No layout break. |
| 4 | Compare mobile screenshots against baseline | Layout matches baseline. Text readable at 375px. Touch targets ≥44px. |
| 5 | Check touch target sizes | All buttons/links ≥44x44px. No tiny buttons that are hard to tap. |
| 6 | Verify no horizontal scroll | Content fits within viewport. No overflow-x. Can't scroll right. |
| 7 | Check mobile forms | Form inputs don't trigger zoom. Label placement clear. Error messages visible. |
Known Failure Modes
- Content doesn't fit on mobile — horizontal scroll required
- Touch targets too small — can't tap accurately
- Text unreadable — font size too small
- Form inputs trigger zoom — frustrating UX
References
- Playwright spec:
e2e (visual regression mobile) - Code files:
Notes
Mobile visual regression testing. 60%+ traffic is mobile — broken mobile = revenue loss. Test on real device sizes (375px for iPhone SE, 414px for iPhone 13). Check touch target sizes (44px minimum per iOS guidelines).