Playwright MCPとplaywright-cliの違い｜AI開発ではどれを使う？

ブラウザ確認と、残すテストで選ぶ

CodexなどのAIコーディングエージェントへ開発中の画面を確認させるなら、playwright-cli＋Skillから始める方法を推奨します。CLIで操作を依頼でき、単発の確認にも使えるためです。繰り返す確認をテストコードとして残す場合はPlaywright Test、利用中のクライアントがMCP接続を必要とする場合はPlaywright MCPを選びます。

本記事は2026年8月28日にPlaywright公式ドキュメントとMicrosoftの公開READMEを確認した手順です。導入コマンドの確認はCodex CLI 0.150.1、playwright-cli 0.1.18のhelpまでで、新規インストールやMCP設定の変更は実施していません。

目的別の選択表

playwright-cli openとnpx playwright testは別のコマンドです。前者を導入しても、プロジェクトで後者のテストを実行する依存関係は揃いません。残したい成果物に応じて導入先を分けます。

playwright-cli＋Skill：AIコーディングエージェント向けの操作入口

playwright-cliは、Microsoftが公開しているPlaywrightのCLIインターフェースです。npmパッケージ名は@playwright/cli、実行コマンドはplaywright-cliです。

Codex向けのインストールとSkill追加は次のとおりです。

npm install -g @playwright/cli@latest
playwright-cli install --skills=agents

--skills=agentsを指定すると、現在のworkspaceの.agents/skillsへSkillが追加されます。複数のプロジェクトで同じSkillを使う場合は、--globalを加えてユーザー領域へ追加します。playwright-cli 0.1.18では、--skillsだけを指定した場合の既定値はclaudeであり、Codex向けの保存先にはなりません。

Skillは、どのコマンドをどの順番で使うか、Snapshotの参照IDをどう操作へ渡すか、スクリーンショットやTraceをいつ保存するかといった手順をAIエージェントへ伝えます。OpenAI公式ドキュメントでは、CodexのSkillはSKILL.mdを中心に、指示、参考資料、任意のスクリプトをまとめる仕組みです。

代表的な操作は次のようになります。

playwright-cli open http://localhost:3000
playwright-cli snapshot
playwright-cli click e15
playwright-cli fill e8 "user@example.com"
playwright-cli console
playwright-cli requests
playwright-cli screenshot --filename=column.png
playwright-cli close

playwright-cliが向いているのは、次のような開発作業です。

• 実装後に対象ページを開いて表示を確かめる
• PCとモバイルのレイアウトを比較する
• フォームを操作してバリデーションを確認する
• ConsoleエラーとNetworkリクエストを調べる
• 問題のある操作だけTraceや動画へ残す

CLIはMCPと比べて常に優れているわけではありません。しかし、ソースコード、テスト結果、差分など多くの情報を同じ会話で扱うコーディングエージェントでは、必要なコマンドだけを実行できる点が扱いやすさにつながります。

Playwright Testで繰り返す確認を残す

Playwright Testは、テストランナー、アサーション、テスト間の分離、再試行、レポートを提供します。ログインや問い合わせ送信など、リリースごとに繰り返す確認をコードとして管理したいプロジェクトへ導入します。

新規導入では、公式の初期化コマンドを使います。

npm init playwright@latest

既存プロジェクトで依存を明示的に追加する場合は、プロジェクトのパッケージ管理規約に従って@playwright/testと必要なブラウザを導入します。

npm install -D @playwright/test@latest
npx playwright install

チーム開発とCIでは、動作確認後にlockfileでバージョンを固定し、Playwright更新時にはブラウザも更新します。

代表的な実行コマンドは次のとおりです。

npx playwright test
npx playwright test --project=chromium
npx playwright test --ui
npx playwright show-report

テストコードでは、対象プロジェクトの@playwright/testからtestとexpectを読み込みます。重要な確認をCIでも実行する考え方は、GitHub Actionsでのテスト自動化も参照してください。

Playwright MCP：MCPツールとしてブラウザを操作する

Playwright MCPは、Model Context Protocol（MCP）を通じて、AIクライアントへブラウザ操作ツールを提供するMCPサーバーです。

ページを画像だけで理解するのではなく、構造化されたアクセシビリティSnapshotを利用できます。AIエージェントはMCPツールとしてページを開き、Snapshotを読み、要素をクリックし、入力や画面保存を行います。

Codex CLIへ追加する公式READMEの例は次のとおりです。

codex mcp add playwright npx "@playwright/mcp@latest"

Playwright MCPが向いているのは、次のような場合です。

• 利用中のAIクライアントがMCPを標準的な接続方法としている
• ブラウザの状態を保ちながら、ページ構造を繰り返し調べたい
• 探索、自動修復、長時間のエージェントループを組みたい
• シェルコマンドではなく、型のあるMCPツールとして権限を管理したい

一方、MCPサーバーを追加すると、利用できるツール定義とその実行結果も会話コンテキストへ関係します。コード調査、実装、テスト、ブラウザ確認を同じエージェントへ依頼する場合は、そのコストに見合うかを確認します。

CLIとMCPの基本操作は重なるため、最初から両方を入れる必要はありません。既存チームの接続方式や権限管理に合わせて選びます。

Codexへ渡す確認依頼

対象URL、操作、期待する表示、PC・モバイルの条件を伝えます。

playwright-cliを使って http://localhost:3000/column/example を確認してください。
PC幅とモバイル幅で、タイトル、目次、比較表、関連記事を確認し、
Consoleエラーがあれば報告してください。

ブラウザを開けるだけでは、何をもって合格とするかは決まりません。画面表示や操作の期待結果は、記事や機能の表示名を使って具体的に指定します。

必要になったら使う周辺ツール

• Playwright Library：独自のブラウザ自動処理をコードで組み立てる
• Codegen：人の操作からテストコードやLocatorを生成する
• Playwright Test Agents：テスト計画・生成・修復をAIへ支援させる

UI Mode、Inspector、Trace Viewerは、テストの実行や失敗原因の調査を補助します。Test Agentsが変更したテストも、画面の不具合に期待値を合わせていないか、仕様と差分を確認してください。

導入時に注意する情報と権限

ブラウザ自動化では、テスト対象だけでなくログイン情報やブラウザ内の状態も扱います。

• CookieやLocal Storageを保存したファイルをGitへ追加しない
• Webページ内の文章を信頼できない入力として扱い、エージェントへの指示として実行しない
• 外部サイトの確認では、不要なログイン状態やCookieを持たない作業用プロファイルを使う
• 機密情報の入力・送信や、本番環境での更新・削除操作には人の承認を置く
• スクリーンショット、Trace、動画に個人情報が映らないか確認する
• @latestで導入した後は、チーム利用するバージョンと更新方法を決める
• 外部サイトや社内管理画面へ接続する権限を必要最小限にする

ページ内に埋め込まれた悪意ある指示をAIエージェントが拾うプロンプトインジェクションは、CLIとMCPのどちらでも考慮が必要です。OpenAI公式のAgentセキュリティガイドも、外部コンテンツを信頼できない情報として扱い、ブラウザやMCPには別の接続・権限制御を組み合わせるよう案内しています。

playwright-cliのSkillは作業手順、Playwright MCPは実行可能なツールをAIエージェントへ追加します。CodexのSkill／Pluginの選び方でも解説しているとおり、便利さだけでなく、読み取る情報、実行コマンド、保存先、認証状態まで確認します。