使用 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 测试、数据提取还是产品研究，这一设置都能提供强大的支持。