2026.09.03 16:20 ~ 17:00 Otter

Making UI specifications visible: Android UI development in the AI agent era supported by Compose Screenshot Testing and galleries

Maintenance / Operations / Testing 日本語 Interpretation available

In products with continuous feature additions and parallel A/B testing, unintended UI changes often slip in unnoticed until QA right before release or even after release. In recent years, with increasing opportunities to run AI agent implementation and review in parallel, the cost of manually verifying whether generated UIs match intent one by one is becoming a new headache. On the other hand, it is difficult for designers, PdMs, and developers to share a common understanding of UI specifications, and the lack of a place where anyone can cross-check "what screens exist in the app right now and how they look in each state" is a common challenge for many teams. In our team, we have been tackling this challenge with Compose Preview Screenshot Testing at the core. Since images are generated using the same mechanism as @Preview in Android Studio, UIs implemented by AI agents can be reviewed using only diff images on PRs, serving as a mechanism to curb the bloated verification cost caused by parallel implementation in the AI era. In CI, diff images are automatically posted as PR comments, allowing reviewers to grasp UI changes at a glance without launching an emulator. Furthermore, we resolved the issue where generated images differed between Mac developers' local environments and Ubuntu CI by introducing persistent Docker containers and unifying the x86_64 environment for layoutlib, significantly reducing flaky tests caused by environment differences. Additionally, we aggregate over 300 reference images into an HTML gallery, visualizing the UI specifications themselves through screen-level grouping, side-by-side comparison of A/B test variants, and Light/Dark mode displays. For distribution, WebP conversion and base64 embedding allow sharing with any internal member simply by placing a single HTML file on GCS or similar storage. We also use arbigent, an AI agent-based UI testing framework capable of writing scenarios in natural language, securing against regressions in "user operation flows" that cannot be caught by pixel-level diff detection alone. In this session, sharing operational insights from actual products, I will speak about how to design and operate screenshot testing and galleries to achieve UI specification visualization, regression prevention, and review efficiency in the AI agent era, along with concrete scripts and CI configurations. ■ Planned Content - Positioning and selective use of screenshot testing / UI testing (Compose Preview Screenshot Testing / Roborazzi / arbigent) - Introduction of Compose Preview Screenshot Testing and automated diff image posting to PRs via CI - Value as a mechanism for reducing UI verification costs on PRs in the era of parallel implementation by AI agents - Absorbing local/CI environment differences with Docker and optimizing Gradle cache using persistent containers - Designing a screenshot gallery to visualize over 300 reference images - Screen-level grouping, A/B test variant comparison, Light/Dark parallel display, and automatic metadata derivation from naming conventions - Creating an environment where non-developers can check UI specifications via single-HTML distribution using WebP conversion and base64 embedding - Combined strategy of natural language UI testing with arbigent and screenshot testing (Translated by the DroidKaigi Committee)

Intended audience

- Android engineers facing challenges in detecting unintended UI regressions - Those struggling with adoption or operational hurdles of screenshot testing - Teams that want to share UI specifications organization-wide, including designers and PdMs - Those interested in streamlining UI review in the era of parallel implementation with AI agents

Sessions in the same time slot

View all sessions