Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

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

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

0b4072e84047c21179f1a45e674ee0ba?s=128

Kei Hasegawa

March 01, 2020
Tweet

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の歴史 その1 The Secret to Safe Continuous Deployment (2013) -

    https://youtu.be/UMnZiTL0tUc
  12. VRTの歴史 その2 FBSnapshotTestCase - https://github.com/uber/ios-snapshot-test-case/

  13. VRTの歴史 その3 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が表示不可
  58. None
  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

    がおすすめ
  62. None
  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が必要 ・差分検出・レポート機能あり (後ほど説明)
  65. None
  66. None
  67. None
  68. None
  69. None
  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 

  72. None
  73. None
  74. None
  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のカスタムは容易

  77. None
  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 つかいかた コード修正 ビルド
  88. None
  89. None
  90. None
  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/

  97. None
  98. None
  99. None
  100. None
  101. None
  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. ご清聴ありがとうございました