mirror of
https://github.com/johndoe6345789/snippet-pastebin.git
synced 2026-05-03 01:44:50 +00:00
git
dd33d9823d
- Implemented functionality tests covering page navigation, header behavior, form handling, and error management. - Created mobile-responsive tests to ensure touch interactions, viewport adaptability, and safe area respect. - Developed visual regression tests for home page layout, typography, color consistency, and interactive elements. - Added a test runner script for easier execution of E2E tests with various options.
344 lines
7.4 KiB
Markdown
344 lines
7.4 KiB
Markdown
# Quick Reference: Android UI Consistency Checklist
|
|
|
|
## ✅ Pre-Launch Android Verification
|
|
|
|
### Navigation (5 min)
|
|
- [ ] All routes accessible on Android (393x851)
|
|
- [ ] Navigation menu works (hamburger or alternative)
|
|
- [ ] Back/forward buttons work
|
|
- [ ] No hidden routes
|
|
- [ ] Menu closes after selection
|
|
|
|
**Test:** `npx playwright test -g "Navigation Consistency"`
|
|
|
|
### Forms (5 min)
|
|
- [ ] All input fields visible and focused
|
|
- [ ] Correct keyboard type appears (email, number, text)
|
|
- [ ] Form submission works
|
|
- [ ] Validation messages display
|
|
- [ ] Labels stay associated with inputs
|
|
|
|
**Test:** `npx playwright test -g "Form and Input Consistency"`
|
|
|
|
### Buttons & Touches (5 min)
|
|
- [ ] All buttons tappable (44px minimum)
|
|
- [ ] Visual feedback on tap
|
|
- [ ] No overlapping touch targets
|
|
- [ ] Buttons spaced 8px+ apart
|
|
- [ ] Same functionality as desktop
|
|
|
|
**Test:** `npx playwright test -g "Button and Interactive"`
|
|
|
|
### Layout (5 min)
|
|
- [ ] No horizontal scroll at any route
|
|
- [ ] Content fits in 393px width
|
|
- [ ] Proper margins and padding
|
|
- [ ] Elements don't overlap
|
|
- [ ] Safe area respected (notches, bars)
|
|
|
|
**Test:** `npx playwright test -g "Layout and Spacing"`
|
|
|
|
### Text & Readability (5 min)
|
|
- [ ] No text cut off
|
|
- [ ] Readable font sizes (12px+)
|
|
- [ ] Sufficient color contrast
|
|
- [ ] Line height appropriate
|
|
- [ ] No emoji rendering issues
|
|
|
|
**Test:** `npx playwright test -g "Typography Consistency"`
|
|
|
|
### Performance (5 min)
|
|
- [ ] Page loads < 5 seconds
|
|
- [ ] No memory leaks
|
|
- [ ] Smooth scrolling (60fps)
|
|
- [ ] Tap responds < 100ms
|
|
- [ ] No excessive network requests
|
|
|
|
**Test:** `npm run test:e2e functionality`
|
|
|
|
### Accessibility (5 min)
|
|
- [ ] Focus indicators visible
|
|
- [ ] ARIA labels present
|
|
- [ ] Alt text on images
|
|
- [ ] Keyboard navigation works
|
|
- [ ] Form labels clear
|
|
|
|
**Test:** `npx playwright test -g "Accessibility"`
|
|
|
|
**TOTAL TIME: ~35-40 minutes**
|
|
|
|
## 🎯 Daily Android QA Checklist
|
|
|
|
### Morning Smoke Test (10 min)
|
|
```bash
|
|
# Run cross-platform tests
|
|
npx playwright test cross-platform.spec.ts
|
|
|
|
# Run mobile-only tests
|
|
npx playwright test --project=chromium-mobile
|
|
```
|
|
|
|
- [ ] All tests pass
|
|
- [ ] No new console errors
|
|
- [ ] Performance acceptable
|
|
|
|
### After Each Deployment
|
|
```bash
|
|
# Full test suite
|
|
npm run test:e2e
|
|
|
|
# Manual verification
|
|
# On Android device:
|
|
# 1. Open app
|
|
# 2. Navigate all routes
|
|
# 3. Fill and submit form
|
|
# 4. Verify no scrolling needed
|
|
```
|
|
|
|
- [ ] No horizontal scroll
|
|
- [ ] All features accessible
|
|
- [ ] Performance acceptable
|
|
|
|
## 📋 Documentation Verification Checklist
|
|
|
|
For each doc file in `/docs`:
|
|
|
|
- [ ] Mentions "mobile" or "Android" support
|
|
- [ ] Has separate mobile instructions (if needed)
|
|
- [ ] Uses "tap" terminology for touch
|
|
- [ ] Includes mobile screenshot (if UI shown)
|
|
- [ ] Lists supported browsers
|
|
- [ ] Mentions network/performance considerations
|
|
- [ ] Has mobile troubleshooting section
|
|
- [ ] Links to ANDROID-UI-CONSISTENCY.md
|
|
|
|
## 🔧 Common Issues & Quick Fixes
|
|
|
|
### Issue: Horizontal Scrolling
|
|
**Quick Fix:**
|
|
```css
|
|
body, html {
|
|
max-width: 100vw;
|
|
overflow-x: hidden;
|
|
}
|
|
```
|
|
**Verify:** `npx playwright test -g "no horizontal scroll"`
|
|
|
|
### Issue: Buttons Not Tappable
|
|
**Quick Fix:**
|
|
```css
|
|
button, a, input[type="checkbox"] {
|
|
min-height: 44px;
|
|
min-width: 44px;
|
|
}
|
|
```
|
|
**Verify:** `npx playwright test -g "buttons are touch-friendly"`
|
|
|
|
### Issue: Text Cut Off
|
|
**Quick Fix:**
|
|
```css
|
|
* {
|
|
word-break: break-word;
|
|
overflow-wrap: break-word;
|
|
}
|
|
```
|
|
**Verify:** `npx playwright test -g "text is handled properly"`
|
|
|
|
### Issue: Modal Too Large
|
|
**Quick Fix:**
|
|
```css
|
|
.modal {
|
|
max-width: calc(100vw - 32px);
|
|
max-height: calc(100vh - 32px);
|
|
overflow-y: auto;
|
|
}
|
|
```
|
|
|
|
### Issue: Form Overlapped by Keyboard
|
|
**Quick Fix:**
|
|
```css
|
|
input:focus {
|
|
scroll-into-view(smooth, center);
|
|
}
|
|
```
|
|
|
|
### Issue: Safe Area Ignored
|
|
**Quick Fix:**
|
|
```css
|
|
.header {
|
|
padding-top: max(16px, env(safe-area-inset-top));
|
|
padding-left: max(16px, env(safe-area-inset-left));
|
|
padding-right: max(16px, env(safe-area-inset-right));
|
|
}
|
|
```
|
|
|
|
## 🧪 Test Commands Reference
|
|
|
|
```bash
|
|
# All tests
|
|
npm run test:e2e
|
|
|
|
# Cross-platform consistency only
|
|
npm run test:e2e cross-platform
|
|
|
|
# Mobile/Android only
|
|
npx playwright test --project=chromium-mobile
|
|
|
|
# Desktop only
|
|
npx playwright test --project=chromium-desktop
|
|
|
|
# Specific test by name
|
|
npx playwright test -g "navigation"
|
|
|
|
# With browser visible
|
|
npx playwright test --headed
|
|
|
|
# Debug mode
|
|
npx playwright test --debug
|
|
|
|
# Update snapshots
|
|
npx playwright test --update-snapshots
|
|
|
|
# Generate report
|
|
npx playwright test && npx playwright show-report
|
|
```
|
|
|
|
## 📊 Success Metrics
|
|
|
|
### Must-Have (Required)
|
|
- ✅ 0 horizontal scroll on any route
|
|
- ✅ All buttons tappable (44px+)
|
|
- ✅ All routes accessible
|
|
- ✅ Forms work identically
|
|
- ✅ No console errors
|
|
|
|
### Should-Have (Important)
|
|
- ✅ Page loads < 5s
|
|
- ✅ Tap response < 100ms
|
|
- ✅ Touch targets 8px+ apart
|
|
- ✅ Safe area respected
|
|
- ✅ Readable without zoom
|
|
|
|
### Nice-to-Have (Bonus)
|
|
- ✅ Smooth 60fps scrolling
|
|
- ✅ Gesture support (swipe)
|
|
- ✅ Animated transitions
|
|
- ✅ Native feel
|
|
- ✅ Haptic feedback
|
|
|
|
## 📱 Device Matrix
|
|
|
|
**Minimum Support:**
|
|
- Pixel 5 (393x851) - Android baseline
|
|
- Small phone (320x568) - Oldest supported
|
|
- Large tablet (1024x1366) - Landscape
|
|
|
|
**Recommended Testing:**
|
|
- Pixel 5 (393x851) - Standard Android
|
|
- Samsung S21 (360x800) - Different aspect
|
|
- Tablet (768x1024) - Landscape
|
|
- Old device (320x480) - Minimum
|
|
|
|
## 🚀 Pre-Release Checklist (15 min)
|
|
|
|
```
|
|
Feature Complete:
|
|
- [ ] All 6 routes accessible on Android
|
|
- [ ] All forms submitting
|
|
- [ ] All buttons functioning
|
|
- [ ] No console errors
|
|
|
|
Layout Check:
|
|
- [ ] No horizontal scroll
|
|
- [ ] Content fits viewport
|
|
- [ ] Safe areas respected
|
|
- [ ] No overlapping elements
|
|
|
|
Performance Check:
|
|
- [ ] Loads < 5s
|
|
- [ ] Smooth scrolling
|
|
- [ ] Responsive to taps
|
|
- [ ] Memory stable
|
|
|
|
Documentation Check:
|
|
- [ ] Docs mention Android support
|
|
- [ ] Mobile instructions included
|
|
- [ ] Screenshots show mobile
|
|
- [ ] Links to consistency guide
|
|
|
|
Run Tests:
|
|
- [ ] npm run test:e2e
|
|
- [ ] npx playwright test --project=chromium-mobile
|
|
- [ ] All tests pass
|
|
|
|
Manual Test:
|
|
- [ ] Works on real Android device
|
|
- [ ] All features accessible
|
|
- [ ] No unexpected behaviors
|
|
- [ ] Performance acceptable
|
|
```
|
|
|
|
**Expected Time: 15 minutes**
|
|
|
|
## 📞 Need Help?
|
|
|
|
### Documentation
|
|
- See: `ANDROID-UI-CONSISTENCY.md`
|
|
- See: `DOCS-ANDROID-COMPLIANCE.md`
|
|
- See: `tests/e2e/cross-platform.spec.ts`
|
|
|
|
### Testing
|
|
- See: `README-TESTS.md`
|
|
- See: `DEBUGGING_GUIDE.md`
|
|
|
|
### Common Issues
|
|
- See: "Common Issues & Quick Fixes" section above
|
|
|
|
### Run Help
|
|
```bash
|
|
npm run test:e2e -- --help
|
|
npx playwright test --help
|
|
```
|
|
|
|
## 💡 Tips for Android Development
|
|
|
|
1. **Always test on Android**
|
|
- Desktop doesn't catch all issues
|
|
- Use Pixel 5 as reference
|
|
|
|
2. **Use Android DevTools**
|
|
- Chrome Remote Debugging
|
|
- Android Emulator
|
|
- Real device testing
|
|
|
|
3. **Monitor on Slow Networks**
|
|
- Slow 3G profile
|
|
- Offline support
|
|
- Progressive enhancement
|
|
|
|
4. **Check Safe Areas**
|
|
- Notches on modern phones
|
|
- System bars (status, nav)
|
|
- Use env(safe-area-inset-*)
|
|
|
|
5. **Verify Touch Targets**
|
|
- 44px minimum (WCAG)
|
|
- 8px spacing
|
|
- No overlaps
|
|
|
|
6. **Test Real Scenarios**
|
|
- Interrupted by call/SMS
|
|
- App backgrounding
|
|
- Network switching
|
|
- Orientation changes
|
|
|
|
## 🎉 All Clear!
|
|
|
|
If everything above checks out:
|
|
- ✅ Android UI is consistent
|
|
- ✅ Documentation is complete
|
|
- ✅ Tests pass on all platforms
|
|
- ✅ Ready to release
|
|
|
|
**User Experience:** Same on Android as desktop ✨
|