Visual Diff とは？

visual diff は、コンポーネントやページをレンダリングして画像をキャプチャし、承認済みの baseline と比較する visual regression test の出力です。差異のある領域が強調され、レビュアーが変更を確認または却下できます。新しい見た目が受け入れられると baseline が更新されます。

なぜ重要か

機能テストは、レイアウトが崩れたり色が変わったりしても pass してしまいます。visual diff は、DOM への assertion では見逃すような見た目の regression を、とりわけ browser や画面サイズをまたいで捕捉します。

ノイズの低減

• anti-aliasing とフォントレンダリングのしきい値
• timestamp のような動的な領域のマスキング
• キャプチャ前のアニメーションの安定化

関連ガイド