複数端末で Visual Regression Test を実行する上での工夫と課題

by Kurumi Morimoto

Slide 1

Slide 1 text

複数端末で Visual Regression Test を実行する上での工夫と課題 2023-11-10 @morux2 Shibuya.apk #45

Slide 2

Slide 2 text

● 森本くるみ / @morux2 ● Android Engineer ● 株式会社リクルート自己紹介 _morux2 morux2 2

Slide 3

Slide 3 text

スタディサプリ小学講座・中学講座 ● 小学1年生および中学生向け (2023.11.10時点) ● 月額制のオンライン学習サービス https://play.google.com/store/apps/details?id=jp.studysapuri.tara 3

Slide 4

Slide 4 text

スタディサプリ小学講座・中学講座 2023.11.10時点 4

Slide 5

Slide 5 text

Visual Regression Test (VRT) とは ● 画像比較によるUIの回帰テスト ● 変更前後のコードそれぞれに対する画面のスクリーンショットを比較し、意図しない差分を検知することが可能 5

Slide 6

Slide 6 text

スタディサプリ小学講座・中学講座のVRT 6

Slide 7

Slide 7 text

スタディサプリ小学講座・中学講座のVRT 7

Slide 8

Slide 8 text

今日話すこと複数端末で Visual Regression Test を実行する上での工夫と課題 8

Slide 9

Slide 9 text

TL;DR ● Showkase + Roborazzi + reg-suit を採用 ● Previewアノテーションを独自に定義し複数デバイスでの撮影を実現 ● Showkaseの内部実装に依存した運用になっており課題も残る 9

Slide 10

Slide 10 text

Agenda | 01 02 03 スタディサプリ小学講座・中学講座のVRTの構成複数端末でVRTを実行する上での工夫現状の課題 10

Slide 11

Slide 11 text

スタディサプリ小学講座・中学講座の VRTの構成 01 11

Slide 12

Slide 12 text

VRTの3ステップ ● 画面の用意 ● 撮影 ● 比較 12

Slide 13

Slide 13 text

VRTの3ステップ ● 画面の用意 ○ Showkase ● 撮影 ○ Roborazzi ● 比較 ○ reg-suit 13

Slide 14

Slide 14 text

画面の用意 / Showkase ● アノテーションプロセッサをベースにしたライブラリ ● @PreviewのついたComposableをリスト形式で一括で取得できる https://github.com/airbnb/Showkase 14

Slide 15

Slide 15 text

画面の用意 / Showkase 自動生成 15

Slide 16

Slide 16 text

撮影 / Roborazzi ● 実機不要でJVM上で撮影すること可能 (UnitTestで書ける) ● Robolectricのグラフィック機能(RNG)がベースとなっている ● nowinandroidでも採用 https://github.com/takahirom/roborazzi https://github.com/android/nowinandroid/pull/876 16

Slide 17

Slide 17 text

撮影 / Roborazzi 17

Slide 18

Slide 18 text

Showkase + Roborazzi 18

Slide 19

Slide 19 text

Showkase + Roborazzi 19

Slide 20

Slide 20 text

比較 / reg-suit ● 画像の差分をHTMLレポートとして出力 ● 外部のクラウドストレージへ撮影した画像をよしなに保管してくれる ● Slackの通知やPRのコメントも設定可能 https://github.com/reg-viz/reg-suit 設定方法は割愛しますので、詳しくは以下をご確認ください 20

Slide 21

Slide 21 text

プロダクトでのVRT実行の流れラベルを付与するとGHAが実行される (roborazziとreg-suitが走る) 21

Slide 22

Slide 22 text

プロダクトでのVRT実行の流れ 22

Slide 23

Slide 23 text

プロダクトでのVRT実行の流れ 23

Slide 24

Slide 24 text

[まとめ] スタディサプリ小学講座・中学講座のVRTの構成 ● 画面の用意 (Showkase) ○ @PreviewのついたComposableをリスト形式で一括で取得 ● 撮影 (Roborazzi) ○ ComposableのリストをParameterizedテストに渡して captureRoboImage() メソッドで撮影 ● 比較 (reg-suit) ○ 変更前後の画像をクラウドストレージで保管し、差分をPRにコメント・Slackに通知 01 24

Slide 25

Slide 25 text

余談 Roborazziを導入した理由は？ 25

Slide 26

Slide 26 text

余談 / Roborazzi導入の経緯 https://blog.studysapuri.jp/entry/2023/10/05/introduce-roborazzi 26

Slide 27

Slide 27 text

余談 / Roborazzi導入の経緯 ● JVM上で撮影できるライブラリとしてPaparazziとRoborazziを検討 ● スクロールした画面ができるRoborazziを採用 ● RoborazziのREADMEでも、UI操作ができる点が優位性の1つに挙げられている https://github.com/takahirom/roborazzi#paparazzi-and-roborazzi-a-comparison 27

