VRTあるとき・ないとき

VRT あるとき・ないとき 2023/09/05 CREATED BY t-keshi

本日はVRTの話

VRTって何ぞ？ Visual Regression Testの略 ⇨ 日本語で画像回帰テスト VRT は UI のスナップショット画像を撮り、 前回テスト時のものと比較することで、 UI 差分を検出するテスト手法

https://www.chromatic.com/docs/test

• https://www.chromatic.com/docs/test

(一体それの何が嬉しいんだッ?!) ↓ 今から説明します

VRTないとき

ある日の出来事、、 ボタンのデザインを 少し変えてほしいの Designer

もしButtonコンポーネントを変更したら、、 デグレったらどうしよ... AboutPageは大丈夫でも ContactPageは...? 全部のページ確認しなきゃ うわぁ...漏れがないか不安...

本当に 変更して バグ 起きない...? テストがないから、 変更する勇気がでない (むしろ変更するのは蛮勇でさえある)

そんなときは、、

／）
／／／）
／,.=ﾞ''"／
／
i f ,.r='"-‐'つ＿＿＿_そうだ、コピーして新しいのを作ろう💡
/
/
_,.-‐'~／⌒ ⌒＼
／
,i
,二ﾆ⊃（ ●）. （●）＼
/
ﾉ
ilﾞフ::::::⌒（__人__）⌒::::: ＼
,ｲ｢ﾄ､ ,!,!|
|r┬-|
|
/ iﾄヾヽ_/ｨ"＼
`ー'´
／

• https://dic.nicovideo.jp/a/ﾞ
• https://dic.nicovideo.jp/a/~

src / components / - Button.tsx - そして、 無限に増え続ける コンポーネント ButtonFixedDesign.tsx ButtonNewVersion.tsx ButtonRounded.tsx - Button_最終 版.tsx - Button_最終版fixed.tsx - Button_これが 本物.tsx まるでExcelバージョン管理... (これはさすがに極端な例だけど)

一 体 ど れ が な 本 ん 物 で す か !? つらE

☞ここまでのポイント VRTがないと、 コンポーネントを変更することにコストとリスクがある → コンポーネントを変更する勇気が持てない → 結果として、コピペで増殖されていく → 管理コスト爆上がり かといって、 いちいち全部スクショとって確認するのも大変

VRTあるとき

ある日の出来事、、 こないだ変更してもらった ボタンだけど、 QA バグ があったよ。

すみません、 すぐ直します...！！

そして、 PRが上がってきた...！

UIの変更箇所が明瞭 今回の変更で影響を受けたのは BookPageとBookListPageか....よしっ

Easy to Review https://www.chromatic.com/build?appId=64f75242d 59e4af8b5fa0470&number=5

• https://www.chromatic.com/build?appId=64f75242d59e4af8b5fa0470&number=5

人間が見落とす変更もVRTは見逃さない...! NO MORE 予期せぬ差分

変更の安心感。 L G T M

src / components / - Button.tsx - Select.tsx - Input.tsx 変更しやすく、デグレしにくい それならコピーして変更は不要 コンポーネントが 洗練されていく...

☞ここまでのポイント VRTがあると、 コンポーネントを変更するのが楽 コンポーネントを変更する勇気が持てる 結果として、コンポーネントの質が上がっていく → 開発スピードUP

☞VRTはこんな人にオススメ ● UI周りのバグが多さに課題感のある人 ● PRに大量のスクショを貼るのが面倒な人 ● 見た目は変えずに実装を変えたい人 そして、 安心してUIに変更を加えたいすべての人

それでは...Let's VRT

方法は二つ ● 自前のVRT ● VRTのSaaS

自前のVRT PlaywrightのtoMatchSnapshot()がオススメ。 メリット ● お金がかからない https://zenn.dev/sterashima78/articles/47c9a109988b3c

• https://zenn.dev/sterashima78/articles/47c9a109988b3c

VRTのSaaS Chromaticがオススメ。 メリット ● インタラクション後のスクリーンショットを撮れる ● Storybookのホスティングも可能 ● レビュープロセスへの組み込みが容易

ただしChromatic以外にもVRTのSaaSは色々 ● Percy ● Happio ● VisWiz ● Applitools (料金やサポートブラウザなどによって決めると良さそう) https://sparkbox.com/foundry/visual_regression_testing_with_backstopjs_ applitools_webdriverio_wraith_percy_chromatic

• https://sparkbox.com/foundry/visual_regression_testing_with_backstopjs_applitools_webdriverio_wraith_percy_chromatic

でもお高いんでしょう奥さん...?

例えばChromaticは... ユーザー数は無制限、 スナップショット数に応じて課金 月5,000枚までなら無料

有料プランは３つ(+ Enterprise Custom) 1 2 3 Starter Standard Pro 35,000枚/月 80,000枚/月 150,000枚/月 $149※ $349※ $649※ (※2023/09/05 現在の情報です)https://www.chromatic.com/pricing

• https://www.chromatic.com/pricing

試算してみる 例) ひと月当たりのPRは、およそ100件 一件のPRにPUSHは平均3回 StorybookのStoryの数は 200 100 * 3 * 200 = 60,000(Standardプランで収まるスナップショット数) → ひと月当たり$349(51,393円)

・ ・ ・ ち と 高 く ね ？ そう思いましたね？

大丈夫、僕らは節約できる！

方法① // .storybook/preview.js const preview = { parameters: { chromatic: { disableSnapshot: true } 全体でSnapshotを無効化し、 } VRTしたいものだけ } Snapshotを有効化する // Button.stories.tsx export default { component: Button, parameters: { https://speakerdeck.com/takuyakikuchi/chromati c-vrt-zhan-lue-xiao-guo-wobao-titutukosutowoyi-erufang-fa chromatic: { disableSnapshot: false } } }

• https://speakerdeck.com/takuyakikuchi/chromatic-vrt-zhan-lue-xiao-guo-wobao-titutu-kosutowoyi-erufang-fa

方法② // package.json TurboSnap機能を有効化する { "scripts": { TurboSnapは、 “ 依存関係を特定し、それらの変更に関連付け られたストーリーのみをインテリジェントにス ナップショットします。” "chromatic": "chromatic --only- changed" } } https://www.chromatic.com/docs/turbosnap

• https://www.chromatic.com/docs/turbosnap

今度こそ本当にLet's VRT

Pageからはじめよう まだ何もテストがない場合、 まずは範囲は広く・荒い粒度で整備していくのがセオリー “ つまり、ボタンやラベルといった小さな Component より、 画面全体をカバーする Page Component に対して VRT を実施するほうが効果的です。” https://buildersbox.corp-sansan.com/entry/2023/05/12/110000

• https://buildersbox.corp-sansan.com/entry/2023/05/12/110000

// .storybook/preview.js const preview = { parameters: { chromatic: { disableSnapshot: true } API呼び出しはどうする？ } } → MSWを使うと楽。 // Button.stories.tsx export default { component: Button, parameters: { chromatic: { disableSnapshot: false } https://buildersbox.corpsansan.com/entry/2023/05/12/110000(2) } }

• https://buildersbox.corp-sansan.com/entry/2023/05/12/110000

// SamplePage.tsx
const SamplePage = () => {
const [open, onOpen] = useToggle(false);
return (

<div>

モーダルの中身のUIを

<Button onClick={onOpen}>編集ダイアログを開く</Button>
<Dialog open={open}>

VRTしたいときはどうする？

Hello from Dialog!!

</Dialog>
</div>
);
};

→ play関数を使うと便利。

// SamplePage.stories.tsx
export const SamplePageEditDialogTest: Story = {
render: SamplePage,,

play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const button = canvas.getByText('編集ダイアログを開く');

https://buildersbox.corpsansan.com/entry/2022/08/01/110000(6-1-2)

await userEvent.click(button);

},
};

• https://buildersbox.corp-sansan.com/entry/2022/08/01/110000

意外とEasyに VRT 始められそうな気がしてきませんか？ …ということで、、

☞今日のまとめ ● VRTがあると変更する勇気が持てる ● VRTがあるとUIの差分の確認が楽 ● VRTの導入方法は、SaaSを使う方法と使わない方法がある ● SaaSを選んだ場合は、工夫次第でコストを抑えることも可能 ● まずは画面全体をカバーするPageからはじめるのがオススメ

結論 V R T 賢 く 安 く 自分のチームに合った方法で賢く安くVRT。

ありがとうございました！

参考資料 ● Storyshots を 使わずに Playwright で Storybook の VRT をする ● Vol.03 Component 総数 1000 件を超える Bill One の React フロントエン ドに Chromatic を用いた VRT を導入した話 ● 今さら聞けないビジュアルリグレッションテストをChromaticで始める ● Chromatic VRT 戦略：効果を保ちつつ、コストを抑える方法 ● ビジュアルリグレッションテストのツールを 導入するまでの 意思決定プロセス

• https://zenn.dev/sterashima78/articles/47c9a109988b3c
• https://buildersbox.corp-sansan.com/entry/2023/05/12/110000
• https://buildersbox.corp-sansan.com/entry/2022/08/01/110000
• https://speakerdeck.com/takuyakikuchi/chromatic-vrt-zhan-lue-xiao-guo-wobao-titutu-kosutowoyi-erufang-fa
• https://devblog.thebase.in/entry/process-of-introduction-of-chromatic