DroidKaigi2020: Androidでもビジュアルリグレッションテストをはじめよう

iOSやJS界隈ではおなじみとなったビジュアルリグレッションテストが、
ライブラリの活用により最近Androidでも可能になってきました。
ビジュアルリグレッションテスト周りのAndroidライブラリ紹介や実際のテスト結果を紹介します。

※一部スクリーンショットが非表示の箇所がありますが意図的によるものです。

DroidKaigi:
https://droidkaigi.jp/2020/timetable/156578

サンプルアプリ:
https://github.com/keidroid/VisualRegressionTestingSample

Transcript

1. Androidでも ビジュアルリグレッションテストをはじめ よう Kei Hasegawa @keidroid
2. 本セッションのスライド https://bit.ly/2wgEEZ1
3. 自己紹介 Kei Hasegawa @keidroid / torch Inc. 今年の目標: Flutterでゲーム開発 ✨DroidKaigi初参加✨
4. 今回話すこと 1 ﾋﾞｼﾞｭｱﾙﾘｸﾞﾚｯｼｮﾝﾃｽﾄってなに？ 2 ﾋﾞｼﾞｭｱﾙﾘｸﾞﾚｯｼｮﾝﾃｽﾄってなぜやるの？ 3 ﾋﾞｼﾞｭｱﾙﾘｸﾞﾚｯｼｮﾝﾃｽﾄってどのようにやるの？
5. Agenda 1 What “Visual Regression Testing” ? 2 Why “Visual Regression Testing” ? 3 How “Visual Regression Testing” ?
6. 第一章 ビジュアルリグレッションテストって なに？
7. ﾋﾞｼﾞｭｱﾙﾘｸﾞﾚｯｼｮﾝﾃｽﾄってなに？ Visual Regression Testing
8. ﾋﾞｼﾞｭｱﾙﾘｸﾞﾚｯｼｮﾝﾃｽﾄってなに？ Visual Regression Testing 視覚的 回帰テスト
9. ﾋﾞｼﾞｭｱﾙﾘｸﾞﾚｯｼｮﾝﾃｽﾄってなに？ Visual Regression Testing 視覚的 回帰テスト Viewのデグレを防ぐテスト
10. VRTの方法 変更前の画像 変更後の画像 差分画像
11. VRTの歴史 その１ The Secret to Safe Continuous Deployment (2013) - https://youtu.be/UMnZiTL0tUc
12. VRTの歴史 その２ FBSnapshotTestCase - https://github.com/uber/ios-snapshot-test-case/
13. VRTの歴史 その３ Storybook - https://storybook.js.org/
14. ﾋﾞｼﾞｭｱﾙﾘｸﾞﾚｯｼｮﾝﾃｽﾄってなに？ - 用語 Screenshot Test Snapshot Test Visual Regression Test
15. ﾋﾞｼﾞｭｱﾙﾘｸﾞﾚｯｼｮﾝﾃｽﾄってなに？ - 用語 タグの比較 ピクセルの比較 Android iOS - ScreenshotTest SnapshotTest JavaScript SnapshotTest VRT
16. SnapshotTestとVRTのちがい https://jestjs.io/docs/ja/snapshot-testing
17. SnapshotTestとVRTのちがい ・ https://jestjs.io/blog/2016/07/27/jest-14.html#why-snapshot-testing
18. 第二章 ビジュアルリグレッションテストって なぜやるの？
19. Testing Pyramid https://developer.android.com/training/testing/fundamentals.html 忠実 実行速度 メンテナンス デバッグ
20. Testing Pyramid https://developer.android.com/training/testing/fundamentals.html 忠実 実行速度 メンテナンス デバッグ レイアウトXML
21. Espresso
22. Espresso
23. UIテストはどこまで網羅すべき？
24. UIテストはどこまで網羅すべき？ 角丸の形 色 余白 ツールバー フォント 罫線
25. 『こんなViewはいやだ』の紹介
26. テキストがきれる
27. ダークモードにするとまっくら
28. 画像が横にのびている
29. 罫線が二本 謎の余白
30. なんかちがう
31. なんかちがう
32. スクリーンショットの他のメリット紹介
33. 非エンジニアに画面共有しやすい
34. NYC DroidCon 2016 - Espresso: A Screenshot is Worth 1,000 Words - https://youtu.be/fhx_Ji5s3p4 Espresso失敗時の問題特定
35. アニメーションを含む画面 アクションのテスト サウンドのテスト 現在の手法でできないこと
36. アニメーションを含む画面 　→ 動画撮影 or アニメーションをOFF アクションのテスト 　→ Espresso サウンドのテスト 　→ 動画撮影 現在の手法でできないこと
37. 第三章 ビジュアルリグレッションテストって どうやるの？
38. サンプルアプリ https://github.com/keidroid/VisualRegressionTestingSample ・Android Studio 3.5 ・Kotlin 1.3 ・AndroidXライブラリ ・デバイス: 3.7inch WVGA(480x800) API26
39. ビジュアルリグレッションテストに必要なこと 1. スクリーンショット取得 2. 差分画像取得 3. レポート化
40. ビジュアルリグレッションテストに必要なこと 1. スクリーンショット取得 2. 差分画像取得 3. レポート化
41. 1. スクリーンショット取得 1.1 環境準備 1.2 Activity or Fragment を起動 1.3 外部ストレージ許可 1.4 スクリーンショット出力 1.5 画像ファイルの取得
42. 1.1 環境準備 (1/2) 環境の統一 ・実機 / クラウドデバイス(Firebase Test Lab) 　・機種 / OS / 端末状態 / 言語 　・アニメーション: OFF
43. 1.1 環境準備 (1/2) https://cloud.google.com/sdk/gcloud?hl=ja
44. 1.1 環境準備 (1/2) - Firebase向け環境準備 環境確認 実行
45. 1.1 環境準備 (1/2) - アニメーションOFF
46. 1.1 環境準備 (2/2) 再現可能な状態でテストする ・モック機能のある通信ライブラリをつかう 　　・Retrofit / OkHttp ・処理のモック化 (日付 / 乱数 etc) 　　・Dagger, Koin / Mockito, MockK
47. 1.2 Activity or Fragment を起動 Activity ・おすすめはActivityScenarioRule 　・AndroidXとjvmtarget:1.8が必要 　・ActivityTestRuleの方が有用なケースもある Fragment ・おすすめはFragmentScenario
48. AndroidX Releases | Test https://developer.android.com/jetpack/androidx/releases/test
49. Test your app's fragments https://developer.android.com/training/basics/fragments/testing
50. 1.2 Activity or Fragment を起動
51. 1.2 Activity or Fragment を起動 スクリーンショット処理
52. 1.3 外部ストレージ許可
53. 1.3 外部ストレージ許可 外部ストレージ許可 で必要
54. targetSdkVersion:29の外部ストレージ制限 https://developer.android.com/training/data-storage/files/external-scoped?hl=ja
55. 1.4 スクリーンショット取得 スクリーンショットライブラリ紹介 Spoon / Falcon Facebook Screenshot For Android Firebase Snapshotter AndroidX Test Runner
56. 1.Spoon https://github.com/square/spoon
57. 1.Spoon https://github.com/square/spoon ・square社が公開 (1.0.0 2013年) ・Instrumentation Test 配布ツール ・CLI, mavenで提供, 3rd製でgradle版あり ・Activityのスクリーンショット撮影のみ ・Dialog, MenuItemが表示不可
59. 1.Spoon https://github.com/square/spoon
60. 2. Falcon https://github.com/jraska/Falcon
61. 2. Falcon https://github.com/jraska/Falcon ・Josef Raskaさんが公開 (2015年~) ・Bitmap取得方式だがDialogが表示される ・Spoon連携あり ・出力先は /sdcard/screenshots がおすすめ
63. 3. Facebook Screenshot Tests For Android https://facebook.github.io/screenshot-tests-for-android/
64. 3. Facebook Screenshot Tests For Android https://facebook.github.io/screenshot-tests-for-android/ ・MacOS, Linuxのみ。Windows未対応。 ・TestRunnerの修正が必要 ・Python2が必要 ・差分検出・レポート機能あり (後ほど説明)
70. 4. Firebase Snapshotter https://firebase.google.com/docs/test-lab/android/test-screenshots
71. 4. Firebase Snapshotter https://firebase.google.com/docs/test-lab/android/test-screenshots ・Firebase Test Lab連携◎ ・jpgで出力 ・Android Studio連携の多端末テストが可能 Firebaseと連携してAndroid Studioにを追加する方法 https://qiita.com/keidroid/items/654d6749cd5f89d2cc3a 

