スクリーンショット テストは、UI がユーザーにどのように表示されるかを検証するための効果的な方法です。「 Compose プレビューのスクリーンショット テストツールは、 コンポーザブルのプレビュー ホスト側スクリーンショット テストの実行による生産性の向上。Compose プレビュー スクリーンショット テストは、コンポーザブル プレビューと同じくらい簡単に使えるように設計されています。
スクリーンショット テストは、UI のスクリーンショットを撮る自動テストです。 承認済みの参照画像と比較します。もし 画像が一致しない場合、テストは失敗し、HTML レポートが生成されます。 違いを見つけます。
Compose プレビューのスクリーンショット テストツールを使用すると、次のことができます。
- 使用するコンポーザブル プレビューの既存または新規の数を特定します。 スクリーンショット テスト。
- これらのコンポーザブルのプレビューから参照画像を生成します。
- プレビューに加えられた変更を特定する HTML レポートを生成してから、 行います。
@Preview
パラメータ(uiMode
、fontScale
など)とマルチプレビューを使用する さまざまな機能が用意されています。- 新しい
screenshotTest
ソースセットを使用してテストをモジュール化します。
![](https://developer.android.com/static/studio/images/compose-screenshot-testing.png?authuser=9&hl=ja)
要件
Compose プレビューのスクリーンショット テストを使用するには、次のものが必要です。
- Android Gradle 8.5.0-beta01 以降。
- Kotlin 1.9.20 以降。
設定
ツールを有効にする手順は次のとおりです。
com.android.compose.screenshot
プラグインのバージョンを追加する プロジェクトへの0.0.1-alpha01
。- バージョン カタログ ファイルにプラグインを追加します。
[versions] agp = "8.5.0-beta01" kotlin = "1.9.20" ... screenshot = "0.0.1-alpha01" [plugins] ... screenshot = { id = "com.android.compose.screenshot", version.ref = "screenshot"}
- モジュール レベルの
build.gradle.kts
ファイルで、plugins {}
ブロック:plugins { ... alias(libs.plugins.screenshot) }
- プロジェクトの
gradle.properties
ファイル。android.experimental.enableScreenshotTest=true
- モジュール レベルの
android {}
ブロックで、build.gradle.kts
ファイル内で、テストフラグを有効にしてscreenshotTest
個のソースセットを使用して、kotlinCompilerExtensionVersion
が 1.5.4 以上に設定されている。 <ph type="x-smartling-placeholder">android { ... composeOptions { kotlinCompilerExtensionVersion = "1.5.4" } experimentalProperties["android.experimental.enableScreenshotTest"] = true }
- 必ず
ui-tooling
学びます。- バージョン カタログに追加します。
[libraries] androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling"}
- これをモジュール レベルの
build.gradle.kts
ファイルに追加します。dependencies { screenshotTestImplementation(libs.androidx.compose.ui.tooling) }
- バージョン カタログに追加します。
スクリーンショット テストに使用するコンポーザブル プレビューを指定する
スクリーンショット テストに使用するコンポーザブルのプレビューを指定するには、
テストクラスでプレビューを実行します。テストクラス ファイルは新しい Deployment の
screenshotTest
ソースセット(例:
app/src/screenshotTest/kotlin/com/google/yourapp/ExamplePreviewScreenshots.kt
({module}/src/screenshotTest/{kotlin|java}/com/your/package
)。
マルチプレビューを含むコンポーザブルやプレビューは、 このファイル、または同じソースセット内に作成された他のファイル。
package com.google.yourapp
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import com.google.yourapp.ui.theme.MyApplicationTheme
class ExamplePreviewsScreenshots {
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
MyApplicationTheme {
Greeting("Android!")
}
}
}
参照画像を生成する
テストクラスを設定したら、それぞれに対して参照画像を生成する必要があります。 プレビューします。これらの参照画像は、変更後に変更を特定するために使用されます。 行います。コンポーザブル プレビューの参照画像を生成するには スクリーンショット テストで、次の Gradle タスクを実行します。
- Linux / macOS:
./gradlew updateDebugScreenshotTest
(./gradlew {:module:}update{Variant}ScreenshotTest
) - Windows:
gradlew updateDebugScreenshotTest
(gradlew {:module:}update{Variant}ScreenshotTest
)
タスクが完了したら、
app/src/debug/screenshotTest/reference
({module}/src/{variant}/screenshotTest/reference
)。
テストレポートを生成する
参照画像が作成されたら、検証タスクを実行して新しいスクリーンショットを撮ります 次の参照画像と比較します。
- Linux / macOS:
./gradlew validateDebugScreenshotTest
(./gradlew {:module:}validate{Variant}ScreenshotTest
) - Windows:
gradlew validateDebugScreenshotTest
(gradlew {:module:}validate{Variant}ScreenshotTest
)
確認タスクによって、次の URL に HTML レポートが作成されます:
{module}/build/reports/screenshotTest/preview/{variant}/index.html
。
既知の問題
既知の問題の現在のリストは、 Issue Tracker コンポーネントその他のフィードバックや問題を報告 Issue Tracker で報告してください。