使用 Playwright MCP 和 Claude Desktop 構建類似 Claude Cowork 的瀏覽器代理

Claude Cowork 將 AI 從基於聊天的輔助轉向主動的任務委派。它不再只是提供指令，而是直接操作用户的計算機、文件、應用程序和瀏覽器工作流。通過結合 Playwright MCP，Claude Desktop 能夠以比基於截圖的自動化更為結構化的方式打開頁面、點擊按鈕、填寫表單、提取數據和調試界面。

Playwright MCP 是一個 MCP 服務器，它將瀏覽器的自動化能力提供給 AI 助手。它基於微軟的 Playwright 框架，支持 Chromium、Firefox、WebKit 和 Microsoft Edge 等瀏覽器。Playwright MCP 的關鍵在於將瀏覽器狀態映射到 LLM，它返回的是結構化的可訪問性快照，包含頁面元素、角色、標籤和引用，使 Claude 能夠理解頁面結構並決定如何交互。

架構

Claude Desktop + Playwright MCP 的設置包含四個主要組件：Claude Desktop、MCP 協議、Playwright MCP 服務器和瀏覽器。MCP 協議使得工具和服務器能夠以受控的方式連接到其他系統，增強 AI 應用的能力。這種架構將瀏覽器自動化層與 LLM 分離，Claude 不需要了解 Playwright 的內部細節，只需查看頁面快照並選擇操作。

安裝步驟

首先，使用以下命令安裝 Playwright MCP：

npm install -D @playwright/test@latest

然後，找到 Claude Desktop 的配置文件（macOS 上位於 ~/Library/Application Support/Claude/claude_desktop_config.json，Windows 上位於 %APPDATA%\Claude\claude_desktop_config.json），添加 Playwright MCP 服務器配置。重啓 Claude Desktop 後，即可使用。

功能概覽

Playwright MCP 支持多種瀏覽器交互：

• **導航**：加載頁面、點擊、滾動。
• **點擊和輸入**：模擬用户點擊和鍵盤輸入。
• **表單填寫**：自動填充表單字段。
• **截圖**：捕獲頁面視覺快照。
• **鍵盤和鼠標操作**：模擬快捷鍵和鼠標動作。
• **標籤頁管理**：多標籤頁工作流。
• **對話框處理**：處理彈窗、確認框等。
• **網絡監控**：查看網絡請求和響應。
• **API 模擬**：模擬後端響應。
• **存儲狀態**：保存和恢復瀏覽器狀態（cookies、localStorage）。
• **運行 Playwright 代碼**：直接執行任意 JavaScript，但需注意安全風險。

安全考慮

對於技術領導者來説，安全至關重要。建議使用專用測試賬户，避免使用真實用户憑證。Playwright MCP 支持代理配置、無頭模式、瀏覽器選擇、設備模擬等高級選項。

總結

通過 Playwright MCP 和 Claude Desktop，開發者可以免費搭建一個類似 Claude Cowork 的瀏覽器自動化代理。這一方法將瀏覽器控制權交給 AI，同時保持了模塊化和可擴展性。無論是 Web 測試、數據提取還是產品研究，這一設置都能提供強大的支持。