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
590
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.1k
Game Changer? :has() の到来 🛸
takuyakikuchi
0
53
スタック・オーバーフローに コントリビュートしはじめて良かったこと🐣
takuyakikuchi
1
360
Other Decks in Programming
See All in Programming
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
3
310
ゆるい個人開発のススメ
kuroppe1819
10
1k
Java 22 Overview
kishida
1
190
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.4k
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
390
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
19k
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
270
Domain-Driven Transformation
hschwentner
2
1.5k
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
1
330
敵対的ポイフル
futabato
0
120
Fast JSX: Don't clone props object #28768
yossydev
1
150
Implementing Design Systems in Swift
seyfoyun
0
370
Featured
See All Featured
Visualization
eitanlees
137
14k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
Automating Front-end Workflow
addyosmani
1357
200k
How to train your dragon (web standard)
notwaldorf
74
5.2k
Into the Great Unknown - MozCon
thekraken
14
1k
BBQ
matthewcrist
80
8.8k
What's in a price? How to price your products and services
michaelherold
238
11k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
79
43k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
6
1.3k
Become a Pro
speakerdeck
PRO
12
4.6k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
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
の消費を抑える! ただし、バリエーションの網羅、レビューは⼯夫する。
以上です 👋