Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

本セッションのスライド https://bit.ly/2wgEEZ1

Slide 3

Slide 3 text

自己紹介 Kei Hasegawa @keidroid / torch Inc. 今年の目標: Flutterでゲーム開発 ✨DroidKaigi初参加✨

Slide 4

Slide 4 text

今回話すこと 1 ﾋﾞｼﾞｭｱﾙﾘｸﾞﾚｯｼｮﾝﾃｽﾄってなに？ 2 ﾋﾞｼﾞｭｱﾙﾘｸﾞﾚｯｼｮﾝﾃｽﾄってなぜやるの？ 3 ﾋﾞｼﾞｭｱﾙﾘｸﾞﾚｯｼｮﾝﾃｽﾄってどのようにやるの？

Slide 5

Slide 5 text

Agenda 1 What “Visual Regression Testing” ? 2 Why “Visual Regression Testing” ? 3 How “Visual Regression Testing” ?

Slide 6

Slide 6 text

第一章 ビジュアルリグレッションテストって なに？

Slide 7

Slide 7 text

ﾋﾞｼﾞｭｱﾙﾘｸﾞﾚｯｼｮﾝﾃｽﾄってなに？ Visual Regression Testing

Slide 8

Slide 8 text

ﾋﾞｼﾞｭｱﾙﾘｸﾞﾚｯｼｮﾝﾃｽﾄってなに？ Visual Regression Testing 視覚的 回帰テスト

Slide 9

Slide 9 text

ﾋﾞｼﾞｭｱﾙﾘｸﾞﾚｯｼｮﾝﾃｽﾄってなに？ Visual Regression Testing 視覚的 回帰テスト Viewのデグレを防ぐテスト

Slide 10

Slide 10 text

VRTの方法 変更前の画像 変更後の画像 差分画像

Slide 11

Slide 11 text

VRTの歴史 その１ The Secret to Safe Continuous Deployment (2013) - https://youtu.be/UMnZiTL0tUc

Slide 12

Slide 12 text

VRTの歴史 その２ FBSnapshotTestCase - https://github.com/uber/ios-snapshot-test-case/

Slide 13

Slide 13 text

VRTの歴史 その３ Storybook - https://storybook.js.org/

Slide 14

Slide 14 text

ﾋﾞｼﾞｭｱﾙﾘｸﾞﾚｯｼｮﾝﾃｽﾄってなに？ - 用語 Screenshot Test Snapshot Test Visual Regression Test

Slide 15

Slide 15 text

ﾋﾞｼﾞｭｱﾙﾘｸﾞﾚｯｼｮﾝﾃｽﾄってなに？ - 用語 タグの比較 ピクセルの比較 Android iOS - ScreenshotTest SnapshotTest JavaScript SnapshotTest VRT

Slide 16

Slide 16 text

SnapshotTestとVRTのちがい https://jestjs.io/docs/ja/snapshot-testing

Slide 17

Slide 17 text

SnapshotTestとVRTのちがい ・ https://jestjs.io/blog/2016/07/27/jest-14.html#why-snapshot-testing

Slide 18

Slide 18 text

第二章 ビジュアルリグレッションテストって なぜやるの？

Slide 19

Slide 19 text

Testing Pyramid https://developer.android.com/training/testing/fundamentals.html 忠実 実行速度 メンテナンス デバッグ

Slide 20

Slide 20 text

Testing Pyramid https://developer.android.com/training/testing/fundamentals.html 忠実 実行速度 メンテナンス デバッグ レイアウトXML

Slide 21

Slide 21 text

Espresso

Slide 22

Slide 22 text

Espresso

Slide 23

Slide 23 text

UIテストはどこまで網羅すべき？

Slide 24

Slide 24 text

UIテストはどこまで網羅すべき？ 角丸の形 色 余白 ツールバー フォント 罫線

Slide 25

Slide 25 text

『こんなViewはいやだ』の紹介

Slide 26

Slide 26 text

テキストがきれる

Slide 27

Slide 27 text

ダークモードにするとまっくら

Slide 28

Slide 28 text

画像が横にのびている

Slide 29

Slide 29 text

罫線が二本 謎の余白

Slide 30

Slide 30 text

なんかちがう

Slide 31

Slide 31 text

なんかちがう

Slide 32

Slide 32 text

スクリーンショットの他のメリット紹介

Slide 33

Slide 33 text

非エンジニアに画面共有しやすい

Slide 34

Slide 34 text

NYC DroidCon 2016 - Espresso: A Screenshot is Worth 1,000 Words - https://youtu.be/fhx_Ji5s3p4 Espresso失敗時の問題特定

