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.8k
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
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
290
読もう! Android build ドキュメント
andpad
1
400
アンドパッドにおける CocoaPods ライブラリ群の SwiftPackageManager への移行戦略
andpad
0
180
Flutter は DCM が 9 割
andpad
1
280
Amplify で SPA をホスティングする際の注意点
andpad
1
240
マルチプロダクト開発の現場でAWS Security Hubを1年以上運用して得た教訓
andpad
0
110
rails stats で紐解く ANDPAD のイマを支える技術たち
andpad
1
540
本編では話さない Zig の話
andpad
2
360
"noncopyable types" の使いどころについて考えてみた
andpad
0
510
Other Decks in Programming
See All in Programming
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
3.8k
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
460
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
670
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
160
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
180
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
620
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
610
Benchmark
sysong
0
280
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
170
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Bash Introduction
62gerente
614
210k
A designer walks into a library…
pauljervisheath
207
24k
For a Future-Friendly Web
brad_frost
179
9.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Thoughts on Productivity
jonyablonski
69
4.7k
Building an army of robots
kneath
306
45k
Producing Creativity
orderedlist
PRO
346
40k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
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 をしている/しようとしている誰かの知見に なればなぁ
ご清聴ありがとうございました!