snippet-pastebin/docs/ANDROID-QA-CHECKLIST.md

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)

# 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

# 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:

body, html {
  max-width: 100vw;
  overflow-x: hidden;
}

Verify: npx playwright test -g "no horizontal scroll"

Issue: Buttons Not Tappable

Quick Fix:

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:

* {
  word-break: break-word;
  overflow-wrap: break-word;
}

Verify: npx playwright test -g "text is handled properly"

Issue: Modal Too Large

Quick Fix:

.modal {
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

Issue: Form Overlapped by Keyboard

Quick Fix:

input:focus {
  scroll-into-view(smooth, center);
}

Issue: Safe Area Ignored

Quick Fix:

.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

# 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

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 ✨