Compose プレビューのスクリーンショットのテスト

スクリーンショット テストは、UI がユーザーにどのように表示されるかを検証するための効果的な方法です。「 Compose プレビューのスクリーンショット テストツールは、 コンポーザブルのプレビュー ホスト側スクリーンショット テストの実行による生産性の向上。Compose プレビュー スクリーンショット テストは、コンポーザブル プレビューと同じくらい簡単に使えるように設計されています。

スクリーンショット テストは、UI のスクリーンショットを撮る自動テストです。 承認済みの参照画像と比較します。もし 画像が一致しない場合、テストは失敗し、HTML レポートが生成されます。 違いを見つけます。

Compose プレビューのスクリーンショット テストツールを使用すると、次のことができます。

  • 使用するコンポーザブル プレビューの既存または新規の数を特定します。 スクリーンショット テスト。
  • これらのコンポーザブルのプレビューから参照画像を生成します。
  • プレビューに加えられた変更を特定する HTML レポートを生成してから、 行います。
  • @Preview パラメータ（uiMode、fontScale など）とマルチプレビューを使用する さまざまな機能が用意されています。
  • 新しい screenshotTest ソースセットを使用してテストをモジュール化します。
で確認できます。 <ph type="x-smartling-placeholder">
</ph>
図 1.HTML レポートの例。

要件

Compose プレビューのスクリーンショット テストを使用するには、次のものが必要です。

  • Android Gradle 8.5.0-beta01 以降。
  • Kotlin 1.9.20 以降。

設定

ツールを有効にする手順は次のとおりです。

  1. com.android.compose.screenshot プラグインのバージョンを追加する プロジェクトへの 0.0.1-alpha01。
    1. バージョン カタログ ファイルにプラグインを追加します。 
      [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"}
    2. モジュール レベルの build.gradle.kts ファイルで、 plugins {} ブロック: 
      plugins {
    ...
    alias(libs.plugins.screenshot)
}
  2. プロジェクトの gradle.properties ファイル。 
    android.experimental.enableScreenshotTest=true
  3. モジュール レベルの 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
}
  4. 必ず ui-tooling 学びます。
    1. バージョン カタログに追加します。 
      [libraries]
androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling"}
    2. これをモジュール レベルの 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 で報告してください。