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

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

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

Shibuya.apk #45 の発表資料です

Kurumi Morimoto

November 10, 2023
Tweet

More Decks by Kurumi Morimoto

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. 撮影 / Roborazzi
    17

    View full-size slide

  18. Showkase + Roborazzi
    18

    View full-size slide

  19. Showkase + Roborazzi
    19

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. 複数デバイスでの撮影
    40

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  48. 現状の課題
    03
    48

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  53. 54
    🤯🤯🤯

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  59. ありがとうございました

    View full-size slide