一、前言
在日常的开发与流程化工作中，浏览器网页是常用交互界面。然而，面对人为重复性操作，传统的自动化脚本通常存在灵活性差、非语义化、维护成本高等问题。设想一下这样的场景：你只需向 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工具快速安装新版本已安装CursorTips: mcp-playwright-server 首次运行时会自动下载浏览器内核，这个过程可能需要一些时间
3.2 具体步骤
1. 找到配置入口
2. 添加mcp
{ "mcpServers": { "playwright": { "command": "npx", "args": ["-y", "@executeautomation/playwright-mcp-server"] } }}3. 添加成功
四、实战
本章节将通过一系列实战案例，展示如何仅仅使用 自然语言提示词（Prompt），驱动 AI Agent（如Cursor内置的Agent）结合 Playwright MCP 完成各种 Web 自动化任务。核心是 “描述做什么”，而不是 “编写怎么做”。
以下实战案例均采用公开网站，方便读者亲自体验，无需本地部署。请注意，AI Agent 调用何种 MCP API 取决于其自身的判断，不同模型的结果可能有所差异。
4.1 实战1：表单登录与验证 (GitHub)
安全提示：切勿在 Prompt 或代码中硬编码密码等敏感信息，此处仅为演示目的。
请使用Playwright帮我执行GitHub的登录流程：
打开网址 'github.com/login'。在名为 'Username or email address' 表单项的输入框里填入你的用户名。在名为 'Password' 表单项的输入框里填入你的密码。点击名为 'Sign in' 的登录按钮。登录成功后，请验证页面左上角是否出现了 'Dashboard' 文字，有则登录成功。
4.2 实战2：文件上传 (tinypng.com)
请使用Playwright帮我测试 tinypng.com 的图片压缩上传功能：
打开网址 'tinypng.com/'。找到页面上那个虚线框的文件上传区域，并用它来上传一个本地图片文件（例如 'D:\test.png'）。上传后，网站会进行压缩处理，请等待这个处理流程完成（可以验证页面上是否出现了包含 'Download all images' 文本的按钮来确认）。最终，请验证页面上确实出现了 ‘Download all images’ 按钮，表示上传和处理均已成功。
4.3 实战3：列表数据抓取与保存 (微博热搜)
请使用Playwright帮我抓取微博热搜榜的数据：
访问微博热搜榜页面 's.weibo.com/top/summary…找到热搜列表区域。提取列表中每个热搜话题的标题和对应的链接。将所有提取到的"标题,链接"组合，保存到一个名为 'weibo_hot_search.csv' 的CSV文件中，并确保使用 UTF-8 编码格式保存到项目根目录 'downloads' 文件夹下。
4.4 实战4：与iframe内的元素交互 (菜鸟教程)
请使用Playwright帮我操作一个内联框架(iframe)：
访问页面'www.runoob.com/try/try.php…查找页面上的iframe标签找到对应的iframe元素。切换到该iframe内部，并找到其中的'CSS3'按钮。请点击iframe中的'CSS3'按钮。
4.5 实战5：处理动态加载内容 (知乎"发现"页)
请使用Playwright帮我处理知乎 “小时榜" 页的无限滚动加载：
访问 'www.zhihu.com/knowledge-p…首先，记下当前页面上显示了多少个文章标题。然后，模拟用户滚动页面到底部。等待新的内容加载出来。再次统计页面上文章标题的数量，并验证数量比之前要多，证明有新内容被加载。
五、总结
本文深入探讨了如何利用 Playwright MCP 与 Cursor AI Agent 相结合，通过自然语言指令实现浏览器自动化任务。
通过一系列简单易操作的实战案例，可以看出这种利用 Prompt 自然语言驱动的方式，极大地降低了技术门槛。开发者无需关注脚本实现细节，只需要以自然语言描述 “做什么” ，AI 便能智能地转换为 “怎么做” 的具体浏览器操作。甚至于完全不懂技术实现，也可以实现一些浏览器自动化操作。
总之，MCP 与 AI Agent 的结合预示着一些新的可能性，为自动化领域带来了新的视角和方法。希望本文能为你的日常开发工作带来启发。
