Kordant/tasks/android-production/18-screenshot-testing.md

18. Screenshot Testing (Paparazzi)

meta: id: android-production-18 feature: android-production priority: P2 depends_on: [] tags: [testing, screenshots, quality]

objective:

• Implement screenshot testing with Paparazzi to catch UI regressions across different screen sizes and themes

deliverables:

• Paparazzi integration
• Screenshot tests for key screens
• CI verification for screenshot changes
• Golden screenshot baseline

steps:

1. Add Paparazzi:
   • Add plugin to build.gradle.kts
   • Configure for library or application module
   • Set up test directory
2. Create screenshot tests:
   • Test LoginScreen in light and dark themes
   • Test DashboardScreen with data
   • Test AlertItem component
   • Test ServiceRow component
   • Test SettingsScreen
   • Test empty states and error states
3. Generate golden screenshots:
   • Run tests to generate baseline screenshots
   • Review and commit baseline images
   • Document generation process
4. Add CI integration:
   • Run screenshot tests on PR
   • Fail on unapproved changes
   • Upload diff images for review
   • Require approval for screenshot changes
5. Test multiple configurations:
   • Light theme
   • Dark theme
   • Different screen widths (phone, tablet)
   • Different font sizes
   • RTL layout (if supporting)
6. Maintain screenshots:
   • Update baseline when UI intentionally changes
   • Document update process in README
   • Review all screenshot changes in PR

tests:

• Visual: Screenshot tests pass with no changes
• Regression: UI change detected and flagged
• Coverage: All key screens have screenshot tests

acceptance_criteria:

• Paparazzi integrated and configured
• Screenshot tests for 10+ key screens/components
• Golden baseline screenshots generated
• Tests cover light and dark themes
• Tests cover phone and tablet sizes
• CI runs screenshot tests and flags changes
• Diff images uploaded for review
• Screenshot changes require explicit approval
• No false positives from font rendering differences
• Documentation for updating baselines

validation:

• Run screenshot tests → all pass (no changes)
• Change button color → test fails with diff image
• Review diff → clearly shows what changed
• Update baseline → tests pass again
• CI → screenshot check green or shows diff

notes:

• Paparazzi runs tests on JVM (fast, no emulator needed)
• Golden images must be committed to repository
• Be careful with font rendering differences across OS
• Consider using Roborazzi for Compose-specific screenshot testing