Slide 35

Slide 35 text

アニメーションを含む画面 アクションのテスト サウンドのテスト 現在の手法でできないこと

Slide 36

Slide 36 text

アニメーションを含む画面 　→ 動画撮影 or アニメーションをOFF アクションのテスト 　→ Espresso サウンドのテスト 　→ 動画撮影 現在の手法でできないこと

Slide 37

Slide 37 text

第三章 ビジュアルリグレッションテストって どうやるの？

Slide 38

Slide 38 text

サンプルアプリ https://github.com/keidroid/VisualRegressionTestingSample ・Android Studio 3.5 ・Kotlin 1.3 ・AndroidXライブラリ ・デバイス: 3.7inch WVGA(480x800) API26

Slide 39

Slide 39 text

ビジュアルリグレッションテストに必要なこと 1. スクリーンショット取得 2. 差分画像取得 3. レポート化

Slide 40

Slide 40 text

ビジュアルリグレッションテストに必要なこと 1. スクリーンショット取得 2. 差分画像取得 3. レポート化

Slide 41

Slide 41 text

1. スクリーンショット取得 1.1 環境準備 1.2 Activity or Fragment を起動 1.3 外部ストレージ許可 1.4 スクリーンショット出力 1.5 画像ファイルの取得

Slide 42

Slide 42 text

1.1 環境準備 (1/2) 環境の統一 ・実機 / クラウドデバイス(Firebase Test Lab) 　・機種 / OS / 端末状態 / 言語 　・アニメーション: OFF

Slide 43

Slide 43 text

1.1 環境準備 (1/2) https://cloud.google.com/sdk/gcloud?hl=ja

Slide 44

Slide 44 text

1.1 環境準備 (1/2) - Firebase向け環境準備 環境確認 実行

Slide 45

Slide 45 text

1.1 環境準備 (1/2) - アニメーションOFF

Slide 46

Slide 46 text

1.1 環境準備 (2/2) 再現可能な状態でテストする ・モック機能のある通信ライブラリをつかう 　　・Retrofit / OkHttp ・処理のモック化 (日付 / 乱数 etc) 　　・Dagger, Koin / Mockito, MockK

Slide 47

Slide 47 text

1.2 Activity or Fragment を起動 Activity ・おすすめはActivityScenarioRule 　・AndroidXとjvmtarget:1.8が必要 　・ActivityTestRuleの方が有用なケースもある Fragment ・おすすめはFragmentScenario

Slide 48

Slide 48 text

AndroidX Releases | Test https://developer.android.com/jetpack/androidx/releases/test

Slide 49

Slide 49 text

Test your app's fragments https://developer.android.com/training/basics/fragments/testing

Slide 50

Slide 50 text

1.2 Activity or Fragment を起動

Slide 51

Slide 51 text

1.2 Activity or Fragment を起動 スクリーンショット処理

Slide 52

Slide 52 text

1.3 外部ストレージ許可

Slide 53

Slide 53 text

1.3 外部ストレージ許可 外部ストレージ許可 で必要

Slide 54

Slide 54 text

targetSdkVersion:29の外部ストレージ制限 https://developer.android.com/training/data-storage/files/external-scoped?hl=ja

Slide 55

Slide 55 text

1.4 スクリーンショット取得 スクリーンショットライブラリ紹介 Spoon / Falcon Facebook Screenshot For Android Firebase Snapshotter AndroidX Test Runner

Slide 56

Slide 56 text

1.Spoon https://github.com/square/spoon

Slide 57

Slide 57 text

1.Spoon https://github.com/square/spoon ・square社が公開 (1.0.0 2013年) ・Instrumentation Test 配布ツール ・CLI, mavenで提供, 3rd製でgradle版あり ・Activityのスクリーンショット撮影のみ ・Dialog, MenuItemが表示不可

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

1.Spoon https://github.com/square/spoon

Slide 60

Slide 60 text

2. Falcon https://github.com/jraska/Falcon

Slide 61

Slide 61 text

2. Falcon https://github.com/jraska/Falcon ・Josef Raskaさんが公開 (2015年~) ・Bitmap取得方式だがDialogが表示される ・Spoon連携あり ・出力先は /sdcard/screenshots がおすすめ

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

3. Facebook Screenshot Tests For Android https://facebook.github.io/screenshot-tests-for-android/

Slide 64

Slide 64 text

