Upgrade to Pro — share decks privately, control downloads, hide ads and more …

VRTやってますか？reg-suitですか？

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for ANDPAD inc ANDPAD inc
March 05, 2021
Programming
3.2k
1

 VRTやってますか？reg-suitですか？

2021/03/05 ANDPAD TechLive #4　ANDPAD FrontEnd NOW!!

Avatar for ANDPAD inc

ANDPAD inc

March 05, 2021

More Decks by ANDPAD inc

See All by ANDPAD inc
言語を使う側から、作る側へ。 自作 Lisp で得た新たな気づき。
Avatar for ANDPAD inc andpad
0
150
OS アップデート対応の取り組み方がもっと共有されてほしい
Avatar for ANDPAD inc andpad
0
120
Vue × Nuxt × Oxc どこまで使える？実運用の現在地
Avatar for ANDPAD inc andpad
0
430
ANDPAD Ruby sponsor session in RubyKaigi 2026
Avatar for ANDPAD inc andpad
0
240
AWS WAFの運用を地道に改善し、自社で運用可能にするプラクティス
Avatar for ANDPAD inc andpad
2
1.1k
アプリから 360 度カメラ「RICOH THETA」に接続して写真を撮影する
Avatar for ANDPAD inc andpad
0
74
アンドパッドが提供する Drinks and Local Meals と Drinkup を大公開
Avatar for ANDPAD inc andpad
0
140
建設DXを支えるANDPAD: 2025年のセキュリティの取り組みと卒業したいセキュリティ
Avatar for ANDPAD inc andpad
0
520
小規模 SRE チームで支える、 Atlantis で実現するインフラ管理のセルフサービス化
Avatar for ANDPAD inc andpad
1
140

Other Decks in Programming

See All in Programming
AWS CDK を「作」ってみた 〜フルスクラッチで見えた CDK の裏側〜 / aws-cdk-from-scratch
Avatar for k.goto gotok365
3
2.8k
使いながら育てる Claude Code — 開発フローの1コマンド化 × 繰り返し指摘の自動仕組み化
Avatar for endo shiki shiki_kakaku
0
1.6k
型も通る、synthも通る、それでも危ない 〜AIのCDKの権限とコストを機械で検証する〜 / It Passes Type Checks, It Passes Synth Checks, but It’s Still Risky — Automatically Verifying Permissions and Costs in AI’s CDK —
Avatar for shiro seike seike460
PRO
1
520
『コードを書く以外の』エンジニアリング〜課金基盤移行プロジェクト推進のためのTips4選
Avatar for yuriko yuriko1211
0
560
生成AI導入の「期待外れ」を乗り越える ー 開発フロー改革が目指す、真の組織変革
Avatar for starfish719 starfish719
0
3.6k
php-fpmのプロセスが枯渇した日-調査・対処・そして本当にやるべきだったこと-
Avatar for にわ shibuchaaaan
0
200
これって Effect でできたのでは? / TSKaigi Mashup Kansai #2
Avatar for Susisu susisu
0
140
Built Our Own Background Agent at LayerX #aidevex_findy
Avatar for LayerX layerx
PRO
9
4.6k
SREの積み重ねがAI駆動開発のガードレールになった ― 7つの実践/SRE Guardrails The 7
Avatar for TomoyaKitaura tomoyakitaura
9
6.1k
テーブルをDELETEした
Avatar for yuzneri yuzneri
0
130
琵琶湖の水は止められてもNet--HTTPのリトライは止められない / You might be able to stop the water flow of Lake Biwa but you can't stop Net::HTTP retries
Avatar for luccafort luccafort
PRO
0
540
Claude Code全社展開のためにやったことn選～プラグイン302個・コミッター271人を支えるために～
Avatar for Kenichi Takahashi kenchan
1
170

Featured

See All Featured
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
1
360
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
2
240
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
520
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.5k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.5k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.4k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2.1k
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
1
300

Transcript

  1. VRTやってますか？
 reg-suitですか？
 ANDPAD TechLive #4
 Yuki Ichikawa


  2. 自己紹介
 市川夕貴（いっちー）　
 
 @ebizo-0202
 
 施工管理Nuxt化 & 新機能開発
 
 好きな声優：水樹奈々さん


  3. VRTやってますか？


  4. VRTとは
 - Visual Regression Test
 - 画像回帰テスト
 - 現在の正しいコンポーネントやページのスクリーンショットと開発中の スクリーンショットを比較して差分を検知するテスト


    - ANDPAD 施工 Nuxt 化チームでは Storybook + Strorycap + reg-suit + S3 + CircleCI で実現している

  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None

  17. VRTを運用していて感じること
 - コンポーネントの変更によって生じる差分が意図的なものかど うかが、ひと目で判断できるので安心感がある
 - story を書かないと VRT が出来ないので Storybook

    のメンテ ナンスのモチベーションになる


  18. 今日お話するのは運用する中でのひとコマ


  19. ある日、reg-suit が
 おかしな差分を検知するようになったんです


  20. 様子がおかしくなったのは dependabot で
 とある Pull Request が作られたとき


  21. None
  22. None
  23. None

  24. パッケージアップデートの Pull Request で
 差分が出ることは「まれによくある」


  25. 実際に差分を見てみましょう


  26. None

  27. 詳細を見てみましょう


  28. None
  29. None
  30. None
  31. None

  32. もう1つ詳細を見てみましょう


  33. None
  34. None
  35. None
  36. None
  37. None

  38. なるほど、わからん


  39. Release notes を見てみよう


  40. None
  41. None

  42. config.matchingThreshold が未定義の場合に
 差異を抑制するバグを修正しました


  43. None

  44. なるほど


  45. regconfig.json を見てみよう


  46. None

  47. matchingThreshold 無いねぇ


  48. つまり、今まで抑制されていた差分が
 Bug fix によって顕在化したってこと？


  49. とりあえず merge してみて様子を見よう


  50. None
  51. None

  52. eslint のプラグインのアップデートで
 コンポーネントの差分でるのは流石におかしいねぇ


  53. 他の Pull Request でも意図していない差分が
 検知されてノイズになっちゃってるねぇ


  54. None

  55. 直そう


  56. とりあえず reg-suit の設定を見直そう


  57. もう一度 regconfig.json を見てみよう


  58. None

  59. reg-suit の README を見てみよう


  60. None

  61. thresholdRate 


  62. 全体に対する差異が発生したピクセル数の比率のしきい値。 0か ら1の範囲である必要があります。


  63. これがあやしい 


  64. 今まで thresholdRate: 0 というとても厳しい「しきい値」で差分の検知を していたけど、バグで差分が出てこなかったのでは


  65. None
  66. None

  67. 意図していない差分が出なくなった！


  68. 🎉


  69. 運用する中でのひとコマをお届けしましたが


  70. VRT はいいぞ
 - コンポーネントの変更によって生じる差分が意図的なものかど うかが、ひと目で判断できるので安心感がある
 - story を書かないと VRT が出来ないので

    Storybook のメンテ ナンスのモチベーションになる
 - thresholdRate は適切な値を設定しよう
 - 今回の小話が VRT をしている/しようとしている誰かの知見に なればなぁ


  71. ご清聴ありがとうございました！