エンジニアにもデザイナーにも改めて知ってほしい、ビジュアルリグレッションテストの有用性

こんにちは、 Gaji-Labo アシスタントエンジニアの石垣です。

今回は、当ブログでも何度か取り上げている「ビジュアルリグレッションテスト」の便利さについて改めてまとめたいと思います。

そもそもビジュアルリグレッションテストとは？

ビジュアルリグレッションテストとは、あるページで変更を加える前後のスクリーンショットを作成し、それらを比較することで意図しない表示の変更が起きていないかを検証するテスト手法です。

開発を行っていると、一つのコンポーネントに手を加えるだけでも広範なページに影響が及ぶことになり、思いも寄らないスタイルの崩れが起こることもままあります。これを目視で確認するのは容易ではありません。

そこで登場するのがビジュアルリグレッションテストです。ツールを使い、差分比較までを自動で行うことで手軽に表示の確認を行うことが出来ます。

代表的なビジュアルリグレッションテストツール

ビジュアルリグレッションテストツールの代表的なものとしては以下があります。

• reg-suit
  • 画像の差分比較を行うツール
  • スクリーンショット画像の生成は行わない
  • 「画像の差分比較のみを行う」ため、他フレームワークやライブラリと組み合わせてE2Eテスト等幅広いケースに対応できる
• BackstopJS
  • スクリーンショットを撮影し差分比較を行うツール
  • 導入がかなり簡単
• Chromatic
  • Storybook と組み合わせてコンポーネントの差分比較を行う
  • Storybook の公開URL生成、レビュー機能などStorybook に紐付けてVRTに留まらない機能を使うことができる

BackstopJS は弊社のコーポレートサイトでも導入しており、以前にも記事を書いています。

しかし今後はCIと組み合わせてより効率的にテストを行うことを考えているため、 reg-suit や他のビジュアルリグレッションテストツールの導入も考えています。ぜひ知見をお寄せいただけるとありがたいです。

エンジニア・デザイナーと共有したいビジュアルリグレッションテストツールの良さ

1. 差分チェックが簡単に出来る

前段でも書きましたが、差分チェックが簡単に出来るのが一番の良さです。
思いも寄らないページの変更をチェックすることで、デザインの意図通りのページを実装することが出来ます。

2. VRTテストをレビューに活用できる

発生している差分がデザインの意図通りかどうか判断しかねる時など、コンポーネントの表示差分をレビューする必要がある際に簡単に行えるようになります。

3. コンポーネント別の差分チェックも出来る

ページだけでなくコンポーネント単位での差分チェックをすることで、より意図しない変更を防ぐことが可能になります。

この点に関しては Chromatic が Storybook と連携する点で最も簡単にテスト可能ですが、 reg-suit 等でもコンポーネント別に差分確認をすることが出来ます。

さいごに

色々と書きましたが、ページの表示面に関わるテストというところでエンジニアだけでなくデザイナーにも利点のある有用なテスト手法だと思います。

前述の通り、弊社でのコーポレートサイトでもビジュアルリグレッションテストツールを導入しており、より効率的なテスト方法を模索しているのでぜひ Twitter などで知見をお寄せいただけるとありがたいです。