【びじゅあるりぐれっしょんてすと】
ビジュアルリグレッションテスト とは？
最終更新:
💡 基準のスクショと比べて、見た目の変化を見つける
画面の画像を基準画像と比較して、見た目の変化を検出するテスト。差分が不具合か意図した変更かを確認し、必要なら基準画像を更新する。
📌 このページのポイント
- 撮影した画面を基準画像と比較する
- 差分の検出と、不具合かどうかの判断を分ける
- ブラウザー・画面サイズ・フォントなどの条件をそろえる
- 比較対象や許容差を決め、意図した変更は確認して基準を更新する
ひよこ 普通のテストとは何が違うの？
ペンギン先生 このテストは画面の見た目を画像で比較するんだ。文字の位置やボタンの大きさなど、値の検査だけでは気づきにくい変化を見つける助けになるよ
ひよこ 1ピクセルでも絶対に見つかる？
ペンギン先生 比較方法や許容差、撮影範囲によるよ。細かい差も検出できるけれど、すべての変化を必ず見つける保証はないんだ
ひよこ どうやって始めるの？
ペンギン先生 例えばPlaywrightでは、画面を撮影して基準画像と比較する機能があるよ。初回に基準を用意し、変更後の画面と比べるんだ
ひよこ わざとデザインを変えた場合は？
ペンギン先生 差分を確認して、意図した変更なら基準画像を更新するよ。差分が出たからといって全部がバグとは限らないし、確認せずに更新するのも避けたいね
ひよこ 毎回違う差分が出ることもある？
ペンギン先生 あるよ。OSやブラウザー、フォント、動く表示などの違いが影響する。条件をそろえたり、変動する範囲を除いたりして、許容差も目的に合わせて決めるんだ
まとめ：ざっくりこれだけ覚えればOK！
「ビジュアルリグレッションテスト」って出てきたら「スクリーンショットを比較して見た目の変化を検出するテスト」と思えればだいたいOK！
📖 おまけ：英語の意味
「Visual Regression Testing」 ＝ 見た目の回帰テスト
💬 変更によって以前の表示に不具合が生じていないかを、画像比較などで確認するテストだよ