3. Facebook Screenshot Tests For Android https://facebook.github.io/screenshot-tests-for-android/ ・MacOS, Linuxのみ。Windows未対応。 ・TestRunnerの修正が必要 ・Python2が必要 ・差分検出・レポート機能あり (後ほど説明)

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

4. Firebase Snapshotter https://firebase.google.com/docs/test-lab/android/test-screenshots

Slide 71

Slide 71 text

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 


Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

No content

Slide 75

Slide 75 text

5. AndroidX Test Runner https://developer.android.com/reference/androidx/test/runner/screenshot/Screenshot

Slide 76

Slide 76 text

5. AndroidX Test Runner https://developer.android.com/reference/androidx/test/runner/screenshot/Screenshot ・Beta版 ・出力パスがパブリックディレクトリ ・Processorのカスタムは容易

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

1. スクリーンショット取得 1.1 環境準備 1.2 Activity or Fragment を起動 1.3 外部ストレージ許可 1.4 スクリーンショット出力 1.5 画像ファイルの取得

Slide 79

Slide 79 text

1.5 画像ファイルの取得 … https://cloud.google.com/storage/docs/gsutil/commands/cp?hl=ja

Slide 80

Slide 80 text

1.5 画像ファイルの取得 - パスの確認方法(1)

Slide 81

Slide 81 text

1.5 画像ファイルの取得 - パスの確認方法(1)

Slide 82

Slide 82 text

1.5 画像ファイルの取得 - パスの確認方法(2)

Slide 83

Slide 83 text

ビジュアルリグレッションテストに必要なこと 1. スクリーンショット取得 1.1 環境準備 1.2 Activity or Fragment を起動 1.3 外部ストレージ許可 1.4 スクリーンショット出力 1.5 画像ファイルの取得 2. 差分画像取得 3. レポート化

Slide 84

Slide 84 text

ビジュアルリグレッションテストに必要なこと 1. スクリーンショット取得 1.1 環境準備 1.2 Activity or Fragment を起動 1.3 外部ストレージ許可 1.4 スクリーンショット出力 1.5 画像ファイルの取得 2. 差分画像取得 3. レポート化

Slide 85

Slide 85 text

2 差分画像取得 差分画像取得ライブラリ紹介 Facebook Screenshot For Android reg-suit

Slide 86

Slide 86 text

2.1 Facebook Screenshot Tests For Android https://facebook.github.io/screenshot-tests-for-android/

Slide 87

Slide 87 text

2.1 Facebook Screenshot Tests For Android https://facebook.github.io/screenshot-tests-for-android/ ・ から差分画像の出力に対応 ・ のFBSnapshotTestCaseと同等の使い方 　・recordMode / verifyMode つかいかた コード修正 ビルド

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

No content

Slide 91

Slide 91 text

2.2 外部ライブラリ／サービスと組み合わせる BackdropJS reg-suit blink-diff PhantomCSS Screenster Wraith Screener HAPPO Loki ImageMagick

Slide 92

Slide 92 text

Androidでも使えてセットアップがかんたんで差分 画像がわかりやすくてローカルで実行できるけど CI連携もできてできればレポート出力とかSlack通 知とかできるライブラリが良い..

Slide 93

Slide 93 text

2.2 reg-suit https://reg-viz.github.io/reg-suit/

Slide 94

Slide 94 text

2.2 reg-suit https://reg-viz.github.io/reg-suit/

Slide 95

Slide 95 text

2.2 reg-suit https://reg-viz.github.io/reg-suit/ スクショ出力フォルダと合わせると楽

Slide 96

Slide 96 text

2.2 reg-suit タスクを追加 Windowsの場合は以下に変更 https://reg-viz.github.io/reg-suit/

Slide 97

Slide 97 text

No content

Slide 98

Slide 98 text

No content

Slide 99

Slide 99 text

No content

Slide 100

Slide 100 text

No content

Slide 101

Slide 101 text

No content

Slide 102

Slide 102 text

まとめ(1) What ・Viewのデグレを防ぐテスト ・スクリーンショットの前後を比較 Why ・UIテストの効率化 ・Viewのテスト範囲を広げる ・他スクリーンショットのメリット (共有・Espresso)

Slide 103

Slide 103 text

まとめ(2) デバイスの統一 アニメーションOFF 外部ストレージ許可 Activity/Fragment起動 DI Mock 環境設定 スクショ取得 差分検出 Dagger reg-suit Spoon Firebase Snapshotter Falcon AndroidX Test Runner Koin Mockito MockK Facebook Screenshot For Android

Slide 104

Slide 104 text

ご清聴ありがとうございました