使用 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 測試、資料提取還是產品研究，這一設定都能提供強大的支援。