Compose Screenshot
Testing Made Easy
Ju Tipatai Puthanukunkit
Junior Principal Engineer (Mobile) @ Muvmi

What is screenshot testing?

1. Record

1. Record
Save as
login.png

1. Record
Save as
login.png
2. Verify
Compare to verify

● Easy to validate all possible states of screen
Pros

● Easy to validate all possible states of screen
● Simpler and faster than Compose UI Test, Espresso,
Kakao or Appium
Pros

● Easy to validate all possible states of screen
● Simpler and faster than Compose UI Test, Espresso,
Kakao or Appium
Pros
Cons
● Can’t test navigation flow, E2E test

How?

Shot - https://github.com/pedrovgs/Shot
- run on physical device or emulator, but slow, flaky.

Shot - https://github.com/pedrovgs/Shot
- run on physical device or emulator, but slow, flaky.

Paparazzi - https://github.com/cashapp/paparazzi
- No need to run on physical device or emulator, faster way, not flaky.

Paparazzi - https://github.com/cashapp/paparazzi
- No need to run on physical device or emulator, faster way, not flaky.
- Recommend to keep image files in git LFS (read more in above url)

Paparazzi should run on Android library module only
app
screenshot-test
(paparazzi stay here)
ui
(composable
should stay
here)

It’s work for multi feature modules too
app
screenshot-test
(paparazzi stay here)
login-ui
product-ui

class SampleTest {
@get:Rule
val paparazzi = Paparazzi(maxPercentDifference = 0.05)
@Test
fun launchComposable() {
paparazzi.snapshot {
MyComposable()
}
}
}

Let’s do paparazzi
screenshot test

LoginScreen
Default Value ValueAndLoading Error

ViewState
ViewAction
(onClick,onValueChanged
) State Container
(state in Stateful
Composable or viewModel)
Stateless
Composable
Screen

data class LoginViewState(
val loading: Boolean = false,
val phoneNumber: String = "",
val phoneNumberError: String? = null,
)
ViewState

sealed interface LoginViewAction {
data class SetPhoneNumber(val value: String) : LoginViewAction
object Submit : LoginViewAction
}
ViewAction

Stateless Composable Screen
@Composable
fun LoginScreen(
state: LoginViewState,
dispatch: (LoginViewAction) -> Unit,
) {
// Implementation
}

Let’s @Preview

Default
@Preview
@Composable
fun Preview_LoginScreen() = AppTheme {
LoginScreen(
state = LoginViewState(),
dispatch = {},
)
}

With Value
@Preview
@Composable
fun Preview_LoginScreen_WithValue() = AppTheme {
LoginScreen(
state = LoginViewState(
phoneNumber = "+66812223333"
),
dispatch = {},
)
}

With Value and loading
@Preview
@Composable
fun Preview_LoginScreen_WithValueAndLoading() = AppTheme {
LoginScreen(
state = LoginViewState(
phoneNumber = "+66812223333",
loading = true,
),
dispatch = {},
)
}

With Error
@Preview
@Composable
fun Preview_LoginScreen_WithError() = AppTheme {
LoginScreen(
state = LoginViewState(
phoneNumber = "",
phoneNumberError = "Required Phone Number"
),
dispatch = {},
)
}

Put @Preview functions
in paparazzi test

class PaparazziTest {
@get:Rule
val paparazzi = Paparazzi(
maxPercentDifference = 0.05,
deviceConfig = DeviceConfig.PIXEL_2.copy(softButtons = false),
)
@Test
fun test_LoginScreen() {
paparazzi.snapshot { Preview_LoginScreen() }
}
@Test
fun test_LoginScreen_WithValue() {
paparazzi.snapshot { Preview_LoginScreen_WithValue()}
}
@Test
fun test_LoginScreen_WithValueAndLoading() {
paparazzi.snapshot { Preview_LoginScreen_WithValueAndLoading()}
}
@Test
fun test_LoginScreen_WithError() {
paparazzi.snapshot { Preview_LoginScreen_WithError()}
}
}

Record ./gradlew recordPaparazziDebug

Verify ./gradlew verifyPaparazziDebug

If Verify Error

Expected Delta Actual
delta-
com.github.judrummer.screenshottest_PreviewScreenshotTests_test[com.github.judrummer.common_null_Defaul
tGroup_Preview_LoginScreen_WithValue_0_null].png

