Playwright MCP Server

Playwright MCP Server

English | 日本語

このプロジェクトは、Model Context Protocol（MCP）を使用して、Playwright による Web ページコンテンツの取得機能を提供するサーバーです。

機能

• ページのナビゲーション
• ページ全体のコンテンツ取得
• 表示中のコンテンツ取得
• インタラクティブ要素の検出
• マウス操作のシミュレーション
• テスト用のエコー機能

インストール

Smithery 経由でのインストール

Smithery 経由で、Claude Desktop 用の Playwright MCP Server を自動的にインストールするには、次の手順を実行します。

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

手動インストール

npm install

使用方法

サーバーの起動

npm run build
npm start

MCP ツール

次のツールを利用できます。

1. navigate

   • 指定した URL に移動します
   • 引数：{ url: string }
   • 戻り値：ナビゲーション結果

2. get_all_content

   • ページ全体のコンテンツを取得します
   • 引数：なし
   • 戻り値：ページ上のすべてのテキストコンテンツ

3. get_visible_content

   • 現在表示されているコンテンツを取得します
   • 引数：{ minVisiblePercentage?: number }
   • 戻り値：表示中のテキストコンテンツ

4. get_interactive_elements

   • ページ上のインタラクティブ要素（ボタン、リンクなど）の位置情報を取得します
   • 引数：なし
   • 戻り値：インタラクティブ要素の座標と境界情報

5. move_mouse

   • マウスカーソルを指定した座標に移動します
   • 引数：{ x: number, y: number }
   • 戻り値：操作結果

6. mouse_click

   • 指定した座標でマウスクリックを実行します
   • 引数：{ x: number, y: number, button?: "left" | "right" | "middle", clickCount?: number }
   • 戻り値：クリック操作の結果

7. mouse_wheel

   • マウスホイールによるスクロールを実行します
   • 引数：{ deltaY: number, deltaX?: number }
   • 戻り値：スクロール操作の結果

8. drag_and_drop

   • ドラッグ＆ドロップ操作を実行します
   • 引数：{ sourceX: number, sourceY: number, targetX: number, targetY: number }
   • 戻り値：ドラッグ＆ドロップ操作の結果

9. echo

   • テスト用のエコーツールです
   • 引数：{ message: string }
   • 戻り値：送信されたメッセージ

開発

テストの実行

# Run all tests
npm test

# Run tests in watch mode
npm run test:watch

# Generate coverage report
npm run test:coverage

テスト構成

• tools/*.test.ts：各ツールの関数テスト
• mcp-server.test.ts：MCP サーバーの関数テスト

実装上の機能

1. コンテンツの取得

   • ページ全体のコンテンツ取得
   • 表示中のコンテンツのみ取得
   • 適切な HTML 解析

2. インタラクション

   • インタラクティブ要素の検出と位置情報の取得
   • マウス操作のシミュレーション（移動、クリック、スクロール）
   • ドラッグ＆ドロップのサポート

3. エラー処理

   • 適切なナビゲーションエラー処理
   • タイムアウト処理
   • 無効な URL の検出

4. 柔軟な設定

   • ヘッドレスモード／ヘッドモードの選択
   • カスタムユーザーエージェント
   • ビューポートサイズの設定

重要な注意事項

• MCP サーバーを使用する前に、必要な環境変数が設定されていることを確認してください
• Web ページのコンテンツを取得する際は、対象 Web サイトの利用規約に従ってください
• 複数のリクエストを送信する場合は、適切な間隔を空けてください
• マウス操作は実際のユーザー操作をシミュレートするため、適切な間隔を空けてください

ライセンス

ISC