2026年【AI助手】释放双手,基于Cursor Agent与Playwright MCP的浏览器自动化实战

【AI助手】释放双手,基于Cursor Agent与Playwright MCP的浏览器自动化实战在日常的开发与流程化工作中 浏览器网页是常用交互界面 然而 面对人为重复性操作 传统的自动化脚本通常存在灵活性差 非语义化 维护成本高 等问题 设想一下这样的场景 你只需向 AI 发送一条 prompt 描述任务 它便能自动打开网页 点击按钮 填充表单 甚至帮你抓取页面数据到本地进一步分析 本文主要介绍如何运用 Cursor Agent 与 Playwright MCP

大家好,我是讯享网,很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。



在日常的开发与流程化工作中,浏览器网页是常用交互界面。然而,面对人为重复性操作,传统的自动化脚本通常存在灵活性差非语义化维护成本高等问题。 设想一下这样的场景:你只需向 AI 发送一条 prompt 描述任务,它便能自动打开网页、点击按钮、填充表单,甚至帮你抓取页面数据到本地进一步分析。 本文主要介绍如何运用 Cursor AgentPlaywright MCP,轻松实现浏览器自动化,将人从繁琐的重复劳动中解放出来。对于AI,还是那句话,发挥你的想象。

可以先看一下效果: mcp.gif

MCP(Model Context Protocol) 是一个开放协议,允许 AI 模型与外部工具和服务进行安全的交互。它为 AI 应用提供了标准化的接口,使得模型能够访问实时数据、执行复杂操作。你可以将 MCP 想象成 AI 应用程序的 接口。就像 为设备连接各种外设和配件提供了标准化的方式一样,MCP 为 AI 模型 连接各种数据源和工具提供了标准化的接口。

官方文档地址 Github地址

Playwright 模型上下文协议(MCP) 服务器是使用 自动进行浏览器和 API 测试的强大解决方案。

  • 让 在真实的浏览器环境中与网页进行交互。
  • 执行诸如执行 、截图和浏览网页元素等任务。
  • 无缝处理 测试以验证端点并确保可靠性。
  • 在多个浏览器引擎上进行测试,包括 、 和 。

会话管理(4个)

名称 用途 启动代码生成会话,开始记录浏览器操作 结束代码生成会话并生成测试 获取代码生成对话 清除代码生成会话而不生成测试

页面导航与基础操作(6个)

名称 用途 导航到指定URL页面 截取页面或元素截图 浏览器后退操作 浏览器前进操作 关闭当前页面或浏览器 将页面保存为PDF文件

元素交互操作(7个)

名称 用途 点击页面元素(按钮、链接等) 填写输入框、文本域等表单字段 选择下拉菜单选项 鼠标悬停在元素上触发效果 拖拽元素到目标位置 模拟键盘输入和快捷键操作 上传文件到页面表单

iframe操作(2个)

名称 用途 在iframe内点击元素 在iframe内填写表单字段

高级页面交互(5个)

名称 用途 在页面中执行JavaScript代码 获取浏览器控制台日志信息 获取页面可见文本内容 获取页面可见HTML内容 点击链接并切换到新标签页

HTTP请求操作(5个)

名称 用途 发送HTTP GET请求获取数据 发送HTTP POST请求提交数据 发送HTTP PUT请求更新资源 发送HTTP PATCH请求部分更新 发送HTTP DELETE请求删除资源

响应验证(2个)

名称 用途 期望特定的HTTP响应内容 断言HTTP响应是否符合预期

浏览器配置(1个)

名称 用途 设置自定义用户代理字符串
  1. ≥18.x,推荐使用工具快速安装新版本
  2. 已安装

Tips: mcp-playwright-server 首次运行时会自动下载浏览器内核,这个过程可能需要一些时间

1. 找到配置入口

685b8f3feba69a000000080e.png

2. 添加mcp

 
  

3. 添加成功

685d1563eba69a0000000206.png

本章节将通过一系列实战案例,展示如何仅仅使用 自然语言提示词(Prompt),驱动 AI Agent(如内置的Agent)结合 完成各种 Web 自动化任务。核心是 “描述做什么”,而不是 “编写怎么做”。

以下实战案例均采用公开网站,方便读者亲自体验,无需本地部署。请注意, 调用何种 取决于其自身的判断,不同模型的结果可能有所差异。

安全提示:切勿在 Prompt 或代码中硬编码密码等敏感信息,此处仅为演示目的。

请使用Playwright帮我执行GitHub的登录流程:

  1. 打开网址 'github.com/login'。
  2. 在名为 'Username or email address' 表单项的输入框里填入你的用户名。
  3. 在名为 'Password' 表单项的输入框里填入你的密码。
  4. 点击名为 'Sign in' 的登录按钮。
  5. 登录成功后,请验证页面左上角是否出现了 'Dashboard' 文字,有则登录成功。

image.png

请使用Playwright帮我测试 tinypng.com 的图片压缩上传功能:

  1. 打开网址 'tinypng.com/'。
  2. 找到页面上那个虚线框的文件上传区域,并用它来上传一个本地图片文件(例如 'D: est.png')。
  3. 上传后,网站会进行压缩处理,请等待这个处理流程完成(可以验证页面上是否出现了包含 'Download all images' 文本的按钮来确认)。
  4. 最终,请验证页面上确实出现了 ‘Download all images’ 按钮,表示上传和处理均已成功。

685e02f2eba69a000000032c.png

请使用Playwright帮我抓取微博热搜榜的数据:

  1. 访问微博热搜榜页面 's.weibo.com/top/summary…
  2. 找到热搜列表区域。
  3. 提取列表中每个热搜话题的标题和对应的链接。
  4. 将所有提取到的"标题,链接"组合,保存到一个名为 'weibo_hot_search.csv' 的CSV文件中,并确保使用 UTF-8 编码格式保存到项目根目录 'downloads' 文件夹下。

image.png

请使用Playwright帮**作一个内联框架(iframe):

  1. 访问页面'www.runoob.com/try/try.php…
  2. 查找页面上的iframe标签找到对应的iframe元素。
  3. 切换到该iframe内部,并找到其中的'CSS3'按钮。
  4. 请点击iframe中的'CSS3'按钮。

请使用Playwright帮我处理知乎 “小时榜" 页的无限滚动加载:

  1. 访问 'www.zhihu.com/knowledge-p…
  2. 首先,记下当前页面上显示了多少个文章标题。
  3. 然后,模拟用户滚动页面到底部。
  4. 等待新的内容加载出来。
  5. 再次统计页面上文章标题的数量,并验证数量比之前要多,证明有新内容被加载。

本文深入探讨了如何利用 Playwright MCPCursor AI Agent 相结合,通过自然语言指令实现浏览器自动化任务。

通过一系列简单易操作的实战案例,可以看出这种利用 自然语言驱动的方式,极大地降低了技术门槛。开发者无需关注脚本实现细节,只需要以自然语言描述 “做什么” ,AI 便能智能地转换为 “怎么做” 的具体浏览器操作。甚至于完全不懂技术实现,也可以实现一些浏览器自动化操作。

总之, 与 的结合预示着一些新的可能性,为自动化领域带来了新的视角和方法。希望本文能为你的日常开发工作带来启发。

小讯
上一篇 2026-04-03 20:11
下一篇 2026-04-03 20:09

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请联系我们,一经查实,本站将立刻删除。
如需转载请保留出处:https://51itzy.com/kjqy/224373.html