Slide 28

Slide 28 text

複数端末でVRTを実行する上での工夫 02 28

Slide 29

Slide 29 text

実現したいこと複数のデバイスでVRTを実行したい！ 29

Slide 30

Slide 30 text

悩ましいこと ● 撮影するPreviewは絞らず、なるべく多くの状態を網羅したい ○ チェックボックスのon/oﬀ, ボタンのenable/disable … ● 全てのPreviewを複数端末で撮影するとキリがない ○ 我々のプロダクトでは約300ほどのPreviewが存在する ○ 撮影する端末を増やすたびに出力画像が2, 3倍...と増えていく 30

Slide 31

Slide 31 text

複数デバイスでの撮影方針 ● UIコンポーネントは状態を網羅し単一のデバイスで撮影 ● スクリーンは複数端末で撮影 31

Slide 32

Slide 32 text

UIコンポーネントは単一のデバイスで撮影 32

Slide 33

Slide 33 text

スクリーンは複数端末で撮影 33

Slide 34

Slide 34 text

UIごとに撮影する端末を切り替えるための工夫 Previewアノテーションを独自に定義する 34

Slide 35

Slide 35 text

定義したPreviewアノテーション 35

Slide 36

Slide 36 text

アノテーションの使用例 (UIコンポーネント) どの端末でも共通のコンポーネントはプレビューと撮影は単一デバイスで実施 36

Slide 37

Slide 37 text

アノテーションの使用例 (UIコンポーネント) 端末サイズごとにデザインが変わるコンポーネントはプレビューと撮影を複数デバイスで実施 37

Slide 38

Slide 38 text

アノテーションの使用例 (スクリーン) マルチプレビューアノテーションを使ってプレビューと撮影を複数デバイスで実施 38

Slide 39

Slide 39 text

アノテーションのgroup名で撮影するデバイスを決定 39

Slide 40

Slide 40 text

複数デバイスでの撮影 40

Slide 41

Slide 41 text

単一のデバイスでの撮影 41

Slide 42

Slide 42 text

余談 / プロダクト特有の事情 ● タブレット専用 (小学講座) / スマホ・タブレット両者対応 (中学講座) ● UIによって撮影したいデバイスが異なっている 2023.11.10時点 42

Slide 43

Slide 43 text

余談 / 実際のプロダクトでのアノテーションの運用小学講座にはElementaryをgroup名に含める 43

Slide 44

Slide 44 text

余談 / 実際のプロダクトでのアノテーションの運用中学講座にはJuniorHighをgroup名に含める 44

Slide 45

Slide 45 text

余談 / 実際のプロダクトでのアノテーションの運用 45

Slide 46

Slide 46 text

余談 / 実際のプロダクトでのアノテーションの運用 46

Slide 47

Slide 47 text

[まとめ] 複数端末でVRTを実行する上での工夫 ● UIコンポーネントは単一のデバイス・スクリーンは複数端末で撮影 ● 撮影する端末を切り替えるためにPreviewアノテーションを独自定義 ● Previewのgroup名から撮影する端末を振り分ける 02 47

Slide 48

Slide 48 text

現状の課題 03 48

Slide 49

Slide 49 text

課題① マルチPreviewアノテーション 49 @Previewを連ねた数だけComponentが出力される

Slide 50

Slide 50 text

課題① マルチPreviewアノテーション 50 @Previewを連ねた数だけ同じ画面が撮影されてしまう

Slide 51

Slide 51 text

課題② Preview Parameter 51 List形式でComponentが出力される

Slide 52

Slide 52 text

課題② Preview Parameter 52 componentのgroupとnameは同一なのでファイル名が重複して上書きされてしまう

Slide 53

Slide 53 text

53 合体！

Slide 54

Slide 54 text

54 🤯🤯🤯

Slide 55

Slide 55 text

回避策① マルチPreviewアノテーション 55 Parameterizedテストに渡す前に重複を排除

Slide 56

Slide 56 text

② Preview Parameter 56 使用禁止にしています...

Slide 57

Slide 57 text

[まとめ] 現状の課題 03 57 ● Showkaseが出力するComponentListを加工するのに一手間かかる ● Showkaseの内部実装に依存した運用ルールを定めてしまっている ○ Preview Parameterの使用を禁止している

Slide 58

Slide 58 text

総括 58

Slide 59

Slide 59 text

総括 ● Showkase + Roborazzi + reg-suit を採用 ● Previewアノテーションを独自に定義し複数デバイスでの撮影を実現 ● Showkaseの内部実装に依存した運用になっており課題も残る 59

Slide 60

Slide 60 text

サンプルコードはこちら 60 https://github.com/morux2/RoborazziWithShowkaseSample

Slide 61

Slide 61 text

ありがとうございました