1. 導入：なぜVisual Regression Testing（VRT）が必要なのか？
Web開発において、機能テスト（単体テスト）が通っていても「CSSを修正したら意図しない場所のデザインが崩れてしまった」という経験はありませんか？手動での目視確認は時間がかかり、見落としも発生します。VRTは、アプリケーションのスクリーンショットを自動撮影し、前回保存した画像とピクセル単位で比較することで、人間では気づきにくい「わずかなUIの変化」を確実に検知し、品質を担保するための強力な武器になります。
2. 基礎知識：VRTの仕組み
VRT（Visual Regression Testing）は、主に以下のプロセスで動作します。
・ベースライン画像の作成：期待される正しいUIのスクリーンショットを保存します。
・比較：テスト実行時に再度スクリーンショットを撮影し、画像同士をピクセル単位で比較します。
・差分検知：ピクセルの色が異なる箇所を赤枠などで強調し、レポーティングします。
この仕組みを利用することで、意図しないレイアウト崩れやフォントの不整合をシステム的にガードできます。今回は、業界標準ツールの一つである「reg-suit」とStorybookを組み合わせた構成を想定します。
3. 実装・解決策
導入には、以下の3ステップが必要です。
1. Storybookの導入：コンポーネント単位でUIを表示する環境を整えます。
2. スクリーンショット撮影ツールの導入：PlaywrightやPuppeteerを使用して、Storybook上のコンポーネントを画像化します。
3. 比較ツールの連携：撮影した画像を「reg-suit」へ渡し、前回の画像と比較・レポート出力を行います。
4. サンプルプログラム：Playwrightでの画像撮影例
以下は、Playwrightを使用してStorybook上のコンポーネントをスクリーンショット保存するための簡単なスクリプトです。
const { test, expect } = require(‘@playwright/test’);
test(‘コンポーネントのスクリーンショットを撮影’, async ({ page }) => {
// StorybookのURLにアクセスします
await page.goto(‘http://localhost:6006/iframe.html?id=button–primary’);
// コンポーネントを特定し、スクリーンショットを保存します
// fullPage: trueにすることで画面全体を確実にキャプチャします
await page.screenshot({
path: ‘screenshots/button-primary.png’,
fullPage: true
});
// 撮影が成功したかを確認するアサーション
console.log(‘スクリーンショットを撮影しました’);
});
5. 応用・注意点：現場で陥りやすい罠
VRTを運用する上で最も注意すべき点は「動的コンテンツ」です。
・現在時刻の表示：毎秒変わる時刻は、毎回差分として検知されてしまいます。テスト時は固定値になるようにモック化しましょう。
・アニメーション：CSSアニメーションが動いている最中に撮影すると、画像がブレて失敗します。撮影時はアニメーションを無効化（CSSで transition: none !important; を適用するなど）するのが鉄則です。
・環境の差異：OSやブラウザのレンダリングエンジンによって数ピクセルの誤差が出ることがあります。許容範囲（しきい値）を設定できるツールを選ぶのが、運用のコツです。
VRTを導入すれば、リリース前の「デザイン崩れへの不安」から解放されます。まずは一つのコンポーネントから、ぜひ試してみてください。
コメント