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
940
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
85
Other Decks in Programming
See All in Programming
qmuntal/stateless のススメ
sgash708
0
120
PagerDuty を軸にした On-Call 構築と運用課題の解決 / PagerDuty Japan Community Meetup 4
horimislime
1
110
RailsのPull requestsのレビューの時に私が考えていること
yahonda
5
1.6k
外部システム連携先が10を超えるシステムでのアーキテクチャ設計・実装事例
kiwasaki
1
200
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
270
Identifying User Idenity
moro
6
7.4k
シールドクラスをはじめよう / Getting Started with Sealed Classes
mackey0225
3
390
Webの技術スタックで マルチプラットフォームアプリ開発を可能にするElixirDesktopの紹介
thehaigo
2
880
C#/.NETのこれまでのふりかえり
tomokusaba
1
150
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
170
Kubernetes for Data Engineers: Building Scalable, Reliable Data Pipelines
sucitw
1
180
Amazon Neptuneで始めてみるグラフDB-OpenSearchによるグラフの全文検索-
satoshi256kbyte
4
310
Featured
See All Featured
What's new in Ruby 2.0
geeforr
342
31k
How STYLIGHT went responsive
nonsquared
95
5.1k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
BBQ
matthewcrist
85
9.3k
4 Signs Your Business is Dying
shpigford
180
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
For a Future-Friendly Web
brad_frost
175
9.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.6k
The World Runs on Bad Software
bkeepers
PRO
65
11k
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!