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

0 评论 3572 浏览 1 收藏 8 分钟
🔗 产品经理的核心价值是能够准确发现和满足用户需求,把用户需求转化为产品功能,并协调资源推动落地,创造商业价值

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

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 目前还没评论,等你发挥!
专题
13850人已学习12篇文章
用户调研作为产品人员最常用的工作方式,相信各位一定不会陌生。但如何提高用户调研的有效性却是一直困扰大家的问题。本专题的文章分享了用户调研的方法论。
专题
17294人已学习15篇文章
游戏化指的是游戏的理念与设计方法运用在其他领域上,本专题的文章分享了游戏化技术的应用方向。
专题
19568人已学习13篇文章
画像标签是由数据标签经过分析、加工处理,形成的更加抽象、易于理解的复合标签。本专题的文章分享了如何设计用户标签体系。
专题
18450人已学习17篇文章
随着互联网的不断发展,不少产品开始了适老化改造,帮助老年人更好地融入智能生活。本专题的文章分享了适老化的设计思路。
专题
15896人已学习12篇文章
本专题的文章分享了如何从0到1搭建结算平台
专题
14603人已学习13篇文章
作为一名运营,需要持续对自己的经验进行总结并不断更新迭代。本专题的文章分享了运营方法论。