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
VRTやってますか?reg-suitですか?
Search
ANDPAD inc
March 05, 2021
Programming
1
2.9k
VRTやってますか?reg-suitですか?
2021/03/05 ANDPAD TechLive #4 ANDPAD FrontEnd NOW!!
ANDPAD inc
March 05, 2021
Tweet
Share
More Decks by ANDPAD inc
See All by ANDPAD inc
OSS開発者という働き方
andpad
5
1.7k
Vue・React マルチプロダクト開発を支える Vite
andpad
0
130
プロダクト開発を支えるデータ利活用:中央集権から「民主化」までの軌跡
andpad
0
170
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
390
読もう! Android build ドキュメント
andpad
1
440
アンドパッドにおける CocoaPods ライブラリ群の SwiftPackageManager への移行戦略
andpad
0
220
Flutter は DCM が 9 割
andpad
1
360
Amplify で SPA をホスティングする際の注意点
andpad
1
320
マルチプロダクト開発の現場でAWS Security Hubを1年以上運用して得た教訓
andpad
0
150
Other Decks in Programming
See All in Programming
AIエージェント時代における TypeScriptスキーマ駆動開発の新たな役割
bicstone
4
1.2k
AIを活用したレシート読み取り機能の開発から得られた実践知 / AI Receipt Scan Practice
rockname
2
1.5k
Build your own WebP codec in Swift
kishikawakatsumi
2
860
Breaking Up with Big ViewModels — Without Breaking Your Architecture (droidcon Berlin 2025)
steliosf
PRO
1
280
フロントエンド開発に役立つクライアントプログラム共通のノウハウ / Universal client-side programming best practices for frontend development
nrslib
7
3.8k
ИИ-Агенты в каждый дом – Алексей Порядин, PythoNN
sobolevn
0
140
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
ukitaka
0
330
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
110
議事録の要点整理を自動化! サーバレス Bot 構築術
penpeen
3
1.6k
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
220
Advance Your Career with Open Source
ivargrimstad
0
240
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
450
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Writing Fast Ruby
sferik
629
62k
How to Think Like a Performance Engineer
csswizardry
27
2k
Six Lessons from altMBA
skipperchong
28
4k
4 Signs Your Business is Dying
shpigford
185
22k
RailsConf 2023
tenderlove
30
1.2k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Transcript
VRTやってますか? reg-suitですか? ANDPAD TechLive #4 Yuki Ichikawa
自己紹介 市川夕貴(いっちー) @ebizo-0202 施工管理Nuxt化 & 新機能開発 好きな声優:水樹奈々さん
VRTやってますか?
VRTとは - Visual Regression Test - 画像回帰テスト - 現在の正しいコンポーネントやページのスクリーンショットと開発中の スクリーンショットを比較して差分を検知するテスト
- ANDPAD 施工 Nuxt 化チームでは Storybook + Strorycap + reg-suit + S3 + CircleCI で実現している
None
None
None
None
None
None
None
None
None
None
None
None
VRTを運用していて感じること - コンポーネントの変更によって生じる差分が意図的なものかど うかが、ひと目で判断できるので安心感がある - story を書かないと VRT が出来ないので Storybook
のメンテ ナンスのモチベーションになる
今日お話するのは運用する中でのひとコマ
ある日、reg-suit が おかしな差分を検知するようになったんです
様子がおかしくなったのは dependabot で とある Pull Request が作られたとき
None
None
None
パッケージアップデートの Pull Request で 差分が出ることは「まれによくある」
実際に差分を見てみましょう
None
詳細を見てみましょう
None
None
None
None
もう1つ詳細を見てみましょう
None
None
None
None
None
なるほど、わからん
Release notes を見てみよう
None
None
config.matchingThreshold が未定義の場合に 差異を抑制するバグを修正しました
None
なるほど
regconfig.json を見てみよう
None
matchingThreshold 無いねぇ
つまり、今まで抑制されていた差分が Bug fix によって顕在化したってこと?
とりあえず merge してみて様子を見よう
None
None
eslint のプラグインのアップデートで コンポーネントの差分でるのは流石におかしいねぇ
他の Pull Request でも意図していない差分が 検知されてノイズになっちゃってるねぇ
None
直そう
とりあえず reg-suit の設定を見直そう
もう一度 regconfig.json を見てみよう
None
reg-suit の README を見てみよう
None
thresholdRate
全体に対する差異が発生したピクセル数の比率のしきい値。 0か ら1の範囲である必要があります。
これがあやしい
今まで thresholdRate: 0 というとても厳しい「しきい値」で差分の検知を していたけど、バグで差分が出てこなかったのでは
None
None
意図していない差分が出なくなった!
🎉
運用する中でのひとコマをお届けしましたが
VRT はいいぞ - コンポーネントの変更によって生じる差分が意図的なものかど うかが、ひと目で判断できるので安心感がある - story を書かないと VRT が出来ないので
Storybook のメンテ ナンスのモチベーションになる - thresholdRate は適切な値を設定しよう - 今回の小話が VRT をしている/しようとしている誰かの知見に なればなぁ
ご清聴ありがとうございました!