【Android】Compose Preview Screenshot Testingを試してみる

Android

はじめに

こんにちは。
初めてブログを書きます。入社3年目のバッキーです。
入社してから今年の6月までAndroidアプリエンジニアとして業務に携わっていました。

今回はAndroid開発の中でもまだ正式リリースがされていないテスト機能の紹介をします。

目次

Compose Preview Screenshot Testing

今回紹介するのはCompose Preview Screenshot Testingです。
前提として近年、AndroidアプリはJetpack ComposeというUIツールキットを利用して画面を作成しています。
Compose Preview Screenshot Testingは、Jetpack Composeで作成したUIのスクリーンショットを自動的に取得し、UI差分を検出する手法です。
これによりアプリの視覚的な変化を簡単に検出できるようになります。

やってみよう

習うより慣れよです。
どのようにUIの変化を検出するか実際に動かして確かめていきます。

セットアップ

まずはテストを実行するためのプラグインをライブラリ管理ファイルに追加します。
※プラグイン：機能を拡張させるためのプログラム群


libs.versions.toml:

[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{}ブロックにプラグインを追加します。


build.gradle.kts:

plugins {
    ...
    alias(libs.plugins.screenshot)
}


この機能は試験版なので、gradle.propertiesファイルで試験運用版プロパティを有効にします。

gradle.properties:

android.experimental.enableScreenshotTest=true


これでセットアップは完了です。 　

スクリーンショットの準備

次にテストコードを格納するscreenshotTestフォルダを準備します。
以下のように準備をしてください。
また、ここで表記しているcom/bakkie/ecbeingはアプリのパッケージ名なので、実際に実装する場合は現在作業しているパッケージ名に準拠してください。
※パッケージ：アプリが持っている一意のID

app/src/screenshotTest/kotlin/com/bakkie/ecbeing

スクリーンショットの基となるテストコードを用意します。

EcbeingPreviewScreenshots.kt

class EcbeingPreviewScreenshots {

    @Preview(showBackground = true)
    @Composable
    fun EcbeingTextPreview() {
        EcbeingText("ecbeing!")
    }

    @Preview(showBackground = true)
    @Composable
    fun EcbeingButtonPreview() {
        EcbeingButton(text = "ecbeing!") {}
    }
}


今回は2つ関数を用意しました。 以下画像に表示されているテキストの関数と、ボタン単体の関数です。
EcbeingText()とEcbeingButton()は別ファイルに定義しています。



次に、テストの比較元となるスクリーンショット画像を用意します。
ターミナルを開きプロジェクト配下でコマンドを入力するとスクリーンショット画像を生成します。

./gradlew updateDebugScreenshotTest


これでapp/src/debug/screenshotTest/referenceにスクリーンショット画像が生成されました。

テスト実行

以下コマンドを入力し、Compose Preview Screenshot Testingを実行します。

./gradlew validateDebugScreenshotTest


そうするとapp/build/reports/screenshotTest/preview/debugにテスト結果のhtmlが出力されます。



レポートに画像がいくつか表示されていますね。画像の対応表は以下のとおりです。

Reference Image用意したスクリーンショット画像
Actual Imageテスト実行時のスクリーンショット画像
Diff ImageReference ImageとActual Imageの差分


今回は100%成功ですね。

試しに、ボタンの色を変更してテストを実行します。
ではどうなるでしょうか！


Diff Imageに差分が鮮やかなピンクで表示されました。
見事UIの変更検知ができましたね！

最後に

ここまで読んでいただきありがとうございます。
今回はUIの変更検知ができるテストを紹介しました。開発中にアプリのUI変更がよく発生する場合には非常に効果的ではないでしょうか。
今回紹介した機能のプラグインバージョンは0.0.1-alpha01でした。
正式リリースまでまだまだ先ではありますが、
より機能的になることを願うばかりです。


ecbeingでは新しきを追い求めるエンジニアを募集しています！！

careers.ecbeing.tech