用 Playwright MCP 让 AI 自己修复代码错误

在使用AI进行网站开发时，我们常常陷入一个繁琐的循环：向AI请求代码，检查结果，发现问题后反馈给AI，再等待新的代码。这样的流程不仅耗时，还让人感觉像是在为AI打工。

现在，我们可以让AI自己解决这个问题！通过MCP（Manus Control Protocol）和Playwright的强大功能，AI可以自行检查代码运行情况并修复错误。

什么是 MCP？

MCP 是一种协议，允许AI调用外部工具或服务来完成任务。通过配置合适的MCP服务器，AI可以直接操作浏览器、填写表单、截图等，从而实现自动化测试和问题修复。

Playwright 的强大功能

Playwright 是微软开发的一个自动化测试工具，支持多种语言（如Python、JavaScript）。它能够模拟用户行为，如点击、输入、滚动等。结合MCP，我们可以让AI自行完成以下操作：

  1. playwright_screenshot：截取网页或元素的屏幕截图。
  2. playwright_fill：自动填写表单内容。
  3. playwright_select：选择下拉菜单中的选项。
  4. playwright_hover：模拟鼠标悬停行为。
  5. playwright_expect_response：验证网络请求响应。
  6. playwright_get_visible_text：获取页面可见文本。
  7. playwright_drag：模拟拖拽操作。
  8. playwright_save_as_pdf：将页面保存为PDF。

如何配置 Playwright MCP 服务？

Image

以 Cursor 为例，以下是安装和配置步骤：

  1. 安装 Node.js：确保已安装Node.js环境。
  2. 安装 Playwright-MCP-Server：
    npm install -g @executeautomation/playwright-mcp-server
  3. 配置 MCP 服务：
    • 在 Cursor 中，进入设置 -> MCP -> 添加全局MCP服务器。
    • 输入以下内容并保存：
      {

  "mcpServers": {

    "playwright-mcp-server": {

      "command": "npx",

      "args": ["-y", "@executeautomation/playwright-mcp-server"]

    }

  }

}
  4. 重启 Cursor：确保MCP服务正常运行（状态为绿色）。

实际应用案例

假设我们的网站在登录时出现错误，可以通过以下方式让AI自行解决问题：

  1. 发送请求：
    我的网站 http://localhost:5173

在登录时报错了，账号是 admin，密码是 admin，请你使用 Playwright MCP 访问并尝试登录，查看问题并修复。

Image

  1. AI会自动完成以下操作：
    • 打开网站
    • 填写账号和密码
    • 点击登录按钮
    • 检查控制台输出
    • 读取错误信息
    • 修复代码
    • 重新执行检查

最终，AI会返回修复后的代码，并确认问题已解决。

总结

通过 Playwright MCP，我们可以让AI自行完成代码的测试和修复工作，大幅提高开发效率。关注我们，获取更多 AI 编程实战经验！

微信：dszb199