Jetpack Composeのスクリーンショットを撮影する最小構成

概要

• Jetpack Composeのコンポーザブル関数のスクリーンショットを撮るという記事です
• とても簡単です

プロジェクトを作る

Android Studio で新規プロジェクトを作ります。テンプレートは Empty Compose Activity を選択します。

次に必要なライブラリを追加します。androidx.compose.ui:ui-test-manifestだけデフォルトで入っていないはずなので追記します。

dependencies {
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
    debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_version" // ←デフォルトで入っていないので注意
}

スクリーンショットを撮りたいコンポーザブルを作成しますします。この例ではテキストとボタンを縦に並べたものを作成しました。プレビューとコードはこんな感じ。

@Composable
fun HelloWorldContent() {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.spacedBy(12.dp, Alignment.CenterVertically),
    ) {
        Text("Hello, World!")
        Button(onClick = { }) {
            Text("Click me")
        }
    }
}

@Preview(showBackground = true)
@Composable
private fun HelloWorldContentPreview() {
    HelloWorldContent()
}

スクリーンショットを撮影する

スクリーンショットを撮るテスト用クラスをandroidTest配下に作成します。やることはたったの4つだけです。

1. createComposeRule() で composeTestRule を作成する
2. composeTestRule に setContnet{ } で対象のコンポーザブルをセットする
3. captureToImage() でスクリーンショットを撮影する
4. saveScreenshot() で撮影したスクリーンショットを保存する (saveScreenshot()はCodelabのRallyアプリ内にある関数ですが、ここでは割愛します)

class HelloWorldContentTest {
    @get:Rule
    val composeTestRule = createComposeRule()

    @Test
    fun helloWorldScreenshot() {
        composeTestRule.setContent {
            HelloWorldContent()
        }

        val bitmap = composeTestRule.onRoot().captureToImage().asAndroidBitmap()
        saveScreenshot("hello-world", bitmap)
    }
}

このテストを実行すると、エミューレータ内上でスクリーンショットが撮影されます。撮影したスクリーンショットを確認するには、Android Studio の Device File Explorer を使います。私の環境では /data/data/<アプリパッケージ名>/files/hello-world.png に保存されていました。ばっちりスクリーンショットが撮れています

補足

• setContent()は1つのテスト(@Testを付けている関数)あたり1回だけ呼ぶことができます
• Android上で実行される Instrumentation Test なので、スクリーンショットの保存先も Android 上になります。デスクトップに保存するといったことはできないので、スクリーンショット撮影後に適当な場所に移動する必要があります
• 実際のスクリーンショットを撮影する用途はコードの変更によって意図しないUIの変化が発生していないかを検証することだと思います。スクリーンショットはBitmapで取得できるので、ゴールデンファイルを用意してそれと1ピクセルずつ一致していることをチェックすることで実現できます
• Compose のテストに関する情報は、Codelab やドキュメント, YouTube に分かりやすくまとまっているので一度チェックしてみることをおすすめします！