Playwright MCP Server

Playwright とは

Playwright は、Web ブラウザを「AI やプログラムから自動で動かす」ための仕組みです。「実際に人間がマウス・キーボードでブラウザを操作する」のと同じことをコードや自然言語の指示で再現できます。

Microsoft が開発しており、Chrome（Chromium）・Firefox・Safari（WebKit）の 3 大ブラウザに対応しているのが最大の特徴です。「動作確認をブラウザごとに繰り返す」「ログイン後の画面の数値を毎日チェック」など、Web 上の繰り返し作業を自動化したい場面で広く使われています。

Playwright × AI でできること

この MCP サーバーを導入すると、AI が Web ブラウザを実際に開いて操作できます。

🌐 マルチブラウザで確認

「このフォームを Chrome・Firefox・Safari で動作確認して」
→ 3 ブラウザで自動実行 + 結果レポート

🔍 ページから情報を取得

「ログインして月次売上の数値を取得して」
→ ログイン操作 + 画面読み取り

📸 スクリーンショット比較

「Chromium と Firefox でスクリーンショットを撮って差分を見せて」
→ 各ブラウザで撮影 + 差分検出

🧪 E2E テストを実行

「商品一覧→カート追加→決済画面まで通して、エラーがあれば報告して」
→ シナリオ実行 + 失敗時の原因報告

提供される主なツール

Playwright MCP Server が公式に提供するツール（README 明記範囲）:

機能カテゴリ	主なツール
ページ操作	browser_navigate / browser_navigate_back / browser_click / browser_type / browser_press_key / browser_hover / browser_drag / browser_drop
フォーム	browser_fill_form / browser_select_option / browser_file_upload
状態取得	browser_snapshot（アクセシビリティスナップショット） / browser_take_screenshot / browser_console_messages / browser_network_requests / browser_network_request
待機・実行	browser_wait_for / browser_evaluate / browser_run_code_unsafe（JS 実行）
タブ・ウィンドウ	browser_tabs / browser_resize / browser_close
ダイアログ	browser_handle_dialog
拡張機能（opt-in）	--caps=storage（Cookie / localStorage） / --caps=devtools（トレース / 録画） / --caps=vision（座標ベース操作） / --caps=pdf（browser_pdf_save）

重要な設計思想: Playwright MCP は ピクセルベースではなくアクセシビリティツリー（構造データ） を使ってページを認識します。これにより AI の操作が決定論的になり、トークン消費も少なくて済む構造です（vision モデルでの画面認識に頼らない）。

Playwright MCP Server について

Playwright MCP Server は、Microsoft 社が公式に提供する MCP サーバーです（リポジトリ: microsoft/playwright-mcp）。Playwright の API を経由して、AI エージェントから Chrome / Firefox / Safari の 3 大ブラウザを統一インターフェースで操作できます。

類似ツールの Puppeteer は Chromium のみ対応なのに対し、Playwright は WebKit（Safari）や Firefox を含むマルチブラウザに対応している点が大きな差別化ポイントです。テスト自動化・情報収集・UI 検証など、Web ブラウザを使った繰り返し作業を効率化したい開発チームや QA エンジニアに特に有効です。

スペック

• 配布形態: npm パッケージ（@playwright/mcp）+ Node.js 18+
• 認証: 不要（ローカルブラウザを起動）
• 対応ブラウザ: Chrome（Chromium）/ Firefox / Safari（WebKit）
• 提供元: Microsoft 社（公式）/ Apache-2.0
• 対応範囲: ページ操作・フォーム・スクリーンショット・E2E テスト・ネットワーク監視等
• 公式リポジトリ: github.com/microsoft/playwright-mcp

導入手順

前提条件

• Node.js 18 以上
• Playwright が制御するブラウザ（初回 npx playwright install で自動取得）

ステップ

1. ページ上部のタブから使用環境（Claude Desktop / Cursor / Cline）を選択し、JSON 設定をコピー
2. コピーした JSON を設定ファイル（claude_desktop_config.json など）に追記して保存
3. クライアントを再起動
4. 初回のみ: ブラウザを事前インストール（推奨）

npx playwright install

API キーや認証情報は不要です。

注意事項

• Web サイトの利用規約や robots.txt を確認し、自動操作が許可されているか事前に確認してください。クローラ禁止のサイトに対する自動操作はトラブルの原因になります。
• ログインが必要なページでは、パスワードを直接 AI に渡さず、環境変数や別の認証手段を使ってください。
• Playwright はブラウザを起動するためメモリを消費します。複数ブラウザを同時起動する場合はリソースに注意してください。
• 初回起動時に Playwright のブラウザバイナリのダウンロードが発生します（合計約 500MB）。
• browser_run_code_unsafe は任意の JavaScript を実行できるため、AI に悪意あるコードを実行させないよう信頼できる環境でのみ利用してください。

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest"]
    }
  }
}

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest"]
    }
  }
}

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest"]
    }
  }
}