MCP

🚀 Playwright MCP Server 🎭

Playwright MCP Server 是一個基於 Model Context Protocol 的服務器，藉助 Playwright 提供瀏覽器自動化功能。該服務器能讓大語言模型（LLMs）與網頁進行交互，實現截圖、生成測試代碼、網頁數據抓取以及在真實瀏覽器環境中執行 JavaScript 等操作。

特別感謝

特別感謝 Warp，開發者的 AI 終端，它支持 MacOS、Linux 和 Windows 系統。

截圖展示

文檔與 API 參考

• 文檔
• API 參考

🚀 快速開始

以下將詳細介紹 Playwright MCP Server 的安裝、配置、測試等內容。

✨ 主要特性

• 支持大語言模型（LLMs）與網頁交互。
• 具備截圖、生成測試代碼、網頁數據抓取和執行 JavaScript 等功能。
• 支持多種安裝方式，包括 npm、mcp-get 和 Smithery。
• 可在 VS Code 中方便地安裝和使用。

📦 安裝指南

你可以使用 npm、mcp-get 或 Smithery 來安裝該軟件包：

使用 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 服務器：

• 使用按鈕安裝（鏈接如下）：

  • 安裝鏈接 1
  • 安裝鏈接 2

• 使用 VS Code CLI 安裝：

# 對於 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 代理配合使用。

📚 詳細文檔

配置 Playwright 服務器

以下是在 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

項目星標歷史