Zenn
Open9

Compose Screenshot Test を試してみる

Android
Kotlin
Test
screenshot
compose
Kotaro666Kotaro666

依存パッケージのバージョンニング

5/16 時点でリリースされている最新安定バージョンを使用する。

libs.versions.toml
[versions]
agp = "8.5.0-beta01"
kotlin = "1.9.24"

screenshot = "0.0.1-alpha01"
app/build.gradle
android {
    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.14"
    }
}

8.5.0-beta02 指定時のGradle Sync Error

The project is using an incompatible version (AGP 8.5.0-beta02) of the Android Gradle plugin. Latest supported version is AGP 8.5.0-beta01

以下の Koala バージョンでは AGP 8.5.0-beta02 非対応の模様のため、AGP 8.5.0-beta01 を使用する。

Android Studio Koala | 2024.1.1 Beta 1
Build #AI-241.15989.150.2411.11801021, built on May 4, 2024

参考資料

Kotaro666Kotaro666

Screenshot Plugin をモジュールに追加する

app/build.gradle
plugins {
    ...
    alias(libs.plugins.screenshot)
}

Gradle Sync 実行時に以下のエラーが発生した。

* What went wrong:
An exception occurred applying plugin request [id: 'com.android.compose.screenshot', version: '0.0.1-alpha01']
> Failed to apply plugin 'com.android.compose.screenshot'.
   > Please enable screenshotTest source set first to apply the screenshot test plugin.
     Add "android.experimental.enableScreenshotTest=true" to gradle.properties

公式ドキュメントに記載された以下の手順を実行する必要がありそう。

  1. Enable the experimental property in your project's gradle.properties file
gradle.properties
android.experimental.enableScreenshotTest=true

再び Gradle Sync 実行してみると、以下のエラーが発生した。

* What went wrong:
A problem occurred configuring project ':app'.
> java.lang.IllegalStateException: Please enable screenshotTest source set in module first to apply the screenshot test plugin.
  Add "experimentalProperties["android.experimental.enableScreenshotTest"] = true" to the android block of the module's build file: file:/Users/kotaro/Develop/ComposeScreenshotTestPlayground/app/build.gradle.kts

公式ドキュメントに記載された以下の手順を実行する必要がありそう。

  1. In the android {} block of your module-level build.gradle.kts file, enable the experimental flag to use the screenshotTest source set and ensure that kotlinCompilerExtensionVersion is set to 1.5.4 or higher.
app/build.gradle
android {
    ...
    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.14"
    }
    experimentalProperties["android.experimental.enableScreenshotTest"] = true
}

上記の記述を対応して、再び Gradle Sync 実行してみると、正常に完了した。
ビルドも正常に実行できることを確認した。

Kotaro666Kotaro666

Screenshot test のコードを書く場所を作成する

The test class file must be located in the new screenshotTest source set, for example app/src/screenshotTest/kotlin/com/google/yourapp/ExamplePreviewScreenshots.kt ({module}/src/screenshotTest/{kotlin|java}/com/your/package).

Android Studio でディレクトリを新規作成しようとすると、Screenshot test 用のディレクトリを選択することができる様になっていることを確認した。

こんな感じで、用意する（誤って ScreenshotTestDebug を選択した）

GreetingPreviewScreenshots
class GreetingPreviewScreenshots {

    @Preview(showBackground = true)
    @Composable
    fun GreetingPreview() {
        ComposeScreenshotTestPlaygroundTheme {
            Greeting(name = "Screenshot test")
        }
    }
}
Kotaro666Kotaro666

イメージ生成処理を実行する

Linux and macOS: ./gradlew updateDebugScreenshotTest (./gradlew {:module:}update{Variant}ScreenshotTest)

./gradlew updateDebugScreenshotTest

Welcome to Gradle 8.7!

Here are the highlights of this release:
 - Compiling and testing with Java 22
 - Cacheable Groovy script compilation
 - New methods in lazy collection properties

