ごぶさたしております、こまたつです。
スクリーンショットテストやビジュアルリグレッションテストなどの言葉もここ数年で一挙に広がりを見せたような気がしますが、満を持してGoogle純正のスクリーンショットテストツールが出てきていましたね。
alphaになっているものの、導入自体はドキュメントを見ながら進めればスムーズにできてしまったので、どのように運用するか？にフォーカスを当てて記事にしてみようと思います。
セットアップを完了すると、 ./gradlew updateDebugScreenshotTest でキャプチャの生成が、 ./gradlew validateDebugScreenshotTest で結果レポートの生成がそれぞれできるようになります。
コマンドラインから実行できる上にエミュレーター不要なのでCIからも叩きやすくていいですね。
生成される結果レポートは次のようになります。
./gradlew validateDebugScreenshotTest は実行時のコードでキャプチャを新たに取得し、既に存在するキャプチャとのdiffを確認してレポートを生成してくれます。
これをPR毎に実行しようとすると次のような設定になります。（お使いのCIツールに合わせて読み替えてください。例はCircle CIです）
steps:
（checkoutやUnitTestの実行など）
- run:
name: Run Screenshot Tests
command: ./gradlew validateScreenshotTest
- store_artifacts:
path: app/build/reports/screenshotTest/preview/debug/
destination: screenshot-report
こうしておくと、画像にdiffがあればテストがFailするので、意図せぬ見た目の変更が生じたときに確実に気付けます。
テストがFailしたら原因箇所を修正するか、意図した変更だったのであれば ./gradlew updateDebugScreenshotTest で画像を更新すればテストがパスするようになります。
必要に応じてプルリクエストにレポートのURLをコメントするようにしたりすると使い勝手があがって良いと思います。
新規に画面を追加したときはデザインレビューを受けるなどして画面の内容が正しいことを確認してから ./gradlew updateDebugScreenshotTest でキャプチャを追加すれば、次以降で ./gradlew validateScreenshotTest を実行した際にdiffの検出ができるようになります。
弊社では元々maestroとreg-suitを組み合わせたビジュアルリグレッションテスト環境を構築していましたが、この方法なら自分でシェルスクリプトを書かなくても簡単に導入できるのがいいですね。
composeにしか対応していないので、導入できないプロジェクトもあるかもしれませんが条件が合えば非常に良い選択肢だと思います。
みなさんもぜひ試してみてはいかがでしょうか。
Discussion