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.2k
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
MySQL の SQL クエリチューニングの要所を掴む勉強会
andpad
3
6.4k
Long journey of Ruby standard library
andpad
0
19
Go 1.22 の Vet 変更点について
andpad
0
280
アンドパッドのある開発チームでの OSS への取り組み
andpad
2
4.4k
最初のファンを作り、最初のファンに価値を届けるまで
andpad
1
740
Deep dive into Ruby's require
andpad
0
86
AWS Security Hub を 「有効化したけど見てない」人に向けた DevSecOps の実現方法
andpad
0
79
EC2 からの脱出劇:多用途なサーバの全役割をサーバレス・コンテナ環境へ
andpad
0
27
Ruby on Rails + Sidekiq構成のモノリシックサービスをコンテナ化した話
andpad
0
250
Other Decks in Programming
See All in Programming
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
380
What We Can Learn From OSS
inouehi
0
420
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
270
Ruby GitHub Packages
bkuhlmann
0
630
Git Rebase
bkuhlmann
11
1.6k
Ruby Pattern Matching
bkuhlmann
0
930
Milestoner
bkuhlmann
1
410
大規模UIKitベースアプリへのTCAの段階的導入/gradual-adoption-of-tca-in-a-large-scale-uikit-based-app
takehilo
1
180
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
950
1BRC--Nerd Sniping the Java Community
gunnarmorling
0
340
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
430
Snowflakeで眠ったデータを起こそう!
estie
0
120
Featured
See All Featured
Design by the Numbers
sachag
274
18k
The Pragmatic Product Professional
lauravandoore
25
5.8k
Building an army of robots
kneath
300
41k
The Mythical Team-Month
searls
216
42k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
78
43k
Building Better People: How to give real-time feedback that sticks.
wjessup
355
18k
Debugging Ruby Performance
tmm1
70
11k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
Code Reviewing Like a Champion
maltzj
514
39k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
Infographics Made Easy
chrislema
238
18k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
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 をしている/しようとしている誰かの知見に なればなぁ
ご清聴ありがとうございました!