For more details see https://docs.gradle.org/8.7/release-notes.html

Starting a Gradle Daemon, 1 incompatible and 2 stopped Daemons could not be reused, use --status for details

> Configure project :app
WARNING: The option setting 'android.experimental.enableScreenshotTest=true' is experimental.
The current default is 'false'.
WARNING: A terminally deprecated method in java.lang.System has been called
WARNING: System::setSecurityManager has been called by com.android.tools.rendering.security.RenderSecurityManager (file:/Users/kotaro/.gradle/caches/modules-2/files-2.1/com.android.tools.compose/compose-preview-renderer/0.0.1-alpha01/3f3d753d2b969a1b13a51dd4a1ca142167405e0d/compose-preview-renderer-0.0.1-alpha01.jar)
WARNING: Please consider reporting this to the maintainers of com.android.tools.rendering.security.RenderSecurityManager
WARNING: System::setSecurityManager will be removed in a future release

BUILD SUCCESSFUL in 1m 20s
26 actionable tasks: 14 executed, 12 up-to-date

生成されたファイル

After the task completes, find the reference images in app/src/debug/screenshotTest/reference ({module}/src/{variant}/screenshotTest/reference).

生成されたファイル名： io.github.Kotaro666_dev.composescreenshottestplayground.GreetingPreviewScreenshots.GreetingPreview_3d8b4969_da39a3ee_0.png

Kotaro666Kotaro666

タスクレポートを生成する

Once the reference images exist, run the validate task to take a new screenshot and compare it with the reference image:

以下のコマンドを実行することで、新たなスクリーンショットを生成し、既存のスクリーンショットと比較してくれるみたい。

Linux and macOS: ./gradlew validateDebugScreenshotTest (./gradlew {:module:}validate{Variant}ScreenshotTest)

./gradlew validateDebugScreenshotTest

> Configure project :app
WARNING: The option setting 'android.experimental.enableScreenshotTest=true' is experimental.
The current default is 'false'.

BUILD SUCCESSFUL in 3s
27 actionable tasks: 3 executed, 24 up-to-date

The verification task creates an HTML report at {module}/build/reports/screenshotTest/preview/{variant}/index.html.

生成される HTML

Kotaro666Kotaro666

変更差分を含めて、タスクレポートを作成する

GreetingPreviewScreenshots
- Greeting(name = "Screenshot test")
+ Greeting(name = "Screenshot test: Failure")

./gradlew validateDebugScreenshotTest

> Configure project :app
WARNING: The option setting 'android.experimental.enableScreenshotTest=true' is experimental.
The current default is 'false'.
WARNING: A terminally deprecated method in java.lang.System has been called
WARNING: System::setSecurityManager has been called by com.android.tools.rendering.security.RenderSecurityManager (file:/Users/kotaro/.gradle/caches/modules-2/files-2.1/com.android.tools.compose/compose-preview-renderer/0.0.1-alpha01/3f3d753d2b969a1b13a51dd4a1ca142167405e0d/compose-preview-renderer-0.0.1-alpha01.jar)
WARNING: Please consider reporting this to the maintainers of com.android.tools.rendering.security.RenderSecurityManager
WARNING: System::setSecurityManager will be removed in a future release

> Task :app:validateDebugScreenshotTest FAILED

io.github.Kotaro666_dev.composescreenshottestplayground.GreetingPreviewScreenshots > GreetingPreview FAILED
    java.lang.AssertionError at PreviewScreenshotTestEngine.kt:230

1 test completed, 1 failed

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:validateDebugScreenshotTest'.
> There were failing tests. See the results at: file:///Users/kotaro/Develop/ComposeScreenshotTestPlayground/app/build/test-results/validateDebugScreenshotTest/

* Try:
> Run with --scan to get full insights.

BUILD FAILED in 7s
27 actionable tasks: 6 executed, 21 up-to-date

生成される HTML