用 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 协议。