Making UI Specs Visible — Compose Screenshot Testing and a Gallery to Support the AI Agent Era
summary
Describes a system that converts Jetpack Compose @Preview screens into repository-backed screenshot tests using Compose Preview Screenshot Testing, automatically posting PR image diffs. Explains a Dockerized x86_64 layoutlib environment to avoid Mac vs CI rendering differences, plus image commits, HTML gallery generation and WebP+base64 single-file distribution to turn 550+ reference images into a browsable app catalog. Also details pairing pixel tests with arbigent natural‑language UI checks and CI hooks to cut regressions and reviewer effort.
AI-written summary · about
chapters (17)
- 0:00Introduction
- 1:17AI agent UI challenges
- 3:29Compose screenshot testing
- 8:53Writing tests and tips
- 11:255 operational challenges solved
- 12:09Challenge 1: Mac vs CI diffs
- 15:28Challenge 2: Reviewing diffs
- 19:43Challenge 3: PR diff checks
- 22:16Challenge 4: Blank images on load
- 24:49Challenge 5: Naming and AI rules
- 26:33Using generated screenshots
- 26:55Use 1: Screenshot gallery
- 31:41Use 2: HTML docs auto-gen
- 35:18Screenshot test limits
- 37:24AI automation design
- 40:38Summary
- 41:23Q&A
related talks
40mUnderstand the mechanism! Screenshot-testing Compose previews in many variations
23mAll your Compose @Previews to screenshot tests without instrumentation
24mDiscover and Reuse UI Components in Compose with Showcase
35mEasy screenshot testing with Compose
41mAndroid Screenshot Testing on Autopilot
34mMastering Jetpack Compose Previews - Test your UI before it tests you!
34mOverview of UI testing in Compose
33mPractical Tips and Tricks to Improve Your Compose Previews