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.5k
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
本編では話さない Zig の話
andpad
2
120
"noncopyable types" の使いどころについて考えてみた
andpad
0
190
ANDPAD黒板のオフラインモード機能 リリースまでの軌跡
andpad
0
88
アンドパッドのマルチプロダクト戦略を支える SRE
andpad
1
95
Introduction of Cybersecurity with OSS (RDRC2024)
andpad
1
27
開発チームとともに進めるインフラセキュリティの継続的な改善
andpad
2
58
ANDPAD and Ruby
andpad
1
510
Modular semantic actions
andpad
0
100
about #67401 //go:linkname
andpad
3
22k
Other Decks in Programming
See All in Programming
RDBの世界をぬりかえていくモデルグラフDB〜truncus graphによるモデルファースト開発〜
jurabi
0
180
Mercari AI/LLM Hackathon TeamBの発表資料
imaikosuke
0
180
watsonx.ai Dojo #3 プロンプトエンジニアリング入門
oniak3ibm
PRO
0
340
自分だけの世界を創るクリエイティブコーディング / Creative Coding: Creating Your Own World
chobishiba
2
2.1k
今日で分かる!カスタムコップの作り方
krpk1900
2
210
ACES Meet におけるリリース作業改善の取り組み
fukucheee
0
150
Folding Cheat Sheet #8
philipschwarz
PRO
0
120
NEWTにおけるiOS18対応の進め方
ryu1sazae
0
330
ML-прайсинг_на_Lamoda__вошли_и_вышли__приключение_на_20_минут__Слава_Цыганков.pdf
lamodatech
0
380
Vue :: Better Testing 2024
up1
1
420
Vue3の一歩踏み込んだパフォーマンスチューニング2024
hal_spidernight
3
1.3k
perl for shell, awk and sed programmers
mackee
2
970
Featured
See All Featured
A Philosophy of Restraint
colly
203
16k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
Building Applications with DynamoDB
mza
90
6k
The Cost Of JavaScript in 2023
addyosmani
43
5.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
23k
Designing the Hi-DPI Web
ddemaree
280
34k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
9
630
Producing Creativity
orderedlist
PRO
341
39k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Scaling GitHub
holman
458
140k
Gamification - CAS2011
davidbonilla
80
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 をしている/しようとしている誰かの知見に なればなぁ
ご清聴ありがとうございました!