什麼是Playwright-MCP?

Playwright-MCP是一個模型上下文協議（MCP）服務器，通過它，您的AI助手可以即時訪問瀏覽器頁面的DOM結構、截圖和交互，從而生成更準確、穩定的Playwright測試代碼。

如何使用Playwright-MCP?

安裝後，只需在支持MCP的IDE或AI助手（如Cursor、Claude）中配置服務器，即可開始生成高質量的Playwright測試代碼。

適用於需要快速生成穩定Playwright測試的開發人員，尤其是那些依賴AI助手編寫測試代碼的團隊。

錄製交互記錄用戶的點擊、輸入等操作，並將其轉化為Playwright測試代碼。

截圖功能捕捉整個頁面或特定元素的截圖，幫助AI助手更好地理解頁面佈局。

提取DOM結構獲取頁面完整的HTML結構，用於生成精確的定位器。

執行JavaScript運行自定義JavaScript代碼，用於調試或自動化任務。

優勢

生成的測試代碼更加穩定可靠

顯著提高測試腳本編寫速度

減少人工干預和調試時間

侷限性

需要安裝Node.js環境

可能對低性能設備造成一定壓力

安裝Playwright-MCP

確保已安裝Node.js，然後全局安裝Playwright-MCP：`npm install -g playwright-mcp`。

連接到IDE

打開支持MCP的IDE（如Cursor），配置Playwright-MCP服務器。

驗證配置

在IDE中測試是否成功連接到Playwright-MCP，例如運行`get-screenshot`命令。

案例1：錄製按鈕點擊記錄用戶點擊按鈕的操作，並生成對應的Playwright代碼。

案例2：提取DOM結構提取當前頁面的完整HTML結構，用於生成精準定位器。

Playwright-MCP支持哪些IDE？

如何檢查Playwright-MCP是否正常工作？

Playwright-MCP是否免費使用？

playwright-mcp 是一款能讓你的 AI 助手擁有超能力的工具，它可以讓 AI 完全“看清”你的網頁，從而幫助你更高效、穩定地編寫 Playwright 測試。

在終端中運行以下命令進行全局安裝：

npm install -g playwright-mcp

更新配置文件

添加以下內容：

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "playwright-mcp"]
    }
  }
}

重啟 Cursor
驗證是否正常工作
- 在 Cursor 中輸入以下命令：
```
list available mcp tools
```
- 如果安裝正確，應該會看到工具列表：
  1. get-context
  2. get-full-dom
  3. get-screenshot
  4. execute-code
  5. init-browser
  6. validate-selectors

現在，Cursor 已經連接到瀏覽器，並且可以編寫高度上下文相關的測試！瞭解更多，請參閱 Cursor 教程。

安裝 playwright-mcp
```
npm install -g playwright-mcp
```
更新配置文件
- 找到配置文件：
  - Windows: %APPDATA%\Claude\claude_desktop_config.json
  - macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
- 更新為以下內容：
```
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "playwright-mcp"]
    }
  }
}
```
重啟 Claude Desktop
驗證是否正常工作
- 在 Claude 中輸入以下命令：
```
list available mcp tools
```
- 如果安裝正確，應該會看到工具列表：
  1. get-context
  2. get-full-dom
  3. get-screenshot
  4. execute-code
  5. init-browser
  6. validate-selectors