グローバルナビゲーションへ

本文へ

フッターへ

お役立ち情報Blog



Chromatic で Visual Regression Testingを導入する方法

Visual Regression Testing とは 日本語で画像回帰テストといい、画像の差分を検出するスナップショットテストの一つです。 このテストを導入する理由は改修による予期せぬ UI の崩れを見つけることです。

今回は、Storybook用のツール「Chromatic」で Visual Regression Testingを導入する方法をご紹介します。

インストール

準備ができたら Storybook を起動します。
今回は example で用意されている Button コンポーネントを使ってテストします。

Chromatic の準備

  1. 先ほど作ったプロジェクトを github 上にリポジトリを作り push してください。
  2. 下記の url から Chromatic に飛び、github のアカウントでログインまたはアカウントを作り github を連携します。
    Chromatic
  3. Add project からリポジトリを選択します。
  4. 画面に従い 1 つめのコマンドで Chromatic をプロジェクトにインストールし、2つ目のコマンドで Chromatic に publish & build します。
  5. 管理画面の Builds や Library で確認することができます。

Visual Regression Test

実際に差分をつけて Test してみましょう。

分かりやすくするためにあえてスタイルを大きく変更します。

変更コミットをリモートリポジトリに反映し  npm run chromatic  を実行します。

Chromatic を確認すると新しい Build が追加されています。


このようにビジュアルの差分を確認する事ができます。
dom の変更があった場合、その差分も合わせて見ることができます。

おまけ githubActions で 自動化

  1. .github/workflows ディレクトリの中に chromatic.yml を作成します。
  2. github の Actions secrets に CHROMATIC_PROJECT_TOKEN を設定します。
  3. github に push します。

上記の workflow は最小構成ですが、Chromatic は多数のオプションを用意しています。 オプションは公式を参考にしてください。

さらに、 Chromatic on GitHub をインストールすることで、github 側で作成したプルリクエストが Chromatic 側に反映され、ステータスチェックに表示させることができます。

さいごに

BranchProtection と組み合わせて Chromatic 側で review しなければ merge できないようにすれば、 UI をより固く保守することができます。 UI の差分を人間の目でチェックするにはどうしても限界があるので、Chromatic のような Visual Regression Test をお勧めします。

The following two tabs change content below.

アーティス

創造性を最大限に発揮するとともに、インターネットに代表されるITを活用し、みんなの生活が便利で、豊かで、楽しいものになるようなサービスやコンテンツを考え、創り出し提供しています。
この記事のカテゴリ

FOLLOW US

最新の情報をお届けします