E2E テストは『リリース前の最後の砦』
単体テスト/結合テストが通ってもUIで壊れることはあります。Playwright は Microsoft が開発する E2E テストツールで、Chromium/Firefox/WebKit を統一APIで操作できます。本記事では編集部の視点で、実務での設計を公開情報をもとに整理します。Next.js App Router 実践 もご参考に。
基本構成
(1) playwright.config.ts：ブラウザ・並列度・タイムアウトを集約。(2) projects 設定：ブラウザごとに環境を分離。(3) fixtures：共通セットアップを再利用。(4) baseURL：環境ごとに切替。(5) screenshot / trace：失敗時に自動収集。
テストの書き方
(1) getByRole / getByLabel：a11y属性ベースのセレクタ推奨。(2) data-testid は最終手段：a11y を優先。(3) Auto-wait：明示的な sleep は禁止。(4) POM (Page Object Model)：UIごとのクラスで分離。(5) 視覚回帰：toHaveScreenshot で UI 差分検出。
並列実行とシャーディング
(1) worker 数：CPUコアに合わせる。(2) shard 機能：CIで複数マシン分割実行。(3) 独立性：テスト間で状態を共有しない。(4) 並列向きデータ：ユーザー/組織を分けて衝突回避。(5) 並列で壊れる場合：fixture でセットアップ統一。Observability 実践 でテスト時間の可視化も。
CI 連携
(1) GitHub Actions：公式の playwright-action がある。(2) キャッシュ：ブラウザバイナリは ~/.cache。(3) シャード並列：matrix で複数Jobへ分散。(4) artifact：失敗時のスクショ/trace を保存。(5) HTML report：人間が見やすいレポート。
フレーキー対策
(1) retries: 2：CI 環境では再試行で安定。(2) 明示的 wait：要素ではなく状態を待つ。(3) 外部API のモック：route.fulfill で固定応答。(4) 時刻固定：clock.install で時間を制御。(5) 失敗ログの分析：trace.zip を再生して根本対処。
失敗しがちなパターン
(1) テストが互いに依存：並列で破綻。(2) 本番DB に書き込み：データ汚染。(3) 毎晩CI落ち：時刻依存。(4) セレクタが脆い：CSS変更で大量失敗。(5) 巨大テスト：1つで全体を検証。対策は、(1)独立性必須、(2)テスト環境専用DB、(3)時刻固定、(4)a11y セレクタ、(5)テスト粒度を細かく、です。