『Playwright を使いこなす』とテスト品質が一段上がる
Playwright は基本機能を超えると Visual Testing・API Mocking・Component Testing 等で本格的な品質保証ができます。本記事では編集部の視点で、上級活用を公開情報をもとに整理します。Playwright 実践 もご参考に。
Visual Testing
(1) toHaveScreenshot：UI 差分検出。(2) マスキング：日時等の動的部分。(3) 許容差分：maxDiffPixels。(4) ブラウザ別比較。(5) レビュアの目視：CI で diff 画像表示。デザイナーとの連携で品質保証の幅が広がります。
API Mocking
(1) page.route()：リクエスト傍受。(2) fulfill：固定レスポンス。(3) continue/abort：通過/中断。(4) シナリオ駆動：エラーケース再現。(5) 記録/再生：HAR ファイル。バックエンド独立でフロント開発が可能に。
Trace Viewer
(1) Time travel：DOM 状態の各時点を確認。(2) Network：HTTP リクエスト履歴。(3) Console：JS エラー。(4) Source：ステップごとのコード。(5) 失敗時の原因究明に最強。CI で失敗時のみ trace.zip を保存する設定が定番。
Component Testing
(1) React/Vue/Svelte コンポーネントを単独テスト。(2) 実ブラウザで実行：jsdom と違い実環境。(3) props/イベント検証。(4) Storybook 連携。(5) Visual Testingとも統合可能。Vitest/Jest 実践 も合わせて。
並列実行とシャーディング
(1) workers：プロセス並列。(2) shard：CI 全体での分散実行。(3) retries：CI 環境では2を推奨。(4) 独立性確保：fixture で。(5) テスト時間：5分以内目標。
認証の共有
(1) storageState：ログイン状態保存。(2) global setup：1度ログインして共有。(3) マルチユーザー：複数 state ファイル。(4) token 更新：定期再生成。(5) セキュリティ：.gitignore で保護。OAuth/OIDC 実装 もご参考に。
失敗しがちなパターン
(1) Visual Test の差分多発：font/animation。(2) API Mock が現実と乖離。(3) Trace 取得忘れ。(4) テスト時間長期化。(5) 独立性破綻：並列で失敗。対策は、(1)動的部分マスキング、(2)契約テスト併用、(3)trace: retain-on-failure、(4)shard・並列化、(5)fixture徹底、です。