Screenshot Test in Jetpack Compose Apps

29th BLRKotlin meetup.

Shrikant Ballal, Android Staff Engineer - YML spoke about screenshot testing with Jetpack Compose framework.

Using 3 libs, Paparazzi, Shot & Showkase he has demonstrated Screenshot testing of UI components on multiple configurations to avoid visual regression issues through accidental UI changes. This can be performed with/without a Device or an Emulator.

You can find the implementation reference in this Github repo: https://github.com/yml-org/compose-testing-samples

Transcript

1. Welcome to BlrKotlin Meetup #29
2. Screenshot Testing in Jetpack Compose apps Shrikant Ballal - Staff Engineer Android at YML
3. Getting you to tomorrow faster Hello from YML
4. A design and technology agency that exports Silicon Valley to the world. We’re YML To us it is a mindset rooted in velocity, innovation and experimentation. 4 YML.co BlrKotlin Meetup #29
5. We tackle our client’s biggest challenges YML.co BlrKotlin Meetup #29 5
6. Healthcare Client app )Mobile, Wearables, Web) Library project built in a standalone Github repository. Home Appointments Dependency fl ows in a direction Checkin Facilities Live Video Consultations Health Activity Tracking Feature Libraries Secured Storage Design Kit (Reusable UI Components) Analytics Location Awareness Personalisation Capability Libraries Core Let’s Begin
7. A Brief about Modular Architecture and Testing Strategy 7 YML.co BlrKotlin Meetup #29
8. What is Screenshot Testing and why is it imp ? 💁 📸 8 YML.co BlrKotlin Meetup #29 They are not same as classic Espresso or Compose UI testing. This testing technique takes a screenshot of an isolated component and compare them to a baseline. They ensure costly visual bugs do not escape into production. 👀
9. 9 What are the ways to perform Screenshot Testing in Jetpack Compose ? YML.co BlrKotlin Meetup #29 Shot : https://github.com/pedrovgs/Shot Paparazzi : https://github.com/cashapp/paparazzi Showcase : https://github.com/airbnb/Showkase Dropshots : https://github.com/dropbox/dropshots Facebook screenshot test : https://github.com/facebook/screenshot-tests-for-android Testify : https://github.com/ndtp/android-testify/
10. The Healthcare Sample app yml-org/compose-testing-samples-android 10 YML.co BlrKotlin Meetup #29
11. The Healthcare Showkase browser yml-org/compose-testing-samples-android 11 YML.co BlrKotlin Meetup #29
12. Demo: Shot + Showkase 📸
13. 13 Code walkthrough of Shot + Showkase YML.co BlrKotlin Meetup #29 Integration Guidelines using Wiki Adjust Tolerance as per project needs Showkase AndroidTest setup @Preview walkthrough → These are our Tests Using Google’s ParameterInjection for custom configuration tests EN and AR Locale Light and Dark Theme Debugging and Reports
14. Benefits and limitations of Shot + Showkase library 14 YML.co BlrKotlin Meetup #29 Stable and Accurate tests Benefits 💪 Clear and crisp test reports with diff view when screenshots don’t match Easy to integrate Baseline images can be managed and maintained for different devices and/or ABI types Can be easily integrated with any CI environment without worrying about the rendering of screenshots Open Source with Apache 2.0 license. Widely used and well maintained by open-source community. Limitations / Cons 🤷 Requires emulator / device to run the screenshot tests If project is already running UI tests on emulator/device, no separate configuration need to be done for screenshot tests. Shot Github Issue #265: Tests fail when mixing up x86 and Apple Silicon (M1 and the like) PR is open in Shot library to fix this issue Maintaining baseline screenshots for multiple ABI architectures is cumbersome.
15. Demo: Paparazzi + Showkase 📸
16. Code walkthrough of Paparazzi + Showkase 16 YML.co BlrKotlin Meetup #29 Integration Guidelines using Wiki Adjust Tolerance as per project needs @Preview walkthrough → These are our Tests Debugging and Reports Actual Tests without Showkase Using Google’s ParameterInjection for custom configuration tests Light and Dark Theme LayoutDirection Multiple device supports
17. Benefits and limitations of Paparazzi + Showkase library 17 YML.co BlrKotlin Meetup #29 Benefits 💪 Does not require emulator / device Unit test can be written for the UI Fast, Stable and Accurate tests Easy to integrate the lib Can be tested for multiple devices provided by Paparazzi Open Source with Apache 2.0 license. Widely used and well maintained by open-source community Limitations / Cons 🤷 All developers should have the same OS platform Identifying the right percentage of tolerance is hard in case of Paparazzi The reports are not as good as Shot test reports; debugging the failures is a bit harder.
18. 18 Which library should I use ? YML.co BlrKotlin Meetup #29 Paparazzi helps to run UI screenshot test without the emulator/device. Can be executed on PR level for fast feedback and avoid visual regression issues Requires all developers to use the same platform (OS) to run the screenshot tests Shot + Showkase is an added feature for your existing instrumentation test suite. It helps: To easily debug test failures using clear and crisp reports It can execute on any CI environment and/or platform OS Showkase is a great tool for all stakeholders like designers, QA, PO and client to see the reusable UI components used in the app.
19. Q & A 19 YML.co BlrKotlin Meetup #29
20. Thank You!