MCP Playwright：ブラウザの自動化操作を提供するMCPサービス

はじめに

MCP-Playwrightは、ExecuteAutomationによって開発され、GitHubでホストされているオープンソースツールです。Playwrightと モデル・コンテキスト・プロトコル (エムシーピー)プロトコルを採用し、自然言語コマンドによるブラウザ自動化やAPIテストの実装を可能にしている。このツールは、開発者とテスターの両方に適しており、次のような接続が可能です。 クロード や他の大規模言語モデル（LLM）を使って、ウェブページを開いたり、ボタンをクリックしたり、フォームに入力したり、スクリーンショットを撮ったり、APIリクエストを送信したりといったブラウザのアクションを、シンプルなテキストで制御することができる。ユーザーが複雑なコードを書く必要がないため、利用の敷居が低くなる。このプロジェクトは現在開発段階にあり、機能は徐々に改善されています。

機能一覧

• ブラウザ・オートメーション特定のウェブページへの移動、要素のクリック、入力ボックスへの入力、ドロップダウンメニューの選択などをサポートします。
• APIテストGET、POST、PUT、PATCH、DELETEリクエストを送信し、レスポンスを検査することができる。
• スクリーンショット機能ウェブページ全体、または特定の領域を傍受し、画像として保存することができます。
• JavaScriptの実行ブラウザ上でカスタムJavaScriptコードを実行する機能。
• コンソールログの取得ブラウザからエラー、警告、デバッグ情報を抽出します。
• 自然言語制御MCPプロトコルでクロードなどと接続し、テキストコマンドで操作する。

ヘルプの使用

MCP-Playwrightを使用するには、簡単なインストールと設定が必要です。以下は、すぐに使い始めるための詳しい手順です。

設置プロセス

このツールを実行するには、環境を整え、関連するコンポーネントをインストールする必要がある。以下はその方法の詳細である：

1. 環境のチェック
   • お使いのコンピューターにNode.jsがインストールされていることを確認してください（最新の安定版を推奨します）。
   • クロード・デスクトップ・クライアントなどのMCP対応クライアントが必要です。
   • コードをダウンロードするためにGitをインストールする（オプション）。
2. ダウンロードプロジェクト（オプションの手動インストール）
   • ターミナルを開いて実行する：

     git clone https://github.com/executeautomation/mcp-playwright.git
     

   • プロジェクト・カタログにアクセスする：

     cd mcp-playwright
     

3. 依存関係のインストール
   • プロジェクト・ディレクトリで実行する：

     npm install
     

   • これでPlaywrightとその他の必要なコンポーネントがインストールされる。
4. npm経由で直接インストールする（推奨）
   • 手動でダウンロードするのが面倒なら、実行すればいい：

     npm install -g @executeautomation/playwright-mcp-server
     

   • これでサーバーがグローバルにインストールされる。
5. スミザリー経由のインストール（クロードデスクトップ用）
   • 以下のコマンドを実行して、自動的にインストールと設定を行う：

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

6. クロードデスクトップの設定
   • クロードデスクトップのコンフィギュレーションファイルを探します。 claude-desktop-config.json).
   • 以下を追加する：

     {
     "mcpServers": {
     "playwright": {
     "command": "npx",
     "args": ["-y", "@executeautomation/playwright-mcp-server"]
     }
     }
     }
     

   • Claude Desktop を保存して再起動すると、"Attach from MCP" ボタンがインターフェイスに表示されます。

使用方法

インストールが完了したら、自然言語コマンドを使ってブラウザを操作したり、APIをテストしたりできる。

ブラウザ・オートメーション

• ページを開く
  クロードデスクトップで入場：

打开网页 https://example.com

このツールはブラウザを起動し、ページをロードする。

• 要素のクリック
  インプット：

点击页面上的登录按钮，使用选择器 #loginBtn

IDを見つける loginBtn ボタンをクリックする。

• フォームに記入
  インプット：

在用户名输入框填写 "admin"，使用选择器 #username
在密码输入框填写 "123456"，使用选择器 #password

このツールは自動的に内容を入力する。

• スクリーンショット
  インプット：

截取整个网页，保存为 "page.png"

スクリーンショットはカレントディレクトリに保存される。

• JavaScriptの実行
  インプット：

在浏览器中执行 JavaScript 代码 "document.title"

ページのタイトルを返します。

• ログの取得
  インプット：

获取浏览器控制台日志，只显示错误信息

ツールはエラーログを返す。

APIテスト

• GETリクエストの送信
  インプット：

对 https://api.example.com/data 发送 GET 请求

ステータスコードとデータを返す。

• POSTリクエストの送信
  インプット：

对 https://api.example.com/users 发送 POST 请求，数据为 {"name": "TestUser"}
检查响应中包含 "id"

ツールは結果を検証する。

• 更新データ
  インプット：

对 https://api.example.com/users/1 发送 PUT 请求，数据为 {"name": "NewUser"}

データは更新される。

動作例

ログイン・プロセスをテストしたいとする：

1. インプット：

打开网页 http://eaapp.somee.com

2. インプット：

点击页面上的登录链接，使用选择器 #loginLink

3. インプット：

在用户名输入框填写 "admin"，使用选择器 #username
在密码输入框填写 "password"，使用选择器 #password
点击登录按钮，使用选择器 #loginBtn

4. インプット：

截取整个网页，保存为 "login_result.png"

5. インプット：

关闭浏览器

すべてのプロセスは自然言語を通じて行われ、シンプルで直感的だ。

テストツール

このプロジェクトではテストにJestを使っている。機能を検証したい場合は、テストを実行することができます：

• それをターミナルに入力する：

npm test

• バンドカバレッジレポート：

  npm run test:coverage
  

テストレポートは coverage カタログ

ほら

• 複雑な認証リクエスト（OAuthなど）は、現在このツールではサポートされていません。
• 問題が発生した場合は、https://executeautomation.github.io/mcp-playwright/ の公式ドキュメントを確認してください。
• このプロジェクトはオープンソースであり、フォークして改善のための提案を提出することができる。