Playwright MCP Server Bp6

これはModel Context Protocol (MCP)に基づくPlaywrightウェブページ内容取得サービスで、ウェブページのナビゲーション、内容収集、インタラクション要素検出、マウス操作シミュレーションなどの機能を提供します。

ブラウザ自動化開発者ツール #ウェブ収集 #自動テスト #インタラクションシミュレーション #MCPサービス .TypeScript

rating : 2 points

downloads : 14

update time : 2025-04-23

Playwright MCPサーバーとは？

Playwright MCPサーバーは、Playwrightに基づくウェブ自動化ツールサーバーで、標準化されたModel Context Protocol (MCP)プロトコルを通じてウェブページ内容の取得とインタラクション機能を提供します。ユーザーはAPI呼び出しを通じてブラウザの動作を制御でき、指定のページにナビゲートしたり、ページ内容を抽出したり、ページ要素とのインタラクションを行ったりすることができます。

Playwright MCPサーバーの使い方は？

簡単なAPI呼び出しまたは提供されたコマンドラインツールを使用してサーバーとやり取りすることができます。まずサーバーをインストールして起動し、MCPプロトコルに準拠したリクエストを送信することで、さまざまなウェブ操作タスクを実行できます。

適用シーン

ウェブページの自動操作が必要なシーン、例えばウェブページ内容の収集、自動テスト、データ収集、ウェブページ監視などに適しています。特にウェブページとのインタラクションを伴う内容取得タスクに最適です。

主な機能

ページナビゲーション指定のURLアドレスにナビゲートし、ページの読み込みが完了するまで待機できます。

内容抽出ページ全体または可視領域のみの内容を抽出することをサポートし、特定の要素を含めるまたは除外することができます。

インタラクション要素検出ページ上のクリック可能な要素（ボタン、リンクなど）を自動検出し、その位置情報を提供します。

マウス操作シミュレーションマウスの移動、クリック、スクロール、ドラッグアンドドロップなどの操作をシミュレートすることをサポートし、実際のユーザーのインタラクションを再現します。

テストツールechoなどのテストツールを提供し、サーバー機能のデバッグと検証を容易にします。

利点と制限

利点

Playwrightに基づいているため、SPAなどの最新のウェブ技術をサポートします。

実際のブラウザ環境を提供するため、反クローラーメカニズムに検出されるリスクを低減します。

様々なインタラクション操作をサポートし、実際のユーザーの行動をシミュレートします。

MCPプロトコルによる標準化されたインターフェースを提供するため、統合が容易です。

制限

ブラウザインスタンスを実行する必要があるため、リソース消費が大きいです。

複雑なウェブページでは、待機時間パラメータを調整する必要がある場合があります。

一部の高度な機能には特定の設定が必要です。

使い方

サーバーをインストールする

Smitheryを通じて自動インストールするか、手動でインストールすることができます。

サーバーを起動する

MCPサーバーをビルドして起動します。

リクエストを送信する

MCPプロトコルを使用してサーバーにリクエストを送信し、必要な操作を実行します。

使用例

ニュースサイトの内容を取得するニュースサイトのトップページの可視内容を自動的に取得します。

ユーザーログインをシミュレートするログインフォームを自動的に入力して送信します。

商品情報を収集する電子商取引サイトから特定の商品の価格と説明を収集します。

よくある質問

サーバーはどのブラウザをサポートしていますか？

ログインが必要なサイトをどのように処理しますか？

サーバーを実行するにはどのような環境が必要ですか？

内容取得の精度をどのように向上させますか？

🚀 Playwright MCP サーバー

English | 日本語

このプロジェクトは、モデルコンテキストプロトコル（MCP）を使用して、Playwright を用いたウェブページのコンテンツ検索機能を提供するサーバーです。

✨ 主な機能

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

📦 インストール

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

Smithery を通じて、Claude デスクトップ版の Playwright MCP サーバーを自動的にインストールします。

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

手動インストール

npm install

💻 使用例

サーバーの起動

npm run build
npm start

MCP ツール

以下のツールが利用可能です。

navigate
- 指定された URL にナビゲートします。
- パラメータ: { url: string }
- 戻り値: ナビゲーション結果
get_all_content
- ページ全体のコンテンツを検索します。
- パラメータ: なし
- 戻り値: ページ内のすべてのテキストコンテンツ
get_visible_content
- 現在の可視コンテンツを取得します。
- パラメータ: { minVisiblePercentage?: number }
- 戻り値: 現在可視のテキストコンテンツ
get_interactive_elements
- インタラクティブ要素（ボタン、リンクなど）の位置情報を取得します。
- パラメータ: なし
- 戻り値: ページ上のインタラクティブ要素の座標と境界情報
move_mouse
- マウスポインタを指定された座標に移動します。
- パラメータ: { x: number, y: number }
- 戻り値: 操作結果
mouse_click
- 指定された位置でマウスクリックを実行します。
- パラメータ: { x: number, y: number, button?: "left" | "right" | "middle", clickCount?: number }
- 戻り値: クリック操作結果
mouse_wheel
- マウスホイールのスクロールを実行します。
- パラメータ: { deltaY: number, deltaX?: number }
- 戻り値: スクロール操作結果
drag_and_drop
- ドラッグアンドドロップ操作を実行します。
- パラメータ: { sourceX: number, sourceY: number, targetX: number, targetY: number }
- 戻り値: ドラッグアンドドロップ操作結果
echo
- テストケースのエコーツールです。
- パラメータ: { message: string }
- 戻り値: 送信されたメッセージ

🔧 技術詳細

テストの実行

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

# ウォッチモードでテストを実行
npm run test:watch

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

テスト構造

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

実装の特徴

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