Storybook向けPercyとChromatic

Percyは、CIパイプラインと統合できるクラウドベースのVRTプラットフォームです。WebページやStorybookのストーリーのスクリーンショットを取得し、ベースラインをクラウドに保存して、Web UIから利用できるビジュアル差分レビューを生成します。Playwright、Cypress、Selenium、Storybookをサポートしています。

Chromaticは、Storybook専用に構築されたVRTプラットフォームです。クラウドブラウザですべてのストーリーを取得し、ベースラインと比較して、差分レビュー用のUIを生成します。また、Chromaticはホスト型のコンポーネントドキュメントサイトとしてStorybookを公開できます。

PercyとChromaticは、すべてのStorybookストーリーを自動的に検出してスナップショットを取得します。追加のテストコードは必要ありません。コンポーネントのストーリーを作成してCLIを実行するだけで、すべてのビジュアル状態が自動的にテストされます。そのため、既存のStorybookプロジェクトにもすばやく導入できます。

@percy/cliと@percy/storybookをインストールし、CIにPERCY_TOKEN環境変数を追加して、CIパイプラインにpercy storybook ./storybook-staticを追加します。Percyはすべてのストーリーのスナップショットを取得し、VRTのビルドをPercyダッシュボードに自動的に投稿します。

chromaticをインストールし、CIにCHROMATIC_PROJECT_TOKENを追加して、chromatic --project-token=...を実行します。初回の実行でベースラインが確立されます。以降の実行ではベースラインと比較し、レビュー用リンクをGitHub PRのチェックに投稿します。

どちらのツールも、「X changes detected.」と表示するPRチェックを追加します。クリックすると、横並びまたはオーバーレイ形式の差分を表示するレビューUIが開きます。レビュアーは、意図した変更を承認して新しいベースラインを確立するか、意図しないリグレッションの修正を要求します。

Storybook args（controls）を使って、複数のストーリーバリエーションを作成します。Default、Loading、Error、Disabled、LongText、SmallViewportなどです。各バリエーションが個別のVRTスナップショットになるため、テストファイルを別々に作成しなくても状態を包括的にカバーできます。

ChromaticとPercyは、スナップショットごとに複数のビューポート幅をサポートしています。ストーリーまたは.storybook/preview.jsのグローバルなviewportsで設定します。各ビューポートと各テーマ（light/dark）でVRTを実行し、レスポンシブ表示とテーマのリグレッションを同時に検出します。

メジャーバージョンを上げるときや、意図的にデザインを変更したときは、すべての変更を承認します。どちらのツールも一括承認をサポートしています。デザインシステムを大きく更新した後は、すべての差分を一度に承認すると、新しいスクリーンショットが今後の段階的な変更のベースラインになります。

Storybookのplay()関数（インタラクションテスト）とVRTを組み合わせます。play()でユーザー操作（ボタンのクリックやモーダルの表示など）をシミュレートし、その後VRTスナップショットで結果の状態を取得します。これにより、複雑なインタラクティブコンポーネントのビジュアル出力をテストできます。

PercyとChromaticはスナップショット単位で課金されます。数百のストーリーに加えて複数のビューポートやテーマを含む大規模なStorybookスイートでは、PRごとに数千のスナップショットが生成されます。使用量を監視し、ストーリーデコレーターを効率的に使い、ロジックのみを対象とするストーリーではVRTを省略することを検討してください。

一般的なVRTツールと比べて、Chromaticが特にStorybookプロジェクトに適しているのはなぜですか。

PercyとChromaticは、クラウドブラウザですべてのストーリーを検出してスナップショットを取得し、PRの差分レビューを生成し、ベースラインを管理することで、StorybookのVRTを自動化します。状態の網羅にstory argsを、インタラクションテストにplay()を組み合わせることで、コンポーネントライブラリに包括的なビジュアル品質保証を提供します。