Understand the mechanism! Let's do screenshots tests of Compose Previews with various variations

Visual regression tests (VRTs) using Jetpack Compose's Preview function [1] are gradually becoming more popular. It has become much easier to implement, thanks to the appearance of Robolectric [2], Showkase [3], and Roborazzi [4]. However when you actually start using VRTs in your app development, you may have the following thoughts: ・I want to find color specification mistakes in night mode (dark mode) ・I want to check the layout displayed on tablets ・I want to check that the layout is not broken in various languages ​​(locales) In order to incorporate screenshots of such variations into VRT, you need a deeper understanding of how each tool works together to take screenshots. In this session, I will explain how to take screenshots of the various variations mentioned above through the introduction of the following topics. We will also introduce how to achieve this using Compose Preview Screenshot Testing [5], which was introduced at Google I/O 2024, and clarify the differences with using a combination of Robolectric + Showkase + Roborazzi instead. ・Functions provided by each library ・Robolectric ・Showkase ・Roborazzi ・How to take screenshots of Preview functions by using Robolectric + Showkase + Roborazzi ・Taking various variations of screenshots with Robolectric + Showkase + Roborazzi ・By using the functions of ComposeTestRule ・By using the functions of Robolectric ・By using the functions of Jetpack Compose ・How to achieve the same results with Compose Preview Screenshot Testing ・Differences between Robolectric + Showkase + Roborazzi and Compose Preview Screenshot Testing, and when to use which one Note: I will not discuss the setup and operation of CI. Once you understand the mechanisms and functions of each library, it will be easy to support variations other than those introduced in this session. After listening to this session, let's leave it to VRT to find bugs in the UI of specific variations that we tend to put off checking! [1] Composable functions with `@Preview` annotation. They allow you to preview the rendering results within Android Studio. [2] https://github.com/robolectric/robolectric [3] https://github.com/airbnb/Showkase [4] https://github.com/takahirom/roborazzi [5] https://developer.android.com/studio/preview/compose-screenshot-testing (Translated by the DroidKaigi Committee)

• 

  Sumio Toyama (sumio_tym) テスト自動化が好きなAndroidエンジニア