Playwright Plus Python MCP

🚀 Playwright 服務器 MCP 服務器

本項目的 MCP 服務器集成了 playwright 工具，實現了簡單的筆記存儲系統，同時提供了一系列實用工具及提示功能，可助力開發者高效開展相關工作。

🚀 快速開始

安裝

Claude Desktop

在 MacOS 上：~/Library/Application\ 支持/Claude/claude_desktop_config.json 在 Windows 上：%APPDATA%/Claude/claude_desktop_config.json%

{
  "playwright": {
    "server": {
      "port": 3000,
      "host": "localhost"
    }
  }
}

{
  "playwright": {
    "server": {
      "port": 80,
      "host": "0.0.0.0"
    }
  }
}

開發流程

克隆倉庫

使用以下命令克隆 Playwright 服務器倉庫：

git clone https://github.com/your-username/playwright-server.git
cd playwright-server

安裝依賴項

運行以下命令安裝項目所需的依賴項：

npm install

啟動開發服務器

使用以下命令啟動 Playwright 服務器：

npm run dev

打包和構建

要打包和構建生產版本，請運行以下命令：

npm run build

調試

為了調試，您可以訪問以下端點：

• API 文檔：/api/docs
• 性能監控：/api/healthz

要使用 MCP Inspector 進行調試，請按照以下步驟操作：

1. 安裝 MCP Inspector：

npm install -g @playwright/mcp-inspector

2. 啟動 MCP Inspector 以分析 Playwright 服務器：

mcp-inspect http://localhost:3000

這樣，您就可以在 MCP Inspector 的用戶界面中查看和分析 Playwright 服務器的性能。

✨ 主要特性

組件

資源

該服務器實現了一個簡單的筆記存儲系統，具有以下特點：

• 自定義 note:// URI 方案用於訪問單個筆記。
• 每個筆記資源包含名稱、描述和 text/plain MIME 類型。

提示

該服務器提供一個提示：

• summarize-notes：生成所有存儲筆記的摘要。
  • 可選 "style" 參數來控制詳細程度（簡短/詳細）。
  • 根據當前風格偏好生成組合所有當前筆記的提示。

工具

該服務器實現以下工具：

• playwright_navigate：導航到指定 URL。如果沒有活動會話，此操作將自動創建新會話。
  • 需要一個 url 參數（字符串）。
• playwright_screenshot：拍攝當前頁面或特定元素的截圖。
  • 需要一個 name 參數（字符串）作為截圖文件名。
  • 可選 selector 參數（字符串）來指定 CSS 選擇器以截取特定元素的截圖。如果沒有提供選擇器，則會拍攝全頁截圖。
• playwright_click：點擊頁面上的某個元素，使用 CSS 選擇器定位。
  • 需要一個 selector 參數（字符串）來指定需要點擊的元素的 CSS 選擇器。
• playwright_fill：填寫輸入字段。
  • 需要一個 selector 參數（字符串）來指定輸入字段的 CSS 選擇器。
  • 需要一個 value 參數（字符串）來指定要填充的值。
• playwright_evaluate：在瀏覽器控制檯中執行 JavaScript 代碼。
  • 需要一個 script 參數（字符串）來指定要執行的 JavaScript 代碼。
• playwright_click_text：通過文本內容點擊頁面上的某個元素。
  • 需要一個 text 參數（字符串）來指定需要點擊的元素的文本內容。
• playwright_get_text_content：獲取所有可見元素的文本內容。
• playwright_get_html_content：獲取頁面的 HTML 內容。
  • 需要一個 selector 參數（字符串）來指定元素的 CSS 選擇器。

🔧 技術細節

調試

為了方便調試，服務器提供了以下端點：

• API 文檔：/api/docs，可通過該端點查看詳細的 API 信息。
• 性能監控：/api/healthz，用於監控服務器的性能狀況。

同時，還可以使用 MCP Inspector 進行調試，具體步驟如下：

1. 安裝 MCP Inspector：

npm install -g @playwright/mcp-inspector

2. 啟動 MCP Inspector 以分析 Playwright 服務器：

mcp-inspect http://localhost:3000

通過以上操作，您可以在 MCP Inspector 的用戶界面中查看和分析 Playwright 服務器的性能。