Playwright MCP Server 🎭

Playwright を利用したブラウザ自動化機能を提供する Model Context Protocol サーバーです。このサーバーにより、LLM は実際のブラウザ環境で Web ページとの対話、スクリーンショットの取得、テストコードの生成、Web ページのスクレイピング、JavaScript の実行を行うことができます。

✨ v1.0.10 の新機能

🎯 143 種類の実機デバイスプリセットによるデバイスエミュレーション

シンプルなコマンドで、Web アプリケーションを実機のデバイスプロファイルでテストできます。

// Test on iPhone 13 with automatic user-agent, touch support, and device pixel ratio
await playwright_resize({ device: "iPhone 13" });

// Switch to iPad with landscape orientation
await playwright_resize({ device: "iPad Pro 11", orientation: "landscape" });

// Test desktop view
await playwright_resize({ device: "Desktop Chrome" });

AI アシスタント向けの自然言語サポート：

• "iPhone 13 でテスト"

• "iPad ビューに切り替え"

• "横向きに回転"

対応デバイスは 143 種類： iPhone、iPad、Pixel、Galaxy、デスクトップブラウザなどに対応し、ビューポート、ユーザーエージェント、タッチイベント、デバイスのピクセル比を適切にエミュレーションします。

📚 デバイスのクイックリファレンス | プロンプトガイド

Related MCP server: Cloudflare Playwright MCP

スクリーンショット

ドキュメント | API リファレンス

インストール

パッケージは、npm、mcp-get、Smithery のいずれかでインストールできます。

npm を使用する場合：

npm install -g @executeautomation/playwright-mcp-server

mcp-get を使用する場合：

npx @michaellatman/mcp-get@latest install @executeautomation/playwright-mcp-server

Smithery を使用する場合

Smithery を使用して、Claude Desktop 用の Playwright MCP を自動インストールするには：

npx @smithery/cli install @executeautomation/playwright-mcp-server --client claude

Claude Code を使用する場合：

claude mcp add --transport stdio playwright npx @executeautomation/playwright-mcp-server

VS Code へのインストール

以下のいずれかのボタンで、VS Code に Playwright MCP サーバーをインストールできます：

または、VS Code の CLI を使用して Playwright MCP サーバーをインストールすることもできます：

# For VS Code
code --add-mcp '{"name":"playwright","command":"npx","args":["@executeautomation/playwright-mcp-server"]}'

# For VS Code Insiders
code-insiders --add-mcp '{"name":"playwright","command":"npx","args":["@executeautomation/playwright-mcp-server"]}'

インストール後は、VS Code の GitHub Copilot エージェントで ExecuteAutomation Playwright MCP サーバーを利用できるようになります。

ブラウザのインストール

自動インストール（推奨）

Playwright MCP Server は、初回利用時にブラウザのバイナリーを自動的にインストールします。ブラウザーが不足していることをサーバーが検出すると、次のように動作します。

1. 必要なブラウザ（Chromium、Firefox、WebKit）を自動的にダウンロードしてインストールします。

2. インストールの進行状況をコンソールに表示します。

3. インストール完了後、リクエストを再試行します。

手動セットアップは不要です。 サーバーを使い始めるだけで、ブラウザのインストールはサーバーが処理します。

手動インストール（オプション）

ブラウザを手動でインストールしたい場合や、自動インストールで問題が発生した場合：

# Install all browsers
npx playwright install

# Or install specific browsers
npx playwright install chromium
npx playwright install firefox
npx playwright install webkit

ブラウザーの保存場所

ブラウザは次の場所にインストールされます：

• Windows: %USERPROFILE%\AppData\Local\ms-playwright

• macOS: ~/Library/Caches/ms-playwright

• Linux: ~/.cache/ms-playwright

Playwright Server を使用するための設定

標準モード（stdio）

これはClaude Desktop で推奨されるモードです。

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

注： stdio モードでは、クリーンな JSON-RPC 通信を維持するため、ログは自動的にファイルのみ（コンソールには出力しない）に振り向けられます。ログは ~/playwright-mcp-server.log に書き込まれます。

HTTP モード（スタンドアロン サーバー）

ディスプレイのないシステムでヘッド付きブラウザを実行する場合や、IDE のワーカープロセスから実行する場合は、MCP サーバーをスタンドアロンの HTTP サーバーとして実行できます。

