用 Playwright MCP 让 AI 改它自己写的屎山代码

在AI编程领域，我们常常陷入反复修改代码的繁琐流程。本文将介绍如何借助Playwright MCP，让AI自主检测并修复其生成的代码问题，实现开发流程的高效闭环，大幅提升编程效率。

在用AI编程开发产品的时候，尤其是网站类的产品，小到一个HTML页面，大到一个功能网站，我们的常规操作是：

1. 在AI编程软件（例如Cursor、Claude）中，给AI发请求

2. 等待AI完成代码，然后打开网站，检查哪里有不对的地方

3. 把不对的地方截图、或者把控制台输出复制，回到编程软件，发给AI，让AI给新的代码

如此循环

，最终完成网站的开发。

发现没有，整个开发过程，我们都是在给AI打工，不断从编程软件和网站之间切换，频繁给主子反馈您写的代码哪里有问题。

这个姿态不对！太费时间了！！

最直接的解决方案就是让AI自己打开网站，让它看自己写的屎山代码跑出来是什么样子的，让它自己看控制台的输出有什么问题，然后自行去解决！！

这个场景，放在以前，可以说是荒诞，但现在成了现实！

我们可以利用MCP的能力，让AI调用浏览器，然后截图、看输出，这样就闭环了。

今天饼干哥哥就教大家怎么实现这个能力，让AI彻底变成我们的牛马！！

今天我们的主角是「Playwright」，一个强大的自动化测试工具，由微软开发，用于测试网页应用。它能模拟用户操作，如点击、输入、滚动等。常见于爬虫场景。

以前我们用js或者python里写代码，让Playwright根据我们的代码逻辑去打开网站、登陆账号、获取信息等。

现在，我们是要让AI自行去判断怎么使用Playwright完成上述的操作。

这里就需要用到MCP Server—— @executeautomation/playwright-mcp-server

上图中，都是playwright mcp server提供的能力，可供AI调用：

1. playwright_screenshot

• 用途：截取网页或元素的屏幕截图。
• 场景：测试时验证页面渲染效果，或记录自动化操作后的页面状态。

2. playwright_fill

• 用途：自动填写表单输入框内容（如登录框、搜索框）。
• 场景：模拟用户输入，测试表单提交功能或批量填表。

3. playwright_select

• 用途：操作下拉菜单选择特定选项。
• 场景：测试下拉选项的交互逻辑（如筛选条件选择）。

4. playwright_hover

• 用途：模拟鼠标悬停在元素上的行为。
• 场景：测试悬停触发的动态效果（如菜单弹出、Tooltip）。

5. playwright_expect_response

• 用途：验证特定网络请求的响应（如接口返回状态码、数据）。
• 场景：确保前端操作触发的后端接口符合预期（如提交订单后的API响应）。

6. playwright_get_visible_text

• 用途：获取页面上可见的文本内容。
• 场景：断言页面内容是否正确显示（如成功提示、错误信息）。

7. playwright_drag

• 用途：模拟拖拽元素操作（如文件上传、排序）。
• 场景：测试拖拽交互功能是否正常。

8. playwright_save_as_pdf

• 用途：将当前页面保存为 PDF 文件。
• 场景：生成页面快照报告或存档关键页面状态。

ok，接下来看怎么用上这个工具。 以 Cursor 为例。

首先，要安装。

先安装好 node.js

然后在 cursor 命令行下输入以下命令安装～

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

接着需要在 Cursor 配置这个 MCP 服务

如图：右上角设置-MCP- add new global MCP server

在自动新开的窗口下，输入以下的内容：

{

“mcpServers”:{

“playwright-mcp-server”:{

“command”:”npx”,

“args”:[

“-y”,

“@executeautomation/playwright-mcp-server”

]

}}}

接着，重启 Cursor， 回到 MCP 的设置页面就能看到下图这样的，必须是绿灯，证明已经开启了。

接下来就直接在 Agent 模式向 AI 正常发请求，最好用 claude3.7 能比较好调用 MCP

如果你怕 AI 不调 MCP 可以显性地让他执行

例如我一个网站，在登录的时候出问题了，如下图，我就发需求：

我的网站 http://localhost:5173在登陆的时候报错了，账号是 admin，密码是 admin，请你Playwright MCP 访问尝试登录后看问题是什么，然后解决。

从图中，我们可以看到 AI 调用了 MCP 里的多个工具：打开网站-输入账号密码-点击登录-查看控制台输出-然后读取问题后-就先修复代码-最后重新执行一遍检查。

如下图，喜闻乐见地，帮我下修复好了这个问题！！

本文由人人都是产品经理作者【饼干哥哥】，微信公众号：【饼干哥哥数据分析】，原创/授权 发布于人人都是产品经理，未经许可，禁止转载。

题图来自Unsplash，基于 CC0 协议。