実際に機能するスクリーンショット比較戦略

偽陽性問題

ビジュアルテストを採用したすべてのチームが同じ壁にぶつかります：偽陽性です。CIパイプラインが実際にはレンダリングノイズにすぎない「リグレッション」を大量にフラグし、チームは結果を完全に無視し始めます。解決策はビジュアルテストを放棄することではなく、よりスマートな比較戦略を採用することです。

戦略1：リージョンベースマスキング

ページのすべての部分にピクセルパーフェクトな比較が必要なわけではありません。タイムスタンプ、ユーザーアバター、広告スロットなどの動的コンテンツ領域は、キャプチャ間で常に異なります。

リージョンマスキングにより、比較時に無視する領域を定義できます：

await page.screenshot({
  path: 'dashboard.png',
  mask: [
    page.locator('.timestamp'),
    page.locator('.user-avatar'),
    page.locator('.ad-slot'),
  ],
})

ポイントは、マスクを精密に設定すること。マスクが少なすぎると偽陽性が発生し、多すぎると本物のリグレッションを見逃します。

戦略2：コンポーネントレベルスナップショット

フルページスクリーンショットは有用ですがノイズが多いです。コンポーネントレベルのスナップショットは、より正確で安定した比較を提供します：

test('card component visual test', async ({ page }) => {
  const card = page.locator('[data-testid="product-card"]')
  await expect(card).toHaveScreenshot('product-card.png')
})

コンポーネントスナップショットの利点：

• 小さい画像で高速な比較
• 分離された変更でレビューが容易
• 無関係なページ要素からのノイズが少ない
• コンポーネントバリアントをテストできるためカバレッジが向上

戦略3：レスポンシブブレークポイントテスト

ユーザーは320pxのスマートフォンから2560pxのウルトラワイドまで、あらゆるデバイスでアプリを閲覧します。ビジュアルテストは重要なブレークポイントをカバーすべきです：

const viewports = [
  { width: 375, height: 812, name: 'mobile' },
  { width: 768, height: 1024, name: 'tablet' },
  { width: 1440, height: 900, name: 'desktop' },
]

for (const vp of viewports) {
  test(`homepage at ${vp.name}`, async ({ page }) => {
    await page.setViewportSize({ width: vp.width, height: vp.height })
    await page.goto('/')
    await expect(page).toHaveScreenshot(`homepage-${vp.name}.png`)
  })
}

戦略4：しきい値チューニング

差分のしきい値は、ビジュアルテストセットアップにおいて最も重要な設定項目かもしれません。厳しすぎるとすべてが失敗し、緩すぎると本物のバグがすり抜けます。

良い出発点：

• コンポーネントレベルテストに0.1%のピクセル差異
• フルページテストに0.5%のピクセル差異
• アニメーションや動的コンテンツのあるページに1〜2%のピクセル差異

偽陽性率を時間経過で監視し、必要に応じてテストごとにしきい値を調整します。

戦略5：ベースライン管理

ベースラインはUIがどう見えるべきかの信頼源です。適切な管理が不可欠です：

意図的にベースラインを更新する

失敗時にベースラインを自動更新しないこと。すべてのベースライン更新は、期待される変更を理解しているチームメンバーがレビューし承認すべきです。

コードとともにベースラインをバージョン管理する

ベースライン画像をテスト対象のコードと一緒にgitリポジトリに保存します。これにより、コミット履歴のどの時点でもベースラインがUI状態と同期し続けます。

ブランチ固有のベースライン

意図的にUIを変更するフィーチャーブランチで作業する場合、他の開発者をブロックしないようにブランチ固有のベースラインを維持します。

すべてを組み合わせる

最も効果的なビジュアルテストセットアップは、複数の戦略を組み合わせます：

1. 重要なUI要素のコンポーネントレベルスナップショット
2. 主要なユーザーフローのフルページスクリーンショット
3. モバイルとデスクトップのレスポンシブブレークポイントカバレッジ
4. 動的コンテンツのリージョンマスキング
5. テストカテゴリごとにチューニングされたしきい値

このレイヤードアプローチにより、管理可能な偽陽性率で包括的なカバレッジが得られます。

ScanUで始める

これらのテクニックを本番環境で適用するには、注力するページセットから始めて、意味のあるUI変更のたびにベースラインスクリーンショット比較を実行しましょう。プランは料金、実装の詳細はFAQ、プロダクトの機能は機能で確認できます。