ビジュアルリグレッションテストとは何ですか？

画面のスクリーンショットを撮影して以前の状態と比較し、意図しない見た目の変化を検出するテスト。CSSの変更やコンポーネント修正によるレイアウト崩れを自動的に見つけ出します。

ビジュアルリグレッションテストのポイントは？

画面のスクリーンショットを基準画像と比較して差分を検出する。CSSの変更やライブラリのアップデートによるレイアウト崩れを自動で発見できる。Chromatic、Percy、reg-suit、Playwrightなどのツールが代表的。意図した変更の場合はベースライン画像を更新して承認する運用

【びじゅあるりぐれっしょんてすと】

💡 スクショを撮って「間違い探し」、見た目の変化を1ピクセルも見逃さない

📌 このページのポイント

ビジュアルリグレッションテストのイメージ

ひよこ

ビジュアルリグレッションテストって普通のテストと何が違うの？

ペンギン先生

普通のテストは「値が正しいか」を検証するけど、ビジュアルリグレッションテストは「見た目が変わっていないか」を検証するんだよ。スクリーンショットを撮ってピクセル単位で比較するんだ

ひよこ

目で確認するんじゃダメなの？

ペンギン先生

ページが数百あったら人間の目では無理だよね。1ピクセルのズレや微妙な色の違いも見逃さないから、CSSを変更した後の安心感が全然違うんだ

ひよこ

どんなツールを使うの？

ペンギン先生

StorybookベースならChromaticが人気で、コンポーネント単位で比較できるよ。CIに組み込むならPercyやreg-suit、Playwrightのスクリーンショット比較機能も使えるんだ

ひよこ

わざと変更したときはどうするの？

ペンギン先生

差分が検出されたらレビューして、意図した変更なら「承認」してベースライン画像を更新するんだ。Chromaticだとプルリクエストのレビューフローに統合されていて便利だよ

ひよこ

フォントの描画がOSで違ったりして誤検出しないの？

ペンギン先生

それが最大の課題で、「フレーキーテスト」の原因になりがちだよ。Docker コンテナ内で統一した環境を作ったり、閾値を設定して微小な差分は無視したりする工夫が必要なんだ

まとめ：ざっくりこれだけ覚えればOK！

「ビジュアルリグレッションテスト」って出てきたら「スクリーンショットを比較して見た目の変化を検出するテスト」と思えればだいたいOK！

📖 おまけ：英語の意味

「Visual Regression Testing」＝視覚的な回帰テスト

💬 regression（回帰）は「前に戻る」こと。見た目が意図せず前と変わってしまう「退行」を検出するテストだよ