Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
複数端末で Visual Regression Test を 実行する上での工夫と課題
Search
Kurumi Morimoto
November 10, 2023
Programming
2
3.4k
複数端末で Visual Regression Test を 実行する上での工夫と課題
Shibuya.apk #45 の発表資料です
Kurumi Morimoto
November 10, 2023
Tweet
Share
More Decks by Kurumi Morimoto
See All by Kurumi Morimoto
GraphQLの魅力を引き出すAndroidクライアント実装
morux2
3
3.1k
Istio integrated Telepresence
morux2
9
7.6k
Other Decks in Programming
See All in Programming
보일러플레이트 코드가 진짜 나쁜 건가요?
gaeun5744
0
370
アプリを起動せずにアプリを開発して品質と生産性を上げる
ishkawa
0
360
GDG Super.init(version=6) - From Where to Wear : 모바일 개발자가 워치에서 발견한 인사이트
haeti2
0
560
RailsでCQRS/ESをやってみたきづき
suzukimar
2
1.5k
生産性アップのためのAI個人活用
kunoyasu
0
650
安全に倒し切るリリースをするために:15年来レガシーシステムのフルリプレイス挑戦記
sakuraikotone
5
2.3k
Django for Data Science (Boston Python Meetup, March 2025)
wsvincent
0
240
Windows版PHPのビルド手順とPHP 8.4における変更点
matsuo_atsushi
0
370
家族・子育て重視/沖縄在住を維持しながらエンジニアとしてのキャリアをどのように育てていくか?
ug
0
240
私の愛したLaravel 〜レールを超えたその先へ〜
kentaroutakeda
12
3.6k
ステートソーシング型イベント駆動の視点で捉えるCQRS+ES
shinnosuke0522
1
320
なぜselectはselectではないのか
taiyow
2
310
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
35
3.2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
29
2k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
320
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Facilitating Awesome Meetings
lara
53
6.3k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
7
620
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Transcript
複数端末で Visual Regression Test を 実行する上での工夫と課題 2023-11-10 @morux2 Shibuya.apk #45
• 森本くるみ / @morux2 • Android Engineer • 株式会社リクルート 自己紹介
_morux2 morux2 2
スタディサプリ小学講座・中学講座 • 小学1年生および中学生向け (2023.11.10時点) • 月額制のオンライン学習サービス https://play.google.com/store/apps/details?id=jp.studysapuri.tara 3
スタディサプリ小学講座・中学講座 2023.11.10時点 4
Visual Regression Test (VRT) とは • 画像比較によるUIの回帰テスト • 変更前後のコードそれぞれに対する画面のスクリーンショットを比較し、意図 しない差分を検知することが可能
5
スタディサプリ小学講座・中学講座のVRT 6
スタディサプリ小学講座・中学講座のVRT 7
今日話すこと 複数端末で Visual Regression Test を 実行する上での工夫と課題 8
TL;DR • Showkase + Roborazzi + reg-suit を採用 • Previewアノテーションを独自に定義し複数デバイスでの撮影を実現
• Showkaseの内部実装に依存した運用になっており課題も残る 9
Agenda | 01 02 03 スタディサプリ小学講座・中学講座のVRTの構成 複数端末でVRTを実行する上での工夫 現状の課題 10
スタディサプリ小学講座・中学講座の VRTの構成 01 11
VRTの3ステップ • 画面の用意 • 撮影 • 比較 12
VRTの3ステップ • 画面の用意 ◦ Showkase • 撮影 ◦ Roborazzi •
比較 ◦ reg-suit 13
画面の用意 / Showkase • アノテーションプロセッサをベースにしたライブラリ • @PreviewのついたComposableをリスト形式で一括で取得できる https://github.com/airbnb/Showkase 14
画面の用意 / Showkase 自動生成 15
撮影 / Roborazzi • 実機不要でJVM上で撮影すること可能 (UnitTestで書ける) • Robolectricのグラフィック機能(RNG)がベースとなっている • nowinandroidでも採用
https://github.com/takahirom/roborazzi https://github.com/android/nowinandroid/pull/876 16
撮影 / Roborazzi 17
Showkase + Roborazzi 18
Showkase + Roborazzi 19
比較 / reg-suit • 画像の差分をHTMLレポートとして出力 • 外部のクラウドストレージへ撮影した画像をよしなに保管してくれる • Slackの通知やPRのコメントも設定可能 https://github.com/reg-viz/reg-suit
設定方法は割愛しますので、詳しくは以下をご確認ください 20
プロダクトでのVRT実行の流れ ラベルを付与するとGHAが実行される (roborazziとreg-suitが走る) 21
プロダクトでのVRT実行の流れ 22
プロダクトでのVRT実行の流れ 23
[まとめ] スタディサプリ小学講座・中学講座のVRTの構成 • 画面の用意 (Showkase) ◦ @PreviewのついたComposableをリスト形式で一括で取得 • 撮影 (Roborazzi)
◦ ComposableのリストをParameterizedテストに渡して captureRoboImage() メソッドで撮影 • 比較 (reg-suit) ◦ 変更前後の画像をクラウドストレージで保管し、差分をPRにコメント ・Slackに通知 01 24
余談 Roborazziを導入した理由は? 25
余談 / Roborazzi導入の経緯 https://blog.studysapuri.jp/entry/2023/10/05/introduce-roborazzi 26
余談 / Roborazzi導入の経緯 • JVM上で撮影できるライブラリとしてPaparazziとRoborazziを検討 • スクロールした画面ができるRoborazziを採用 • RoborazziのREADMEでも、UI操作ができる点が優位性の1つに挙げられて いる
https://github.com/takahirom/roborazzi#paparazzi-and-roborazzi-a-comparison 27
複数端末でVRTを実行する上での工夫 02 28
実現したいこと 複数のデバイスでVRTを実行したい! 29
悩ましいこと • 撮影するPreviewは絞らず、なるべく多くの状態を網羅したい ◦ チェックボックスのon/off, ボタンのenable/disable … • 全てのPreviewを複数端末で撮影するとキリがない ◦
我々のプロダクトでは約300ほどのPreviewが存在する ◦ 撮影する端末を増やすたびに出力画像が2, 3倍...と増えていく 30
複数デバイスでの撮影方針 • UIコンポーネントは状態を網羅し単一のデバイスで撮影 • スクリーンは複数端末で撮影 31
UIコンポーネントは単一のデバイスで撮影 32
スクリーンは複数端末で撮影 33
UIごとに撮影する端末を切り替えるための工夫 Previewアノテーションを独自に定義する 34
定義したPreviewアノテーション 35
アノテーションの使用例 (UIコンポーネント) どの端末でも共通のコンポーネントは プレビューと撮影は単一デバイスで実施 36
アノテーションの使用例 (UIコンポーネント) 端末サイズごとにデザインが変わるコンポーネントは プレビューと撮影を複数デバイスで実施 37
アノテーションの使用例 (スクリーン) マルチプレビューアノテーションを使って プレビューと撮影を複数デバイスで実施 38
アノテーションのgroup名で撮影するデバイスを決定 39
複数デバイスでの撮影 40
単一のデバイスでの撮影 41
余談 / プロダクト特有の事情 • タブレット専用 (小学講座) / スマホ・タブレット両者対応 (中学講座) •
UIによって撮影したいデバイスが異なっている 2023.11.10時点 42
余談 / 実際のプロダクトでのアノテーションの運用 小学講座にはElementaryをgroup名に含める 43
余談 / 実際のプロダクトでのアノテーションの運用 中学講座にはJuniorHighをgroup名に含める 44
余談 / 実際のプロダクトでのアノテーションの運用 45
余談 / 実際のプロダクトでのアノテーションの運用 46
[まとめ] 複数端末でVRTを実行する上での工夫 • UIコンポーネントは単一のデバイス・スクリーンは複数端末で撮影 • 撮影する端末を切り替えるためにPreviewアノテーションを独自定義 • Previewのgroup名から撮影する端末を振り分ける 02 47
現状の課題 03 48
課題① マルチPreviewアノテーション 49 @Previewを連ねた数だけComponentが出力される
課題① マルチPreviewアノテーション 50 @Previewを連ねた数だけ 同じ画面が撮影されてしまう
課題② Preview Parameter 51 List形式でComponentが出力される
課題② Preview Parameter 52 componentのgroupとnameは同一なので ファイル名が重複して上書きされてしまう
53 合体!
54 🤯🤯🤯
回避策① マルチPreviewアノテーション 55 Parameterizedテストに渡す前に重複を排除
② Preview Parameter 56 使用禁止にしています...
[まとめ] 現状の課題 03 57 • Showkaseが出力するComponentListを加工するのに一手間かかる • Showkaseの内部実装に依存した運用ルールを定めてしまっている ◦ Preview
Parameterの使用を禁止している
総括 58
総括 • Showkase + Roborazzi + reg-suit を採用 • Previewアノテーションを独自に定義し複数デバイスでの撮影を実現
• Showkaseの内部実装に依存した運用になっており課題も残る 59
サンプルコードはこちら 60 https://github.com/morux2/RoborazziWithShowkaseSample
ありがとうございました