Playwright Web Browser

🚀 Playwright MCP サーバー

English | 日本語

このプロジェクトは、Model Context Protocol (MCP) を使用して、Playwright を用いたウェブページの内容検索機能を提供するサーバーです。

✨ 主な機能

• ページナビゲーション
• 全ページ内容検索
• 可視内容検索
• インタラクティブ要素検出
• マウス操作のシミュレーション
• テストケースのエコー機能

📦 インストール

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

Smithery を通じて、Playwright MCP Server for Claude Desktop を自動でインストールします。

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 }
   • 戻り値: 送信されたメッセージ

🔧 開発

テストの実行

# すべてのテストを実行
npm test

# 監視モードでテストを実行
npm run test:watch

# カバレッジレポートを生成
npm run test:coverage

テスト構造

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

🔧 技術詳細

1. 内容検索
   • 全ページ内容検索
   • 可視内容のみの検索
   • 正しい HTML 解析
2. インタラクティブ操作
   • インタラクティブ要素の検出と位置情報の取得
   • マウス操作のシミュレーション（移動、クリック、スクロール）
   • ドラッグアンドドロップのサポート
3. エラー処理
   • 正しいナビゲーションエラーの処理
   • タイムアウト処理
   • 無効な URL の検出
4. 柔軟な設定
   • ヘッドレスモードとヘッドフルモードの選択
   • カスタムユーザーエージェント
   • ビューポートサイズの設定

📄 注意事項

⚠️ 重要提示

• MCP サーバーを使用する前に、環境変数が正しく設定されていることを確認してください。
• 対象ウェブサイトのサービス利用規約に従って内容を検索してください。
• 複数のリクエストを送信する場合は、適切な間隔を空けてください。
• マウス操作を実行する場合は、実際のユーザーインタラクションを模倣するために適切な時間間隔を空けてください。

📄 ライセンス

ISC