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
Chromatic VRT 戦略:効果を保ちつつ、コストを抑える方法
Search
TK
June 24, 2023
Programming
0
870
Chromatic VRT 戦略:効果を保ちつつ、コストを抑える方法
Saitama.js vol.6 にて LT した内容。
TK
June 24, 2023
Tweet
Share
More Decks by TK
See All by TK
bulletproof-react 写経してみた
takuyakikuchi
0
1.3k
Game Changer? :has() の到来 🛸
takuyakikuchi
0
56
スタック・オーバーフローに コントリビュートしはじめて良かったこと🐣
takuyakikuchi
1
400
Other Decks in Programming
See All in Programming
SDCon2024: Enabling DevOps and Team Topologies thru architecture: architecting for fast flow
cer
PRO
0
780
Play Billing Library 7.0.0 変更点まとめ@potatotips#88
kako351
0
160
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.9k
12年前の『型システム入門』翻訳の思い出話
mame
11
1.2k
開発部に不満を持っていたCSがエンジニアにジョブチェンしてわかった「勝手に諦めない」ことの大切さ
sakuraikotone
28
16k
How to use Macrobenchmark
veronikapj
0
160
リハビリmruby
kishima
1
160
Introduction to GitOps
hwchiu
0
110
TiDB Serverless ~理想のServerless DBを考える~
soso_15315
1
160
CSC307 Lecture 12
javiergs
PRO
0
220
HMSコンペ 11th Solution (team : kansai-kaggler)
t88
1
680
わかりやすい正解を捨てて、コトに向き合う - スクラムフェス金沢2024 スポンサーセッション
yusukekokubo
0
170
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
149
45k
GraphQLとの向き合い方2022年版
quramy
36
13k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
12
3.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
262
13k
For a Future-Friendly Web
brad_frost
173
9.2k
Atom: Resistance is Futile
akmur
261
25k
How STYLIGHT went responsive
nonsquared
93
5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
189
16k
Producing Creativity
orderedlist
PRO
340
39k
What's in a price? How to price your products and services
michaelherold
239
11k
Transcript
Chromatic VRT 戦略: 効果を保ちつつ、コストを抑える⽅法
TK と申します👋
プレミアリーグ観戦が 趣味です⚽
Saitama.js なので
⽗は所沢市出⾝です
少し川⼝市に住んでました 🏠
画像元: https://thegate12.com/jp/article/355
おすすめスポット:秩⽗三⼤氷柱 ❄
私は⼭梨県出⾝ですが 🗻
None
⼭梨も海ないので、共感です 🏖
Saitama.js 初参加! 楽しみます 🎉
本題
Chromatic VRT 戦略: 効果を保ちつつ、コストを抑える⽅法
結論
Page コンポーネントでのみ Snapshot を有効にするこ とで、Chromatic のコストを抑える!
前提知識
Storybook UI コンポーネントを分離して開発、テストするためのツール Story という異なるレンダリング状態をキャプチャできる Storybook official doc
Chromatic Storybookのためのクラウドベースのツールチェーン Chromatic official doc
VRT: 視覚的な側⾯のテスト⼿法 Snapshots を撮影し、以前のバージョンと⽐較することで視 覚的な差異を検出。 Snapshots とは、Story の画像とメタデータのキャプチャ。 Chromatic UI
test
この話の発端
Storybook + Chromatic 使い始めました
めちゃくちゃ便利!
VRT(Visual Regression Test) も設定なしで使えるとか 神じゃーん
しかし、
使い始めたばかりなのに、Snapshots 使い切りそう フリープランではもう限界か。。
Chromatic Pricing
Snapshotsはどのようにカウントされるか ビルドを実⾏するたびに、各ストーリーに対して1つの Snapshot が取得される。 フリープランの 5,000 Snapshots 100 コンポーネント *
2 ストーリー => 25 回ビルド 🤯 Chromatic docs: Snapshots
そして、課⾦プランもなかなかのお値段
Chromatic Pricing
Snapshots を削減する⽅法は何かないか?
記事へのリンク
記事へのリンク
Page コンポーネントでのみ Snapshot を有効にする!
画像参照元: Atomic design by Bradfrost
なぜページコンポーネントをターゲットに?
ページコンポーネント それぞれのコンポーネントの組み合わせで構成されているた め、結合検証として効率的に多くのコンポーネントをテスト できる!
✅ 画像参照元: Atomic design by Bradfrost
設定
// .storybook/preview.js const preview = { parameters: { // Disables
Chromatic's snapshotting on a global level chromatic: { disableSnapshot: true }, }, }; export default preview; Step 1: グローバルで Snapshot を無効化 Chromatic doc: Ignore stories
// MyComponent.stories.js|jsx import { MyComponent } from './MyComponent'; export default
{ component: MyComponent, title: 'MyComponent', // Enables snapshotting for the component parameters: { chromatic: { disableSnapshot: false }, }, }; export const StoryName = { args: {} }; Step 2: 個別に Snapshot を有効化 Chromatic doc: Ignore stories
これだけ
Snapshots の削減に成功 🎉🎉
注意点 🚨
1. 網羅率は下がってしまう 意識的に Story を追加してさまざまなバリエーションを網羅 できるようにする。
2. Chromatic でのレビューで⼯夫が必要になる 👈 “Changeset” に出てこなくなる 画像元: Chromatic docs UI
review
注意点はあるものの、有効な戦略!(だと思う)
まとめ
課題: Chromatic 便利だけど、⾼い 💸 コスト抑えて、VRT の効果を保つ⽅法はないか? ページコンポーネントを snapshot 対象とし、 Snapshot
の消費を抑える! ただし、バリエーションの網羅、レビューは⼯夫する。
以上です 👋