什么是 MCP？

MCP（Model Context Protocol） 是一種為大語言模型（LLM）設計的協議，MCP充當 LLM 與實際應用之間的橋梁或“翻譯器”，將自然語言轉化為結構化指令，使得模型可以更精確、高效地控制外部行為。

通過 MCP，大語言模型可以像調用 API 一樣發出導航、點擊、輸入等指令，并接收結構化反饋，極大增強了模型的上下文理解與操作能力。

什么是Playwright MCP

Playwright mcp是一個主要依賴于瀏覽器的可訪問樹的web自動化測試能力的MCP Server，它允許使用LLM大模型使用結構化命令控制網頁瀏覽器，從而可以快速且更準確的操作瀏覽器，非常適合網頁導航、表單填寫、數據提取和自動化測試等任務。

Playwright MCP 的主要優勢：

• ? 快速響應：基于結構化命令，交互更輕量
• ? 高確定性：避免自然語言歧義，執行結果更可靠
• ? 易于集成：適用于 Copilot、Cursor 等 AI 編程工具
• ? 便于調試：多客戶端可共享一個瀏覽器上下文

---

設置Playwright MCP Server

Prerequisites

• Node.js installed (v16 or later)
• Playwright installed

安裝

1. 安裝Playwright MCP

   npm install -g @playwright/mcp
   

2. 驗證安裝成功

   npx @playwright/mcp --version
   

3. 啟動mcp server

   npx @playwright/mcp@latest --port 8931
   

   服務啟動后可以看到以下輸出

---

在VS Code中通過Github Copilot集成

第一步：添加 MCP 服務

• 按下 Ctrl + Shift + P（macOS 為 Cmd + Shift + P）打開命令面板。

• 搜索并選擇：“MCP: Add MCP Server”。

• 選擇服務類型為 HTTP Server。

• 在 URL 輸入框中填寫 MCP Server 地址（默認 SSE 模式）：

  
  <http://localhost:8931/sse>
  

• 回車確認，配置文件保存位置選擇用戶區或工作區均可。

• 操作完成后，你會在 settings.json 或 .vscode/mcp.json 中看到如下內容：

  // Example .vscode/mcp.json
  {"servers": {"my-remote-server": {"type": "sse","url": "<http://localhost:8931/sse>",}}
  }
  

• 點擊啟動后，VS Code 會自動識別 到可用的MCP 服務

第二步 使用 GitHub Copilot + Playwright MCP 實現 AI 控制瀏覽器

打開 GitHub Copilot Chat 窗口，切換為“代理模式”，點擊 MCP 工具圖標可以看到Playwright MCP提供了如下瀏覽器操作的工具

示例：通過 LLM Prompt 控制瀏覽器

Step 1：導航到百度

Prompt:

"Navigate to 百度一下，你就知道."

效果如下，MCP 成功控制瀏覽器跳轉至百度并讀取頁面標題：

Step 2：執行搜索操作

Prompt:

"Search playwright in 百度一下，你就知道."

AI 會自動識別搜索框和按鈕，并完成搜索動作，頁面更新為搜索結果。