2024年2月21日 / #VRT4選 Storybookの実力をフル活用するChromatic ビジュアルリグレッションテストツール４選！ユーザーが語る各ツールのメリット

自己紹介 sakito X：@__sakito__ , note：sakit0, Zenn : sakito 2019年にサイボウズ株式会社へ入社。2021年に会社横断のフ ロントエンド専門チームからデザインチームへ異動し、肩書き をDesign Technologistへ。2023年にデザイン室を立ち上げ、 2024年からDesign Managerに。 フロントエンドとデザイン の狭間にいます。

0 StorybookとChromatiÆ 0 Chromaticの主な機Ä 0 Chromaticの導入から工Â 0 StorybookとChromaticの未Á 0 まとめ アジェンダ

StorybookとChromatic

StorybookとChromaticの概要 ` StorybooC ` コンポーネントを開発、テスト、管理するためのOSSツー$ ` 実環境と分離したコンポーネントの動作確認ができる ` Chromatio ` Storybookのメンテナ達が立ち上げたChroma Software Inc.が運s ` 一部無料だが、重量課金型のサービh ` Storybookの機能を補完し、さらに便利にしてくれる

Chromaticのプラン 引用元：Pricing • Chromatic 
 https://www.chromatic.com/pricing

Chromaticの主な機能

Chromaticの主な機能 ‚ Storybookのホスティンb ‚ URL共有やカスタムドメインの設C ‚ GitHubやGitHub Actionsの連2 ‚ Interaction Testの確S ‚ Visual Regression Test(VRT& ‚ Chrome,Safari, Edge,Firefox対 ‚ Figmaとの連2 ‚ DevModeへの表示 引用元：Introducing Chromatic GitHub Action
 https://medium.com/@domyen/introducing-chromatic-github-action-613c780a475e

Chromaticのはじめ方 2 Storybookがあるプロジェクトが前提

StorybookのTestとChromaticのSnapshot Story毎に
 Snapshotが撮られる

柔軟なSnapshotの設定 & コンポーネント毎にさまざまな設定が可能

ブラウザの設定の確認ができる p Chromatic上で設定ができH p 自分たちのプロジェクトではEdgeは外していH p ブラウザ × Story数分のSnapshotが撮られるので節約したい意図がある

Chromaticの導入から工夫

Chromaticを導入した背景 c Storybookの共有のしやす{ c 自前でStorybookをホスティングして、ブランチ毎にStoryが見れるようにしていƒ c 細かい部分や社内ネットワーク限定など細かい制約や環境の面倒を見るのが手間だっƒ c いまはSSOとカスタムドメインをChromaticに設定していg c デザインシステムの環境でStorybookを活用していƒ c ドキュメント、テストなど..ˆ c これらの機能をChromaticと合わせて活用したかっƒ c VRTを起点としたデザインレビュF c デザイン変更が多いので目視での確認をある程度自動化したかった これらをまるっと解決するためにChromaticを導入 VRTだけではなく、+ αの要件があった

VRTをどう利用しているか ƒ VRTではコンポーネントのパターンと見落としがちな状態の検知に使っていP ƒ DisableE ƒ Hove8 ƒ Focu‚ ƒ エラー状q ƒ 文字列が長い場合など、最大値と最小値のUIの状q ƒ 複数のコンポーネントが絡み、状態再現が大変なもh ƒ ComboboxやDialogの中身のパターンなX ƒ 一部のコンポーネントはInteraction Testも兼ねていP ƒ Storybook駆動開発となり、テストが一体になっていることで、
 運用することが当たり前になっている

VRTのファイルを分ける工夫 … 1つのstoriesファイルで管理するとInteraction TestやVRTの内 容も混じるので分けていc … Button.stories.tsF … 基本パターンがまとまっていc … コンポーネントパターンだけ知りたい人向A … Button.interaction.stories.tsF … Interaction Testの確認" … Button.vrt.stories.tsF … VRT" … VRT落ちた時以外は見ることがない

Snapshot数を節約する { なにも設定していないと、git Push毎にSnapshot数が 増加すy { Snapshot数の上限で課金額が変わy { Story * git Push回数 = Snapshot { TurboSnapを利用することで、変更差分があるStory のみSnapshotを撮るようになy { webpackがデフォルトの対I { Viteは別プラグインが必7 { vite-plugin-turbosnai { package.jsonの更新でSnapshotが撮られるのは防げ なx { Renovate使用時は注# { パッチバージョンの周期を固めたりする対策

StorybookとChromaticの未来

Storybookに依存しないE2Eテスト環境(Beta) q ChromaticとPlaywright,Cypress連d q @chromatic-com/cypresp q @chromatic-com/playwrigh’ q PlaywrightやCypressのSnapshotを
 Chromaticに連携できP q 詳しくは下記の記事を参照すると良Y q E2E Visual Tests for Playwright (beta9 q https://www.chromatic.com/docs/ playwrightg q 予6 q Storybookのツールではなく、テストツールと して拡充していくかもしれない？ 引用元：E2E Visual Tests for Playwright (beta)
 https://www.chromatic.com/docs/playwright/

Storybook上でChromaticの確認が可能に i Storybook v8 Betaに入った新しい@chromatic-com/storybookアドオI i ローカルのStorybook上でVRTの差分検知の確認・承認ができ6 i ファイルを変更したらすぐに影響範囲に気づける

まとめ

まとめ … Storybookの機能を引き出すChromatii … 無料範囲でもホスティングやVRTを試すことができq … VRT以外にも機能が豊$ … これからStorybookがさらに便利になる機能追加などがあるかもしれなf … Figmaとの連携の更なる拡s … Storybook上でのChromatic連 … Storybook以外のE2Eテストツールとしての機能も増えそう