一、前言
在日常的开发与流程化工作中，浏览器网页是常用交互界面。然而，面对人为重复性操作，传统的自动化脚本通常存在灵活性差、非语义化、维护成本高等问题。
设想一下这样的场景：你只需向 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 简介
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’。
- 首先，记下当前页面上显示了多少个文章标题。
- 然后，模拟用户滚动页面到底部。
- 等待新的内容加载出来。
- 再次统计页面上文章标题的数量，并验证数量比之前要多，证明有新内容被加载。
五、总结
本文深入探讨了如何利用 Playwright MCP 与 Cursor AI Agent 相结合，通过自然语言指令实现浏览器自动化任务。
通过一系列简单易操作的实战案例，可以看出这种利用 Prompt 自然语言驱动的方式，极大地降低了技术门槛。开发者无需关注脚本实现细节，只需要以自然语言描述 “做什么” ，AI 便能智能地转换为 “怎么做” 的具体浏览器操作。甚至于完全不懂技术实现，也可以实现一些浏览器自动化操作。
总之，MCP 与 AI Agent 的结合预示着一些新的可能性，为自动化领域带来了新的视角和方法。希望本文能为你的日常开发工作带来启发。