最近在研究如何讓大語言模型（LLM）更高效地操作網頁，發現了 Playwright MCP 這個神器。它基于 Playwright 實現了瀏覽器自動化的 MCP 協議，能讓 LLM 通過結構化數據與網頁交互，不用依賴截圖或視覺模型，對開發者非常友好。記錄一下這個工具的核心功能和使用心得，方便后續復盤。

一、核心特性：結構化交互的優勢

Playwright MCP 最大的亮點是基于 可訪問性樹（Accessibility Tree） 的交互模式，和傳統的像素級操作不同，它直接通過網頁的語義結構（如標簽、屬性、文本）來定位元素，避免了截圖識別的不確定性。實測下來，這種方式有幾個明顯優勢：

• 輕量高效：不需要處理圖像數據，傳輸和解析速度更快，資源占用低。
• LLM 友好：返回的頁面快照是純 JSON 結構化數據，LLM 可以直接理解元素層級和屬性，省去了視覺模型的集成成本。
• 操作確定性強：通過元素引用（ref）精確定位，不會因為頁面布局微小變化導致操作失敗，適合自動化場景。

另外，它支持兩種模式：

• 持久化配置：默認存儲登錄狀態等數據，適合需要保持會話的場景（比如自動填表）。
• 隔離模式：每次會話獨立，關閉后狀態清空，適合安全要求高或一次性任務（如臨時數據抓取）。

二、配置與部署：快速啟動的幾種方式

推薦使用新器集的MCP客戶端。主要有以下幾個優點，同時也是解決了如今MCP的幾個痛點：

1. 不同的MCP Server認證方式多樣
2. 編程語言多樣化，有時候找到了想要的MCP Server，卻無法集成到應用中
3. 還有老生常談的問題，多個MCP Server的可維護性不好，降低開發效率
4. 沒有調用日志，無法知曉MCP Server到底做了什么，甚至報錯了也不知道原因
5. 各個MCP Server的實現方式不一，有的通過命令行參數啟動，有的通過環境變量，有的直接輸出所有結果，有的通過SSE方式
6. 就算集成了，也無法知曉用戶的調用日志，也就沒辦法做后續的數據統計分析
7. 還有如果客戶端集成MCP Server會增加應用程序打包尺寸，特別是手機應用客戶端的大小

三、工具列表：從基礎操作到高級功能

整理了常用工具的使用場景，方便快速查找：

1. 基礎操作

2. 導航操作

3. 資源操作

4. 實用工具

5. 標簽頁管理

6. 測試工具

7. 視覺模式（Vision Mode）

四、踩坑記錄與最佳實踐

1. 元素定位問題：
   • 建議加上--isolated參數，這樣可以啟動多個瀏覽器實例。
   • 如果頁面動態加載元素，需要用 browser_wait_for 等待元素出現后再操作。
2. 會話管理：
   • 持久化模式下，用戶數據目錄可能有權限問題，建議用絕對路徑指定 --user-data-dir。
   • 隔離模式適合無狀態任務，但每次都需要重新登錄，可通過 --storage-state 傳入已保存的登錄狀態。
3. 性能優化：
   • 無頭模式（headless: true）性能更好，生產環境建議默認開啟。
   • 批量操作時，盡量合并連續的工具調用，減少通信開銷。

五、適合什么樣的開發場景？

Playwright MCP 讓 LLM 操作網頁變得像調用 API 一樣簡單，尤其適合以下場景：

• 自動化測試：生成 Playwright 測試用例，結合 LLM 自動編寫測試邏輯。
• 數據抓取：結構化提取網頁信息，避免反爬機制（相比截圖方案更隱蔽）。
• 辦公自動化：自動填寫表單、生成報告、批量處理網頁任務（如批量發布文章）。

后續可以嘗試和 LangChain 結合，做一個智能網頁助手，比如讓 LLM 分析網頁內容后自動生成摘要或執行操作。