アプリケーションの変更前後で画面のスクリーンショットを取得し、画像の差分比較を行うことで意図せぬ変更が生じていないかを検証するテスト。
アプリケーションのロジックや振る舞いのテストではなく、デザインに関するテストになります。
スナップショットテストとの違い
スナップショットテストはDOMの比較をするのだが、ビジュアルリグレッションテストは画像の差分を比較します。なので、スナップショットテストよりもより見た目に特化したテストと言えます。
仕組み
- 基準となるスクリーンショットを取得
- 変更後のスクリーンショットの取得
- 2つのスクリーンショットを比較して差分を検出する。
メリット
差分チェックが簡単に行える。
細かいズレを目視で確認することは困難ですが、このテストを使えば1pxのズレすら検知できます。
デザインレビューが容易になる。
意図しない変更だけでなく意図した変更も検出できるのでレイアウトの調整が簡単になります。
ツールの選択肢
Storybook単体で行うというよりはいくつかのツールを組み合わせで実施するのが一般的です。
reg-suit + Storycap
最も人気の高い組み合わせ
reg-suit
画像の差分検出を行うライブラリ
Storycap
Storybookのカタログの内容を画像として保存するアドオン
Chromatic
ビジュアルリグレッションテストを非常に簡単に行えるクラウドサービス、Storybookのメンテナーが開発・メンテナンスをしています。デザインの比較だけでなく、デザインに対するコメント、承認フローなど豊富な機能がそろっています。
月に5000スナップショットまでであれば無料で利用できます。（画面が少ない小規模なプロジェクト程度ならこれで十分かもしれません。）
Playwright
主にE2Eテストに利用されるサービスですが、ビジュアルリグレッションテストにも利用される場合があります。
Chromaticの導入
Chromaticを導入するにはプロジェクトがgit管理されている必要があります。
1.Chromaticの公式サイトでアカウント登録する。
2.プロジェクト名を入力する。
次に、画面上に出てくる以下のコマンドを実行してgitコミットします。
|
1 |
npm install --save-dev chromatic |
次に画面上に出てくる以下のコマンドを実行して自分のstorybookをChromaticにパブリッシュします。
|
1 |
npx chromatic --project-token=chpt_xxxxxx |
しばらく待つと以下のように聞かれます。
|
1 2 |
‼ No 'chromatic' script found in your package.json Would you like me to add it for you? [y/N] |
これはchromaticにパブリッシュするコマンドを追加しますか？というような質問になります。便利ですが、トークンの内容まで追加されてしまうのでセキュリティ上危険になるので心配であればNを選ぶようにしましょう。
パブリッシュに成功すると上記のようにパブリッシュが成功した画面が表示されます。
リグレッションテストを実行してみる。
ページ下の「Go to your project」をクリックする。
以下の表示が出てきます。これはStorybookをパブリッシュした単位になります。何度もパブリッシュするとその分だけ数値の数が加算されていきます。
クリックすると以下のような画面になります。
意図的に差分を起こしてパブリッシュすると以下のようになります。前回のビルドから差分があったStoryのみが表示されます。
クリックするとこんな感じでUIの差分を検出できます。
以下のようにDenyやAcceptなどのレビュー機能まで備わっています。議論などもできます。（Acceptを押すことで承認されて表示が緑色になります。）
この記事へのコメントはありません。