Claude Desktop ユーザーへの注意： Claude Desktop は現在 stdio モード（command/args 設定）を必要とします。HTTP モードは VS Code、カスタムクライアント、リモートデプロイで推奨されます。詳細は CLAUDE_DESKTOP_CONFIG.md を参照してください。

HTTP サーバーの起動

# Using npx
npx @executeautomation/playwright-mcp-server --port 8931

# Or after global installation
playwright-mcp-server --port 8931

サーバーが起動すると、利用可能なエンドポイントが表示されます：

==============================================
Playwright MCP Server (HTTP Mode)
==============================================
Port: 8931

ENDPOINTS:
- SSE Stream:     GET  http://localhost:8931/sse
- Messages:       POST http://localhost:8931/messages?sessionId=<id>
- MCP (unified):  GET  http://localhost:8931/mcp
- MCP (unified):  POST http://localhost:8931/mcp?sessionId=<id>
- Health Check:   GET  http://localhost:8931/health
==============================================

HTTP モードのクライアント設定

重要： HTTP/SSE トランスポートには、"type": "http" フィールドが必須です。

VS Code の GitHub Copilot の場合：

{
  "github.copilot.chat.mcp.servers": {
    "playwright": {
      "url": "http://localhost:8931/mcp",
      "type": "http"
    }
  }
}

カスタム MCP クライアントの場合：

{
  "mcpServers": {
    "playwright": {
      "url": "http://localhost:8931/mcp",
      "type": "http"
    }
  }
}

重要： "type": "http" がないと、接続が失敗します。

Claude Desktop の場合： 代わりに stdio モード（上記の標準モード）を使用してください。

HTTP モードのユースケース

• ディスプレイのないシステムで、ヘッド付きブラウザを実行する

• VS Code の GitHub Copilot と連携する

• バックグラウンド サービスとしてサーバーを実行する

• 複数のクライアントからサーバーにアクセスする

• /health エンドポイントを使用したデバッグ

• カスタム MCP クライアントとの統合

モニタリング： サーバーには、動的に割り当てられたポート（競合回避）で起動するモニタリング システムが含まれています。実際のポートはコンソール出力で確認してください。

注： Claude Desktop では、引き続き stdio モード（上記の標準モード）を使用してください。

トラブルシューティング

「No transport found for sessionId」エラー

症状： 「Bad Request: No transport found for sessionId」というメッセージの 400 エラーの場合

解決策：

1. 設定名に "type": "http" が含まれていることを確認する

{
  "url": "http://localhost:8931/mcp",
  "type": "http"  // ← This is REQUIRED!
}

2. サーバーログに接続がログインされていることを確認する

# Should see these in order:
# 1. "Incoming request" - GET /mcp
# 2. "Transport registered" - with sessionId
# 3. "POST message received" - with same sessionId

3. サーバーとクライアントの両方を再起動する

接続の問題

• サーバーが起動しない： ポート 8931 が利用可能か確認

• 外部アクセスがブロックされる： これは設計によるものです（セキュリティ）。サーバーは localhost のみにバインドされます

• リモートアクセスの場合： SSH トンネルを使用します：

ssh -L 8931:localhost:8931 user@remote-server

Gigwrap: This project uses Jest for？ Wait, correct. Original "テスト"

テスト

このプロジェクトは Jest を使用してテストを実行します。テストは src/__tests__ ディレクトリにあります。

テストの実行

次のいずれかのコマンドでテストを実行できます：

# Run tests using the custom script (with coverage)
node run-tests.cjs

# Run tests using npm scripts
npm test           # Run tests without coverage
npm run test:coverage  # Run tests with coverage
npm run test:custom    # Run tests with custom script (same as node run-tests.cjs)

テストカバレッジレポートは coverage ディレクトリに生成されます。

evals の実行

evals パッケージは、mcp クライアントをロードしてから index.ts ファイルを実行するため、テストの間に再ビルドする必要はありません。npx コマンドの前に環境変数を付加することで、環境変数を読み込むことができます。完全なドキュメントは こちら をご覧ください。

OPENAI_API_KEY=your-key  npx mcp-eval src/evals/evals.ts src/tools/codegen/index.ts

貢献

新しいツールを追加するときは、ツール名の長さに注意してください。Cursor のような一部のクライアントは、サーバー名とツール名を組み合わせた名前（server_name:tool_name）に 60 文字の制限があります。

当サーバーの名前は playwright-mcp です。ツール名が制限を超えないよう、十分に短くしてください。

スター履歴