CIを用いたAndroidのAPI29以上でのVisual_Regression_Test__1_.pdf

Transcript

1. 00
 自己紹介
 ©NewsPicks Inc. All Rights Reserved. 
 Masato Haruta
 NewsPicks Androidエンジニア 

2. CIを用いたAndroidのAPI29以上での Visual Regression Test
 Last updated:2024.05.21
 NewsPicks Android Engineer / Masato Haruta

3. 1. VRT導入経緯
 2. API28の壁
 3. API29以上でVRTを手動実行する方法
 4. VRTとCIを連携し、毎晩自動実行する
 5. まとめ
 00
 目次
 ©NewsPicks Inc. All Rights Reserved. 

4. 01
 VRT導入経緯
 ©NewsPicks Inc. All Rights Reserved.
 特定のユーザーに対してや特定のタイミングでしか出ないモジュールがあったり、 
 実装上の都合で影響が広範囲に及ぶケースもあるため、 
 確認事項も多いことから抜け漏れが多々あった。 
 
 VRTを自動化して毎晩テストをすることで上記は解消できそうだ、となり導入することになりました。 

5. 02
 API28の壁
 ©NewsPicks Inc. All Rights Reserved.
 2023年夏頃導入決定(この時の最新OSはAPI33)
 見渡す限り参考になりそうな導入事例サイトは全て API28以下のものばかり
 
 試しにAPI29にして、多くの参考サイトで使われていた Google製のScreenShotterで動作させてみる→ どうやらスクリーンショットを保存する場所が NG
 
 ※ScreenShotterを使う最大のメリットは、スクリーンショットを撮ったら端末内への保存及びテスト実行 環境のローカルにコピーしてくれるという 2つだが、これがAPI29以上ではエラーになるため使えない 
 

6. 03
 API29以上でVRTを手動実行する方法
 ©NewsPicks Inc. All Rights Reserved.
 スクリーンショットを保存する場所を変えればよかったので諸々の理由から 
 /sdcard/Android/media/com.hoge/
 に置くことで回避しました (上記パスはgetExternalMediaDirsで取得したものになります )
 
 実際にスクリーンショットを撮る方法ですが、 UiDevice#takeScreenshotを採用しました
 
 ここまで来たら、reg-cliを使って正解データと端末保存されたデータで VRTが実行可能となります 
 
 例えば以下のような adbコマンドで簡単に端末保存されたものを取り出せます 
 
 
 $ adb pull $(adb shell 'ls /sdcard/Android/media/com.hoge/screenshottest_*.png') .

7. 04
 VRTとCIを連携し、毎晩自動実行する
 ©NewsPicks Inc. All Rights Reserved.
 1. CI経由でFirebaseTestLabにあるAndroid端末を起動し、テストを実行 
 2. テスト実行内で所定の画面のスクリーンショットを撮り、端末内に保存 
 3. 上記2で端末内に保存したスクリーンショットを実行環境のローカルにコピー 
 4. reg-suitを用いて上記3でコピーしたスクリーンショットと、予め GoogleCloudStorageに置いてあ る正解データとでテストを実行 
 5. 結果をSlackに通知

8. 04
 実装例1(bitrise.ymlのFirebase設定部分抜粋)
 ©NewsPicks Inc. All Rights Reserved.
 - virtual-device-testing-for-android@1: inputs: - test_type: instrumentation - test_timeout: '3600' - inst_test_targets: "$E2E_CLASS" - test_devices: MediumPhone.arm,30,en,portrait - environment_variables: additionalTestOutputDir=/sdcard/Android/media /com.hoge/ - directories_to_pull: /sdcard/Android/media/com.hoge/ - download_test_results: “true" 
 • environment_variables: additionalTestOutputDir は前述のス クリーンショット保存時エラー回避で取 得したパスを入れる 
 • directories_to_pullは、テスト完了後に デバイスのストレージからダウンロード されるパスになる
 • download_test_resultsは、false に設 定するとダッシュボードにのみダウン ロードされるようになる 

9. 04
 実装例2(bitrise.ymlのファイルコピー部分抜粋)
 ©NewsPicks Inc. All Rights Reserved.
 以下スクリプトをbitrise.ymlに追記することでテスト端末から CIのローカルに取り出します。 (取り出し時 ファイルをreg-suitのためにリネームします )
 
 ${VDTESTING_DOWNLOADED_FILES_DIR}はBitriseでVirtualDeviceTesting実行時 ファイルが一次保存される場所を示した環境変数です 
 
 $SAVED_ACTUAL_DIRは実行環境ローカル保存パスが入る $IMAGE_PREFIXは端末内保存パスが入 る(oriole-30-en-portrait_artifacts/sdcard/Android/media/com.hoge/)
 
 $ mv ${VDTESTING_DOWNLOADED_FILES_DIR}/screenshottest_*.png ./${SAVED_ACTUAL_DIR}/
 $ cd ${SAVED_ACTUAL_DIR}
 $ ls | sed -r "s/($IMAGE_PREFIX)(screenshottest[_a-z0-9]+)\.png/mv & \2.png/g" | bash

10. 04
 実装例3(bitrise.ymlのreg-suit実行部分抜粋)
 ©NewsPicks Inc. All Rights Reserved.
 reg-suitで画像比較検証を行います。 
 
 API28以下もAPI29以上も、予めGoogle Cloud Storageに置いてある正解データ とローカルに移動してきたスクショを比較 検証します。
 テストフロー④と⑤を実行します。 
 
 Bitriseで対話式のプラグインインストール を何も考えず行うとFailしていたため以下 のように echo N | を用いて回避する必 要がありました。
 npm install -g reg-suit
 npm install
 
 # Pluginのインストール
 npm i reg-notify-slack-plugin -D
 echo N | reg-suit prepare -p notify-slack
 npm i reg-publish-gcs-plugin -D
 echo N | reg-suit prepare -p publish-gcs
 npm i reg-simple-keygen-plugin -D
 echo N | reg-suit prepare -p simple-keygen
 
 # 実行
 reg-suit run

11. 04
 まとめ
 ©NewsPicks Inc. All Rights Reserved.
 AndroidのOSが9から10になったことでストレージまわりの権限が厳しくなりました。 
 
 これにより、巷にある方法ではうまく VRTができませんでしたが 
 Bitriseで指定しているFirebaseのパラメータについては、 
 公式ドキュメントも見当たらず実ソースから読み解くことでやりたいことが実現できました