Playwright：三つのブラウザを同じAPIで検証するWeb自動化基盤

一つのAPIでChromium、Firefox、WebKitを横断する

PlaywrightはWeb自動化とテストのフレームワークで、Chromium、Firefox、WebKitを単一のAPIから操作します。READMEはテスト、スクリプト、AIエージェントの道具として使えると説明しています。特定ブラウザだけで動く画面を検証するのではなく、同じ操作とアサーションを複数エンジンへ適用できる点が中心です。

ブラウザが三種類あることは、互換性確認の範囲が広いことでもあります。画面描画、フォント、権限、ファイル処理、WebKit固有の挙動が同じになるとは限りません。テストが一つのブラウザで通ったというだけで、他のブラウザの結果を推測せず、対象ブラウザをCIの実行マトリクスに含めるかを要件から決めます。

Playwright Testは分離と自動待機でE2Eを組む

Playwright TestはE2E向けのテストランナーです。READMEはChromium、Firefox、WebKitを対象に、ブラウザ分離、自動待機、Web優先のアサーションを提供するとしています。テストは設定したブラウザで並列実行でき、既定ではヘッドレスです。各テストに新しいブラウザコンテキストを与え、別テストのCookieやストレージが混ざりにくい構造です。

ロケーターは、ボタンの役割、ラベル、プレースホルダー、テストIDなど、利用者が認識する要素へ寄せて指定します。自動待機は人工的なsleepを増やさず、要素が操作可能になるまで待つための仕組みです。待機が減っても、テストデータ、非同期通信、外部決済、時刻依存を管理しなくてよいわけではありません。失敗しやすい条件をアサーションとして書き、再実行で偶然通る状態を残さないようにします。

認証状態とTrace Viewerが失敗調査を支える

READMEはログイン後の認証状態をstorageStateへ保存し、他のテストで再利用する例を示しています。毎回ログイン画面から始めずに済むため、テスト全体を短くできますが、認証ファイルにはCookieやトークンが含まれる場合があります。リポジトリへ置かず、CIの秘密情報として管理し、期限とテストユーザーの権限を分ける必要があります。

失敗時には実行トレース、スクリーンショット、動画を保存でき、Trace Viewerで各アクション、DOMスナップショット、ネットワーク要求、コンソールメッセージを確認できます。画面上の最終状態だけでなく、どの操作の後に表示が変わったかを追える点が利点です。保存したトレースに個人情報や認証情報が入る可能性があるため、共有範囲と保持期間を決めてからCIへ組み込みます。

CLIとMCPはエージェントの入口として別に扱う

READMEは用途別に、Playwright TestをE2Eテスト、Playwright CLIをClaude CodeやCopilotのようなコーディングエージェント、Playwright MCPをAIエージェントとLLM駆動の自動化、Playwright Libraryをブラウザ自動化スクリプト向けと分けています。CLIはnpm i -g @playwright/cli@latest、MCPはnpx @playwright/mcp@latest、Libraryはnpm i playwrightが入口です。

MCPの例では、アクセシビリティツリーを参照して要素を選び、ナビゲーション、フォーム入力、スクリーンショット、ネットワークモック、ストレージ管理を行います。自然言語の指示で操作できても、AIエージェントの権限や判断を無制限に広げてよいわけではありません。読み取り専用のテストサイトから始め、対象URL、許可操作、成功条件、保存データを明示し、書き込み処理はサーバー側認可と人の確認を残したいです。

LibraryとVS Code拡張は開発者の手を補う

Playwright Libraryはテストランナーを使わない自動化スクリプト向けです。READMEにはブラウザ起動、ページ移動、スクリーンショット、PDF生成、iPhone 15などのデバイスエミュレーション、page.routeによるネットワーク要求の中断例があります。定期収集やページ保存などには向きますが、対象サイトの規約、アクセス頻度、取得データの権利を別に確認します。

VS Code拡張は、テストの実行とデバッグ、ブラウザセッションからのCodeGen、要素に対応するロケーターの選択、Trace Viewerの表示をエディターへ置きます。録画から生成されたコードは完成したテストではなく、レビューの下書きです。不要な待機、脆いセレクター、秘密情報の記録を削り、利用者が期待する状態をアサーションとして書き直す必要があります。

ブラウザ版、他言語、Apache-2.0を確認する

READMEにはLinux、macOS、Windowsで対応するChromium、WebKit、Firefoxの版が掲載され、ヘッドレスとヘッド付きの実行を説明しています。Python、.NET、Java向けの利用先も案内されています。ブラウザ版が更新されると描画や自動化結果が変わる可能性があるため、CIではPlaywrightとブラウザの版を固定し、更新時に代表シナリオを再実行したいです。

リポジトリはApache License 2.0で、著作権と特許に関する許諾を含みます。これは利用と改変の条件を確認する材料ですが、対象サイトの安定性、ブラウザのバグ、テストの品質、AIエージェントの正しさを保証しません。適するのは、Webアプリの受け入れ条件を複数ブラウザで繰り返し確認し、失敗時の証拠を保存できるチームです。まず一つの重要フローで、認証、テストデータ、版、Traceの扱いを固めます。

CIへ置く前にブラウザ版と証拠を固定する

Playwrightを継続検証へ組み込むなら、Playwright本体、Chromium、Firefox、WebKit、実行OS、Node.jsの版を固定し、代表フローのTraceとスクリーンショットを保存します。認証状態ファイルやトレースに秘密情報が入らないかを確認し、失敗時だけ保存する条件と保持期間を決めます。ブラウザ更新で差分が出た場合は、テストの不具合と製品の表示変更を分けてレビューできる記録を残したいです。

編集部の結論

Playwrightは、Chromium、Firefox、WebKitを同じテスト設計で検証し、失敗時のトレースまで残したい開発チームに向きます。READMEにはPlaywright Test、CLI、MCP、Libraryの入口が分けて示されているため、E2EテストとAIエージェント操作を同じものとして導入しないことが大切です。ブラウザ版、OS、認証状態、テストデータを固定してから、自分の画面で再現性を確認したいです。

公式情報源

1. Official documentation
2. Official README
3. Project repository
4. Release notes