MCP

🚀 Playwright MCP Server 🎭

Playwrightを使用してブラウザ自動化機能を提供するModel Context Protocolサーバーです。このサーバーにより、LLMはウェブページと対話し、スクリーンショットを撮り、テストコードを生成し、ウェブページをスクレイピングし、実際のブラウザ環境でJavaScriptを実行することができます。

✨ 主な機能

• ブラウザ自動化機能を提供し、LLMがウェブページと対話できるようにする。
• スクリーンショットの撮影、テストコードの生成、ウェブページのスクレイピング、JavaScriptの実行が可能。

📦 インストール

以下のいずれかの方法でパッケージをインストールできます。

npmを使用する場合

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

mcp-getを使用する場合

npx @michaellatman/mcp-get@latest install @executeautomation/playwright-mcp-server

Smitheryを使用する場合

Smitheryを介して、Claude Desktop用のPlaywright MCPを自動的にインストールするには、以下のコマンドを実行します。

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

VS Codeでのインストール

以下のボタンのいずれかを使用して、VS CodeにPlaywright MCPサーバーをインストールします。

または、VS Code CLIを使用してPlaywright MCPサーバーをインストールすることもできます。

# VS Codeの場合
code --add-mcp '{"name":"playwright","command":"npx","args":["@executeautomation/playwright-mcp-server"]}'

# VS Code Insidersの場合
code-insiders --add-mcp '{"name":"playwright","command":"npx","args":["@executeautomation/playwright-mcp-server"]}'

インストール後、ExecuteAutomation Playwright MCPサーバーはVS Code内のGitHub Copilotエージェントで使用できるようになります。

📚 ドキュメント

• ドキュメント
• APIリファレンス

🔧 設定

Claude DesktopでPlaywrightサーバーを使用するための設定は以下の通りです。

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

💻 使用例

テストの実行

このプロジェクトでは、Jestを使用してテストを行っています。テストコードはsrc/__tests__ディレクトリにあります。

テストの実行方法

以下のコマンドのいずれかを使用してテストを実行できます。

# カスタムスクリプトを使用してテストを実行（カバレッジ付き）
node run-tests.cjs

# npmスクリプトを使用してテストを実行
npm test           # カバレッジなしでテストを実行
npm run test:coverage  # カバレッジ付きでテストを実行
npm run test:custom    # カスタムスクリプトでテストを実行（node run-tests.cjsと同じ）

テストカバレッジレポートはcoverageディレクトリに生成されます。

評価の実行

評価パッケージはmcpクライアントを読み込み、index.tsファイルを実行するため、テスト間で再構築する必要はありません。npxコマンドに環境変数をプレフィックスすることで、環境変数を読み込むことができます。詳細なドキュメントはこちらにあります。

OPENAI_API_KEY=your-key  npx mcp-eval src/evals/evals.ts src/tools/codegen/index.ts

📷 スクリーンショット

⭐️ スター履歴