MCP Server Playwright Hdj

🚀 MCP サーバー Playwright

このプロジェクトは、Claude デスクトップでの全ブラウザ自動化を可能にする MCP サーバー Playwright を提供します。全ブラウザ自動化、スクリーンショットの取得、ウェブページとの相互作用などの機能を備えています。

🚀 クイックスタート

以下のセクションでは、MCP サーバー Playwright の機能、インストール方法、設定、コンポーネント、ツール、リソース、ライセンスについて説明します。

✨ 主な機能

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

📦 インストール

Smithery を使用したインストール

Smithery を使用して、Claude デスクトップに 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",     // 必須
  "selector": "#element-id",     // オプション
  "fullPage": true              // オプション、デフォルト：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

SELECT 要素でオプションを選択します（CSS セレクタを使用）。

{
  "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 形式で取得したスクリーンショットにアクセスします。
• 取得時に指定した名前で参照します。

📄 ライセンス

原ドキュメントにライセンスの具体的な内容が記載されていないため、このセクションは省略されています。