ビジュアルリグレッションテスト

要点：見た目崩れを差分で検知。本ページでは、現場での判断軸/実装/検証までをまとめます。

定義

ビジュアルリグレッションテストは品質の自動検知/回帰防止に関わるプラクティスです。

なぜ重要か

変更の多い現場では自動化がなければ品質を維持できません。

実務での活用（判断基準付き）

• ビジュアル差分で見た目崩れを検出。
• メトリクスはRUM/Lab両輪で低下を早期検知。
• しきい値/失敗時フラグで自動停止できるように。

実装例

// 例: Playwright + Percy 的な差分テストの擬似コード
test('OGPは安全域を満たす', async ({ page }) => {
  await page.goto('/');
  const og = await page.$('.ogp');
  expect(await og.screenshot()).toMatchSnapshot('ogp.png', { threshold: 0.02 });
});

検証と失敗例

• 計測軸: 差分スクリーンショットの検出率、メトリクスp75の安定性。
• 失敗例: しきい値ゆるすぎで見逃し / 環境差で偽陽性多発。
• 判断軸: 失敗時に自動ブロック/ロールバックが機能。 誤検出率を<2%に。

チェックリスト

• DevTools vs RUMの差を端末別に把握したか
• ビジュアル差分とメトリクスの両輪で回帰を検出したか
• しきい値/アラートを決めて自動化したか
• 失敗時のロールバック/フラグ切替を1クリック化したか

関連用語

• visual-regression-testing
• rum