MCP-Playwright: 赋予AI模型操控浏览器的能力

在人工智能快速发展的时代，我们一直在寻找让AI与现实世界更好地交互的方式。今天我想向大家介绍一个强大的开源项目：MCP-Playwright，它正在改变AI模型与Web环境交互的方式。

源码地址：https://github.com/executeautomation/mcp-playwright

什么是MCP-Playwright？

MCP-Playwright是一个基于模型上下文协议(Model Context Protocol)的服务器，它为大型语言模型(LLM)提供了使用Playwright进行浏览器自动化的能力。简单来说，这个项目让像Claude、GPT等AI模型拥有了"眼睛和手"，能够真实地浏览网页、点击按钮、填写表单，甚至执行复杂的自动化测试流程。

由ExecuteAutomation团队开发的这个项目在GitHub上已经获得了2.5k+的星标，证明了开发者社区对这种技术的热情。项目遵循MIT许可证，采用TypeScript作为主要开发语言，为AI赋予了前所未有的Web交互能力。

MCP-Playwright提供的核心功能

1. 代码生成功能

对于测试工程师和开发者来说，MCP-Playwright提供了强大的测试代码生成能力：

• 开始/结束代码生成会话：记录浏览器操作并转换为可重用的测试脚本
• 自定义生成选项：可以设置输出路径、测试名称前缀、是否包含注释等
• 会话管理：获取会话信息或在需要时清除会话

这意味着AI模型可以协助创建完整的自动化测试套件，极大提高了测试效率。

2. 浏览器交互功能

MCP-Playwright提供了丰富的浏览器交互工具：

基本导航控制

// 导航到特定URL，可选择浏览器类型和视口大小
playwright_navigate({ url: "https://example.com", browserType: "chromium" })

// 在浏览器历史中导航
playwright_go_back()
playwright_go_forward()

页面元素交互

// 点击页面元素
playwright_click({ selector: "#submit-button" })

// 填写表单
playwright_fill({ selector: "#username", value: "testuser" })

// 选择下拉菜单项
playwright_select({ selector: "#country", value: "China" })

// 悬停在元素上
playwright_hover({ selector: ".menu-item" })

// 拖放操作
playwright_drag({ sourceSelector: "#item", targetSelector: "#dropzone" })

// 键盘操作
playwright_press_key({ key: "Enter" })

内容获取与分析

// 获取页面文本内容
playwright_get_visible_text()

// 获取HTML结构
playwright_get_visible_html()

// 截取屏幕截图
playwright_screenshot({ name: "homepage", fullPage: true })

// 保存页面为PDF
playwright_save_as_pdf({ outputPath: "/downloads", filename: "page.pdf" })

高级浏览器功能

// 执行JavaScript脚本
playwright_evaluate({ script: "document.title = 'New Title';" })

// 获取控制台日志
playwright_console_logs({ type: "error" })

// 设置自定义用户代理
playwright_custom_user_agent({ userAgent: "MyCustomBot/1.0" })

网络请求监控

// 监听网络请求
playwright_expect_response({ id: "login", url: "*/api/login" })
playwright_assert_response({ id: "login", value: "success" })

3. API请求功能

除了浏览器交互，MCP-Playwright还提供了直接的API交互能力：

// 执行GET请求
playwright_get({ url: "https://api.example.com/data" })

// 执行POST请求
playwright_post({
  url: "https://api.example.com/users",
  value: JSON.stringify({ name: "John" }),
  headers: { "Content-Type": "application/json" }
})

// 其他HTTP方法
playwright_put({ url: "...", value: "..." })
playwright_patch({ url: "...", value: "..." })
playwright_delete({ url: "..." })

使用场景与价值

MCP-Playwright的应用场景非常广泛：

1. 自动化测试：AI可以创建、执行和维护Web应用的自动化测试
2. 内容抓取：可以智能地从网站提取数据和信息
3. 流程自动化：自动完成重复的Web任务，如表单填写、数据输入等
4. 体验验证：验证网站的UI/UX功能和用户体验
5. 教育演示：可视化展示Web交互过程，辅助教学
6. 交互式学习：AI可以实际操作网页，进行更深入的学习和分析

如何安装和使用

MCP-Playwright提供了多种安装方式，让不同环境的开发者都能轻松上手：

NPM安装

npm install -g @executeautomation/playwright-mcp-server

先在cmd命令行执行上面的命令，注意node需要20以上的版本，node安装可以先安装nvm，nvm的安装教程点击此链接

其他安装方式

MCP-Get安装

npx @michaellatman/mcp-get@latest install @executeautomation/playwright-mcp-server

Smithery安装（专为Claude Desktop）

npx -y @smithery/cli install @executeautomation/playwright-mcp-server --client claude

VS Code安装

code --add-mcp '{"name":"playwright","command":"npx","args":["@executeautomation/playwright-mcp-server"]}'

在Claude配置

下载claude客户端，按右上角file ——> settings

然后选择Developer ——> Edit Config

就找到了json文件

{
  "mcpServers": {
    "playwright": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "@executeautomation/playwright-mcp-server"
      ]
    }
  }
}

找到claude_desktop_config.json文件，将上面代码的复制在其中

然后重启claude就可以发现有个run，就可以使用了

在哪些环境中可以使用MCP-Playwright？

MCP-Playwright当前支持多种AI集成环境：

• Claude Desktop
• Cline
• Cursor IDE
• VS Code (通过GitHub Copilot代理)
• 其他支持MCP的环境

结语：AI与Web交互的未来

MCP-Playwright代表了AI与Web交互的一个重要进步。通过这个工具，AI模型不再是被动的信息处理者，而是能够主动探索和交互的Web公民。这为AI辅助测试、内容分析、流程自动化等领域开辟了新的可能性。

随着这类技术的发展，我们可以期待AI在Web领域扮演更加积极的角色，协助我们完成更复杂、更有价值的任务。无论你是开发者、测试工程师还是AI爱好者，MCP-Playwright都值得你关注和尝试。

对于想深入了解这个项目的读者，可以访问MCP-Playwright的GitHub仓库获取更多信息。

你对AI操控浏览器有什么想法？你认为这项技术会如何改变Web开发和测试的未来？欢迎在评论区分享你的观点！