当前位置：首页 > news >正文

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

news 2025/6/28 8:20:24

一、前言

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

二、Playwright MCP

2.1 什么是MCP

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

2.2 Playwright MCP 简介

官方文档地址
Github地址

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

2.3 核心功能

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

2.4 核心API（32个）

会话管理（4个）

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

页面导航与基础操作（6个）

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

元素交互操作（7个）

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

iframe操作（2个）

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

高级页面交互（5个）

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

HTTP请求操作（5个）

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

响应验证（2个）

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

浏览器配置（1个）

名称	用途
`playwright_custom_user_agent`	设置自定义用户代理字符串

三、Cursor接入MCP

3.1 前置条件

Node.js ≥18.x，推荐使用nvm工具快速安装新版本
已安装Cursor

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

3.2 具体步骤

1. 找到配置入口

点击右上角设置按钮
选择左侧 Tools & Integrations
点击 New MCP Server

2. 添加mcp

{"mcpServers": {"playwright": {"command": "npx","args": ["-y", "@executeautomation/playwright-mcp-server"]}}
}

3. 添加成功

添加成功后显示 32 tools enabled

四、实战

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

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

4.1 实战1：表单登录与验证 (GitHub)

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

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

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

4.2 实战2：文件上传 (tinypng.com)

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

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

4.3 实战3：列表数据抓取与保存 (微博热搜)

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

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

4.4 实战4：与iframe内的元素交互 (菜鸟教程)

请使用Playwright帮我操作一个内联框架(iframe)：

访问页面’https://www.runoob.com/try/try.php?filename=tryhtml_iframe’。
查找页面上的iframe标签找到对应的iframe元素。
切换到该iframe内部，并找到其中的’CSS3’按钮。
请点击iframe中的’CSS3’按钮。

4.5 实战5：处理动态加载内容 (知乎"发现"页)

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

访问 'https://www.zhihu.com/knowledge-plan/hot-question/hot/0/hour’。
首先，记下当前页面上显示了多少个文章标题。
然后，模拟用户滚动页面到底部。
等待新的内容加载出来。
再次统计页面上文章标题的数量，并验证数量比之前要多，证明有新内容被加载。