Playwright Plus Python MCP

🚀 Playwright サーバー MCP サーバー

Playwright ツールを搭載した MCP サーバーです。

✨ 主な機能

📦 リソース

このサーバーはシンプルなノート保存システムを実装しており、以下の機能を備えています。

• 個々のノートにアクセスするためのカスタム note:// URI スキーム
• 各ノートリソースには、名前、説明、text/plain MIME タイプが含まれています。

💡 プロンプト

このサーバーは以下のプロンプトを提供します。

• summarize-notes：保存されているすべてのノートの要約を生成します。
  • 詳細度を制御するためのオプション "style" パラメーター（簡潔/詳細）
  • 現在のスタイル設定に基づいて、すべてのノートを組み合わせたプロンプトを生成します。

🛠️ ツール

このサーバーは以下のツールを実装しています。

• playwright_navigate：指定された URL にナビゲートします。アクティブなセッションがない場合、自動的に新しいセッションが作成されます。
  • url パラメーター（文字列）が必要です。
• playwright_screenshot：現在のページまたは特定の要素のスクリーンショットを撮ります。
  • name パラメーター（文字列）をスクリーンショットのファイル名として指定する必要があります。
  • 特定の要素のスクリーンショットを撮るためのオプション selector パラメーター（文字列）を指定できます。指定しない場合は、全ページのスクリーンショットが撮られます。
• playwright_click：CSS セレクターを使用してページ上の要素をクリックします。
  • クリックする要素の CSS セレクターを指定する selector パラメーター（文字列）が必要です。
• playwright_fill：入力フィールドに値を入力します。
  • 入力フィールドの CSS セレクターを指定する selector パラメーター（文字列）が必要です。
  • 入力する値を指定する value パラメーター（文字列）が必要です。
• playwright_evaluate：ブラウザーのコンソールで JavaScript コードを実行します。
  • 実行する JavaScript コードを指定する script パラメーター（文字列）が必要です。
• playwright_click_text：テキスト内容を使用してページ上の要素をクリックします。
  • クリックする要素のテキスト内容を指定する text パラメーター（文字列）が必要です。
• playwright_get_text_content：すべての可視要素のテキスト内容を取得します。
• playwright_get_html_content：ページの HTML 内容を取得します。
  • 要素の CSS セレクターを指定する selector パラメーター（文字列）が必要です。

🚀 クイックスタート

📦 インストール

Claude Desktop

• MacOS：~/Library/Application\ 支持/Claude/claude_desktop_config.json
• Windows：%APPDATA%/Claude/claude_desktop_config.json%

{
  "playwright": {
    "server": {
      "port": 3000,
      "host": "localhost"
    }
  }
}

{
  "playwright": {
    "server": {
      "port": 80,
      "host": "0.0.0.0"
    }
  }
}

💻 開発

リポジトリのクローン

以下のコマンドを使用して Playwright サーバーのリポジトリをクローンします。

git clone https://github.com/your-username/playwright-server.git
cd playwright-server

依存関係のインストール

以下のコマンドを実行して、プロジェクトに必要な依存関係をインストールします。

npm install

開発サーバーの起動

以下のコマンドを使用して Playwright サーバーを起動します。

npm run dev

パッケージングとビルド

本番環境用のバージョンをパッケージングしてビルドするには、以下のコマンドを実行します。

npm run build

デバッグ

デバッグするには、以下のエンドポイントにアクセスできます。

• API ドキュメント：/api/docs
• パフォーマンスモニタリング：/api/healthz

MCP Inspector を使用してデバッグするには、以下の手順に従います。

1. MCP Inspector をインストールします。

npm install -g @playwright/mcp-inspector

2. Playwright サーバーを分析するために MCP Inspector を起動します。

mcp-inspect http://localhost:3000

これにより、MCP Inspector のユーザーインターフェイスで Playwright サーバーのパフォーマンスを表示および分析できます。