class PaparazziTest {
@get:Rule
val paparazzi = Paparazzi(
maxPercentDifference = 0.05,
deviceConfig = DeviceConfig.PIXEL_2.copy(softButtons = false),
)
@Test
fun test_LoginScreen() {
paparazzi.snapshot { Preview_LoginScreen() }
}
@Test
fun test_LoginScreen_WithValue() {
paparazzi.snapshot { Preview_LoginScreen_WithValue()}
}
@Test
fun test_LoginScreen_WithValueAndLoading() {
paparazzi.snapshot { Preview_LoginScreen_WithValueAndLoading()}
}
@Test
fun test_LoginScreen_WithError() {
paparazzi.snapshot { Preview_LoginScreen_WithError()}
}
}
Each screens will need to have this code

If we can generate all @Preview to be
test cases automatically?

Showkase - https://github.com/airbnb/Showkase
- Use Annotation processing to generate metadata (kapt or ksp)

Showkase - https://github.com/airbnb/Showkase
- Use Annotation processing to generate metadata (kapt or ksp)
- Detect @Preview to generate metadata.componentList

Showkase - https://github.com/airbnb/Showkase
- Use Annotation processing to generate metadata (kapt or ksp)
- Detect @Preview to generate metadata.componentList
- Detect @ShowkaseTypography to generate metadata.typographyList

Showkase - https://github.com/airbnb/Showkase
- Use Annotation processing to generate metadata (kapt or ksp)
- Detect @Preview to generate metadata.componentList
- Detect @ShowkaseTypography to generate metadata.typographyList
- Detect @ShowkaseColor to generate metadata.colorList

Showkase - https://github.com/airbnb/Showkase
- Use Annotation processing to generate metadata (kapt or ksp)
- Detect @Preview to generate metadata.componentList
- Detect @ShowkaseTypography to generate metadata.typographyList
- Detect @ShowkaseColor to generate metadata.colorList
- Use metadata as UI Components catelog

Showkase - https://github.com/airbnb/Showkase
- Use Annotation processing to generate metadata (kapt or ksp)
- Detect @Preview to generate metadata.componentList
- Detect @ShowkaseTypography to generate metadata.typographyList
- Detect @ShowkaseColor to generate metadata.colorList
- Use metadata as UI Components catelog
- Use metadata as screenshot testing

Showkase - Use metadata as UI Components catelog

TestParameterInjectors - https://github.com/google/TestParameterInjector
- JUnit test runner that runs its test methods for different combinations of
field/parameter values.

TestParameterInjectors - https://github.com/google/TestParameterInjector
- JUnit test runner that runs its test methods for different combinations of
field/parameter values.
- Transform Showkase metadata to be unit test cases

Apply Showkase and
TestParameterInjectors

Add Showkase annotation
import com.airbnb.android.showkase.annotation.ShowkaseRoot
import com.airbnb.android.showkase.annotation.ShowkaseRootModule
@ShowkaseRoot
class ScreenshotShowkaseModule : ShowkaseRootModule

Define PreviewProvider
object PreviewProvider : TestParameter.TestParameterValuesProvider {
override fun provideValues(): List<TestPreview> {
val metadata = Showkase.getMetadata()
val components = metadata.componentList.map(::ComponentTestPreview)
val colors = metadata.colorList.map(::ColorTestPreview)
val typography = metadata.typographyList.map(::TypographyTestPreview)
return components + colors + typography
}
}

Apply to Paparazzi
@RunWith(TestParameterInjector::class)
class PreviewScreenshotTests {
@get:Rule val paparazzi = Paparazzi()
@Test
fun test(
@TestParameter(valuesProvider = PreviewProvider::class) componentPreview: TestPreview,
) {
paparazzi.snapshot {
componentPreview.Content()
}
}
}

Summary
- Paparazzi - screenshot test without physical device or emulator.

Summary
- Paparazzi - screenshot test without physical device or emulator.
- Showkase - generate showkase metadata(components, colors, typographies)

Summary
- Paparazzi - screenshot test without physical device or emulator.
- Showkase - generate showkase metadata(components, colors, typographies)
- TestParameterInjector - convert showkase metadata to be test case

Example repository
https://github.com/Judrummer/compose-screenshot-test-sample
Useful links
https://github.com/cashapp/paparazzi
https://github.com/airbnb/Showkase
https://github.com/google/TestParameterInjector
https://developer.android.com/jetpack/compose/state-hoisting

Thank you :)