75. 5. AndroidX Test Runner https://developer.android.com/reference/androidx/test/runner/screenshot/Screenshot
76. 5. AndroidX Test Runner https://developer.android.com/reference/androidx/test/runner/screenshot/Screenshot ・Beta版 ・出力パスがパブリックディレクトリ ・Processorのカスタムは容易
78. 1. スクリーンショット取得 1.1 環境準備 1.2 Activity or Fragment を起動 1.3 外部ストレージ許可 1.4 スクリーンショット出力 1.5 画像ファイルの取得
79. 1.5 画像ファイルの取得 … https://cloud.google.com/storage/docs/gsutil/commands/cp?hl=ja
80. 1.5 画像ファイルの取得 - パスの確認方法(1)
81. 1.5 画像ファイルの取得 - パスの確認方法(1)
82. 1.5 画像ファイルの取得 - パスの確認方法(2)
83. ビジュアルリグレッションテストに必要なこと 1. スクリーンショット取得 1.1 環境準備 1.2 Activity or Fragment を起動 1.3 外部ストレージ許可 1.4 スクリーンショット出力 1.5 画像ファイルの取得 2. 差分画像取得 3. レポート化
84. ビジュアルリグレッションテストに必要なこと 1. スクリーンショット取得 1.1 環境準備 1.2 Activity or Fragment を起動 1.3 外部ストレージ許可 1.4 スクリーンショット出力 1.5 画像ファイルの取得 2. 差分画像取得 3. レポート化
85. 2 差分画像取得 差分画像取得ライブラリ紹介 Facebook Screenshot For Android reg-suit
86. 2.1 Facebook Screenshot Tests For Android https://facebook.github.io/screenshot-tests-for-android/
87. 2.1 Facebook Screenshot Tests For Android https://facebook.github.io/screenshot-tests-for-android/ ・ から差分画像の出力に対応 ・ のFBSnapshotTestCaseと同等の使い方 　・recordMode / verifyMode つかいかた コード修正 ビルド
91. 2.2 外部ライブラリ／サービスと組み合わせる BackdropJS reg-suit blink-diff PhantomCSS Screenster Wraith Screener HAPPO Loki ImageMagick
92. Androidでも使えてセットアップがかんたんで差分 画像がわかりやすくてローカルで実行できるけど CI連携もできてできればレポート出力とかSlack通 知とかできるライブラリが良い..
93. 2.2 reg-suit https://reg-viz.github.io/reg-suit/
94. 2.2 reg-suit https://reg-viz.github.io/reg-suit/
95. 2.2 reg-suit https://reg-viz.github.io/reg-suit/ スクショ出力フォルダと合わせると楽
96. 2.2 reg-suit タスクを追加 Windowsの場合は以下に変更 https://reg-viz.github.io/reg-suit/
102. まとめ(1) What ・Viewのデグレを防ぐテスト ・スクリーンショットの前後を比較 Why ・UIテストの効率化 ・Viewのテスト範囲を広げる ・他スクリーンショットのメリット (共有・Espresso)
103. まとめ(2) デバイスの統一 アニメーションOFF 外部ストレージ許可 Activity/Fragment起動 DI Mock 環境設定 スクショ取得 差分検出 Dagger reg-suit Spoon Firebase Snapshotter Falcon AndroidX Test Runner Koin Mockito MockK Facebook Screenshot For Android
104. ご清聴ありがとうございました