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
Jetpack Composeから始める、頑張らないVRT
Search
Yasuhiro Shimizu
August 18, 2022
Programming
0
970
Jetpack Composeから始める、頑張らないVRT
Yasuhiro Shimizu
August 18, 2022
Tweet
Share
More Decks by Yasuhiro Shimizu
See All by Yasuhiro Shimizu
Kotlin Multiplatform Projectを導入してみて
yshrsmz
1
1k
BIP39について
yshrsmz
0
130
Android Fireside Chatまとめ
yshrsmz
3
2.1k
RxJava1からRxJava2へ
yshrsmz
0
88
Other Decks in Programming
See All in Programming
「天気予報があなたに届けられるまで」 - NIFTY Tech Talk #22
niftycorp
PRO
0
110
Functional Event Sourcing using Sekiban
tomohisa
0
120
Flutterを言い訳にしない!アプリの使い心地改善テクニック5選🔥
kno3a87
3
310
Modular Monolith Monorepo ~シンプルさを保ちながらmonorepoのメリットを最大化する~
yuisakamoto
10
2.7k
.NET Conf 2024の振り返り
tomokusaba
0
110
大規模サイトリビルドの現場から:成功と失敗のリアルな教訓 / Site Rebuild,Real Lessons Learned from Successes and Failures_JJUG Fall 2024
techtekt
0
140
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
140
Figma Dev Modeで変わる!Flutterの開発体験
watanave
0
240
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
1.3k
TypeScript Graph でコードレビューの心理的障壁を乗り越える
ysk8hori
3
1.3k
.NET のための通信フレームワーク MagicOnion 入門 / Introduction to MagicOnion
mayuki
1
2.3k
聞き手から登壇者へ: RubyKaigi2024 LTでの初挑戦が 教えてくれた、可能性の星
mikik0
1
140
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.3k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
Side Projects
sachag
452
42k
What's in a price? How to price your products and services
michaelherold
243
12k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
[RailsConf 2023] Rails as a piece of cake
palkan
52
4.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
Site-Speed That Sticks
csswizardry
0
52
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
47
2.1k
Transcript
Jetpack Composeから始 める、頑張らないVRT
自己紹介 清水泰博 Androidアプリ書いたりWebフロントエンド書いたり --- Twitter: @_yshrsmz GitHub: @yshrsmz その他: AndroidDagashiの運営とか
VRT?
VRTとは - Visual Regression Testing - 画像回帰テスト - 視覚的にリグレッションテストを行うこと -
変更前後のスクリーンショットを比較して、差分を検出する - ユニットテストでは担保しづらい、見た目をテストできる
VRTのつらいところ
VRTのつらいところ - テストケースのメンテ - 単純に書くものが増える - 実機/エミュレータを使う必要がある - 時間がかかる -
テストの実行結果が不安定 - CIで動かすにしても/SaaS 使うにしても手間がかかる - 💰💰💰 でも…
Jetpack Compose なら楽して VRT できる!
今日の内容を3行で
- airbnb/showkase で、`@Preview` Composable 関数を収集 - cashapp/paparazzi で、実機/エミュレータ不要でスクリーンショット を取得 -
reg-viz/reg-suit で、リッチなVRTレポートを作る
各ツールの紹介
airbnb/showkase - Jetpack Compose の `@Preview` からUIカタログを作るライブラリ - kapt/ksp で
`@Preview` 付き Composable の一覧を作り - その一覧を表示する Activity を提供する
cashapp/paparazzi - 安心の square 製 - 実機/エミュレータ無しで Android View や
Composable 関数を描画し、スクリーン ショットを取得できる - これ単体でも VRT を提供している
paparazzi 単体での VRT expected, actual, diff を含む画像を生成する
- showkase x paparazzi だけでも VRT はできる - しかし paparazzi
の VRT は非常にプリミティブで、レポートもない - もっとリッチに、かつ PR 上から確認できるようにしたい → reg-suit を使おう
reg-viz/reg-suit - Node.js 製の画像回帰テストツール - 画像の差分検知と、リッチなレポートサイトを提供する - GitHub 連携で簡単なレポートを表示できる -
アップロード先は S3 と GCS をサポート
None
reg-suit の比較元検出方法 - トピックブランチがマージ先から分岐したコミットに紐づくレポート
手順
https://github.com/android/nowinandroid/pull/101 “Add automatic preview screenshot testing with Paparazzi and Showkase”
showkase x paparazzi の設定はこのPRで詳しく見れます
テスト対象のモジュールに showkase を追加
テスト用モジュールの作成
src/test/kotlin/…/ScreenshotShowkaseModule showkase のエントリポイント
src/test/kotlin/…/PreviewScreenshotTests 今回のテストパラメータ - showkase の収集した Composable - テスト対象の端末 - テストしたい
Font Scale
テストの基本設定
パラメータの準備(1)
パラメータの準備(2)
テスト本体
$ ./gradlew :preview-screenshots:recordPaparazzi スクリーンショットの取得 $ ./gradlew :preview-screenshots:verifyPaparazzi 画像回帰テスト
reg-suit の設定 - Node.js が必要 - プラグインは reg-keygen-git-hash-plugin, reg-notify-github-plugin, reg-publish-s3-plugin
を選択 - 画像ディレクトリは preview-screenshots/src/test/snapshots/images を指定 - paparazzi の output ディレクトリ
AWS S3 の設定 - reg-suit のウィザードの中で作成できる - Google Cloud Storage
でも可 - Webページを公開できるように設定する
CIの設定(GitHub Actions)-1
CIの設定(GitHub Actions)-2
CIの設定(GitHub Actions)-3
CI の設定 - pull request と main ブランチへの push タイミングで実行する
- main への push タイミングは比較元のレポートを作成するため - 比較元のコミットを判別するため、git は完全なクローンが必要 - デフォルトでは depth=1 でクローンしている - detached HEAD ではなく、ブランチをチェックアウトしていること - AWS S3 へのアクセスは OIDC の設定が必要 - CodeBuild の設定するよりは遥かに楽だった (個人的感想です)
まとめ - airbnb/showkase で、`@Preview` Composable 関数を収集 - cashapp/paparazzi で、実機/エミュレータ不要でスクリーンショットを取得 -
reg-viz/reg-suit で、リッチなVRTレポートを作る
Thanks!