Androidアプリの画像回帰テストをCI/CD上で無料で行う

Transcript

1. CI/CDなのに完全無料！？ 夏から始めるVRT with Android 1
2. 目次 • VRTとは？ • 今回やりたいこと • それを支える巨人たち • ワークフローの構成 • 気をつけなきゃいけないこと • 今後の展望 2
3. VRTとは • 新旧のスクショを比較して差異を確かめるテスト • ただのUIテストではわからなかった要素のズレを 確かめられる 3
4. 今回やりたいこと • 想定してるシチュエーションはネイティブでの小規模な個人開発 （Flutterじゃないよ） • 画面の操作を行ってもUIが崩れないか確認したい • 旧バージョンとの画面の差分をウェブ上で確認したい • 無料で済ませたい 4
5. 流れ • マスターにPush or マージされたら答え画像を作成し保存 • PRの作成が行われたらテストを実行 • テスト結果をFirebase hostingにデプロイ 5
6. android-emulator-runner • GitHub Actions上で動作するエミュレータ • 対抗馬のFirebaseでは11回以上の実行で有料 • 完全無料 • CI上で仮想環境を作れない問題を克服 • API、デバイス、起動引数などカスタム可能 6
7. Shot • VRTをAndroidのネイティブでできるようにするライブラリ • マスター画像の作成からテストまで全て網羅 • ビットマップからスクショを作成 • HTMLでレポートを作成してくれる • Espressoと一緒に動く 7
8. Espresso • UIの操作を結合テストで行えるようになるライブラリ • XML、JetpackCompose共に対応 8
9. テスト内容(GitHubのリポジトリ検索App) • Top画面を撮影 • 検索バーにflutterと入力 • 検索実行 • 検索結果撮影 • Flutter/flutterリポジトリをクリック • リポジトリ詳細画面を撮影 9
10. 生成されたレ ポートを見て みる 10
11. ジョブ構成（答えを作成） WorkFlow エミュレータの起動 答え画像作成 GitHubにPush JDKのセットアップ 開発者 GitHub マスターにPush or マージ Push 11
12. ジョブ構成（テスト） WorkFlow エミュレータの起動 VRTの実行 テスト結果をFirebaseに デプロイ JDKのセットアップ 開発者 Firebase PR デプロイ 12
13. 気をつけなきゃいけないこと • たまにエミュレータがエラー吐いて落ちる • APIは34,29を指定してはいけない！３１にしなきゃだめ • 動作が重いので十分にスリープを活用する必要がある • ビットマップの取得はこちらがやらなきゃいけない（Shotがバグってる） • CI上の仮想マシンはネットワークがちょい遅め？ • 画面外の要素には干渉できない 13
14. 今後の展望 • 古いレポートもログとして残したい • Reg-suitを無料で使う方法があるので調べたい（Danger使いてえ） • 動作が遅い（無料だから諦めるしかない） 14
15. 参考 15 ソースコード SHOT エミュレータ