MCP Server Playwright

MCP Server Playwright

目次

• 機能
• インストール
• 設定
• コンポーネント
• ツール
• リソース
• ライセンス

機能

• 🌐 ブラウザー自動化の包括的な機能
• 📸 ページ全体または特定の要素のスクリーンショットを撮影
• 🖱️ 包括的なウェブ操作（ナビゲーション、クリック、フォームへの入力）
• 📊 コンソールログの監視
• 🔧 ブラウザーコンテキストでの JavaScript 実行

インストール

Smithery 経由でインストールする

Smithery 経由で Claude Desktop 用の MCP Server Playwright を自動的にインストールするには：

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

npx または mcp-get を使用してパッケージをインストールできます：

npx を使用する場合：

npx @automatalabs/mcp-server-playwright install

このコマンドは、次の処理を行います：

• オペレーティングシステムの互換性（Windows/macOS）を確認します
• Claude 設定ファイルを作成または更新します
• Playwright サーバーの連携を設定します

設定ファイルは次の場所に自動的に作成または更新されます：

• Windows：%APPDATA%\Claude\claude_desktop_config.json
• macOS：~/Library/Application Support/Claude/claude_desktop_config.json

mcp-get を使用する場合：

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

設定

インストール処理によって、次の設定が Claude 設定ファイルに自動的に追加されます：

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

コンポーネント

ツール

browser_navigate

ブラウザーで任意の URL に移動します

{
  "url": "https://stealthbrowser.cloud"
}

browser_screenshot

ページ全体または特定の要素のスクリーンショットを撮影します

{
  "name": "screenshot-name",     // required
  "selector": "#element-id",     // optional
  "fullPage": true              // optional, default: false
}

browser_click

CSS セレクターを使用してページ上の要素をクリックします

{
  "selector": "#button-id"
}

browser_click_text

テキストコンテンツを指定してページ上の要素をクリックします

{
  "text": "Click me"
}

browser_hover

CSS セレクターを使用してページ上の要素にカーソルを合わせます

{
  "selector": "#menu-item"
}

browser_hover_text

テキストコンテンツを指定してページ上の要素にカーソルを合わせます

{
  "text": "Hover me"
}

browser_fill

入力フィールドに入力します

{
  "selector": "#input-field",
  "value": "Hello World"
}

browser_select

CSS セレクターを使用して SELECT 要素のオプションを選択します

{
  "selector": "#dropdown",
  "value": "option-value"
}

browser_select_text

テキストコンテンツを指定して SELECT 要素のオプションを選択します

{
  "text": "Choose me",
  "value": "option-value"
}

browser_evaluate

ブラウザーのコンソールで JavaScript を実行します

{
  "script": "document.title"
}

リソース

コンソールログ（console://logs）

• ブラウザーのコンソール出力にテキスト形式でアクセスします
• ブラウザーからのすべてのコンソールメッセージが含まれます

スクリーンショット（screenshot://）

• 撮影したスクリーンショットの PNG 画像にアクセスします
• 撮影時に指定した名前で参照できます

ライセンス

MIT ライセンス