Jetpack Composeから始める、頑張らないVRT

Transcript

1. Jetpack Composeから始 める、頑張らないVRT
2. 自己紹介 清水泰博 Androidアプリ書いたりWebフロントエンド書いたり --- Twitter: @_yshrsmz GitHub: @yshrsmz その他: AndroidDagashiの運営とか
3. VRT?
4. VRTとは - Visual Regression Testing - 画像回帰テスト - 視覚的にリグレッションテストを行うこと - 変更前後のスクリーンショットを比較して、差分を検出する - ユニットテストでは担保しづらい、見た目をテストできる
5. VRTのつらいところ
6. VRTのつらいところ - テストケースのメンテ - 単純に書くものが増える - 実機/エミュレータを使う必要がある - 時間がかかる - テストの実行結果が不安定 - CIで動かすにしても/SaaS 使うにしても手間がかかる - 💰💰💰 でも…
7. Jetpack Compose なら楽して VRT できる！
8. 今日の内容を3行で
9. - airbnb/showkase で、`@Preview` Composable 関数を収集 - cashapp/paparazzi で、実機/エミュレータ不要でスクリーンショット を取得 - reg-viz/reg-suit で、リッチなVRTレポートを作る
10. 各ツールの紹介
11. airbnb/showkase - Jetpack Compose の `@Preview` からUIカタログを作るライブラリ - kapt/ksp で `@Preview` 付き Composable の一覧を作り - その一覧を表示する Activity を提供する
12. cashapp/paparazzi - 安心の square 製 - 実機/エミュレータ無しで Android View や Composable 関数を描画し、スクリーン ショットを取得できる - これ単体でも VRT を提供している
13. paparazzi 単体での VRT expected, actual, diff を含む画像を生成する
14. - showkase x paparazzi だけでも VRT はできる - しかし paparazzi の VRT は非常にプリミティブで、レポートもない - もっとリッチに、かつ PR 上から確認できるようにしたい → reg-suit を使おう
15. reg-viz/reg-suit - Node.js 製の画像回帰テストツール - 画像の差分検知と、リッチなレポートサイトを提供する - GitHub 連携で簡単なレポートを表示できる - アップロード先は S3 と GCS をサポート
17. reg-suit の比較元検出方法 - トピックブランチがマージ先から分岐したコミットに紐づくレポート
18. 手順
19. https://github.com/android/nowinandroid/pull/101 “Add automatic preview screenshot testing with Paparazzi and Showkase” showkase x paparazzi の設定はこのPRで詳しく見れます
20. テスト対象のモジュールに showkase を追加
21. テスト用モジュールの作成
22. src/test/kotlin/…/ScreenshotShowkaseModule showkase のエントリポイント
23. src/test/kotlin/…/PreviewScreenshotTests 今回のテストパラメータ - showkase の収集した Composable - テスト対象の端末 - テストしたい Font Scale
24. テストの基本設定
25. パラメータの準備(1)
26. パラメータの準備(2)
27. テスト本体
28. $ ./gradlew :preview-screenshots:recordPaparazzi スクリーンショットの取得 $ ./gradlew :preview-screenshots:verifyPaparazzi 画像回帰テスト
29. reg-suit の設定 - Node.js が必要 - プラグインは reg-keygen-git-hash-plugin, reg-notify-github-plugin, reg-publish-s3-plugin を選択 - 画像ディレクトリは preview-screenshots/src/test/snapshots/images を指定 - paparazzi の output ディレクトリ
30. AWS S3 の設定 - reg-suit のウィザードの中で作成できる - Google Cloud Storage でも可 - Webページを公開できるように設定する
31. CIの設定(GitHub Actions)-1
32. CIの設定(GitHub Actions)-2
33. CIの設定(GitHub Actions)-3
34. CI の設定 - pull request と main ブランチへの push タイミングで実行する - main への push タイミングは比較元のレポートを作成するため - 比較元のコミットを判別するため、git は完全なクローンが必要 - デフォルトでは depth=1 でクローンしている - detached HEAD ではなく、ブランチをチェックアウトしていること - AWS S3 へのアクセスは OIDC の設定が必要 - CodeBuild の設定するよりは遥かに楽だった (個人的感想です)
35. まとめ - airbnb/showkase で、`@Preview` Composable 関数を収集 - cashapp/paparazzi で、実機/エミュレータ不要でスクリーンショットを取得 - reg-viz/reg-suit で、リッチなVRTレポートを作る
36. Thanks!