✨文章摘要
Playwright MCP（Model Context Protocol）是微软基于 Playwright 框架推出的 AI 浏览器自动化新协议。它通过结构化快照数据和自然语言指令结合大型语言模型（如 GPT），实现无需编码的网页交互。无论你是要测试登录流程、抓取价格数据，还是用 AI 远程控制浏览器，Playwright MCP 都能大幅降低门槛，让“说人话”也能驱动自动化脚本。本篇将从功能介绍、技术架构、使用方法到实际场景，带你全面理解这一自动化革命。
🥊前言：告别那些痛苦的“选择器地狱”吧！
曾几何时，为了让自动化测试顺利通过，我们花了几个小时反复调试 XPath、CSS 选择器，还得忍受测试一夜之间“全红”的绝望。而现在，只需要输入一句话：
“点击登录按钮，输入用户名和密码，再点击提交。”
Playwright MCP 就能自动完成整个流程。
不再写代码，不再找选择器，甚至不再打开 VS Code。你只需要会“说话”，剩下的就交给 MCP。这不仅仅是效率的提升，更是自动化体验的飞跃。
什么是 Playwright MCP？
✅ 定义
Playwright MCP 是 Microsoft 基于 Playwright 自动化框架 开发的 AI驱动协议，其目标是：
让大型语言模型（LLM）能够像人类一样，通过结构化语义而不是像素截图与网页交互。
✅ 技术栈组成
| 组件 | 说明 |
|---|---|
| Playwright | 跨浏览器自动化框架，支持 Chromium、Firefox 和 WebKit |
| MCP 协议 | 标准化语言模型与工具交互方式，统一指令格式 |
| LLM（GPT/Claude） | 理解人类自然语言指令，生成结构化控制命令 |
| 快照系统 | 结构化访问页面元素，不依赖 DOM/CSS |
✅ 为什么不是 Selenium？
| 对比项 | Selenium | Playwright MCP |
|---|---|---|
| 操作方式 | 基于选择器 | 基于结构化快照 |
| 编码门槛 | 高 | 低（自然语言驱动） |
| 稳定性 | 易崩 | 自动适应页面变化 |
| 执行性能 | 慢 | 快 30%~50% |
| 跨设备 | 有限 | 支持手机、平板仿真 |
Playwright MCP 的工具解释
一、浏览器基础控制
1. browser_close
- 功能：关闭当前浏览器实例（所有标签页）。
- 场景：自动化任务完成后清理环境。
- 示例：
browser_close()→ 关闭浏览器，释放资源。
2. browser_resize
-
功能：调整浏览器窗口大小（支持像素或设备预设）。
-
参数：
width（宽度）、height（高度），或device（设备名，如iPhone 14）。 -
示例：
browser_resize({width: 1280, height: 720})browser_resize({device: "Pixel 7"})
3. browser_install
- 功能：安装 Playwright 支持的浏览器（Chromium/Firefox/WebKit）。
- 示例：
browser_install({browsers: ["chromium", "firefox"]})
二、页面交互核心命令
4. browser_click
- 功能：点击页面元素。
- 参数：
element（描述）、ref（元素引用）。 - 示例：
browser_click({element: "搜索按钮", ref: "#search-btn"})
5. browser_type
- 功能：在输入框输入文本。
- 参数：
element、ref、text、submit。 - 示例：
browser_type({element: "用户名输入框", ref: "#username", text: "test@example.com", submit: false})
6. browser_hover
- 功能：鼠标悬停。
- 示例：
browser_hover({element: "用户头像"})
7. browser_drag
- 功能：拖拽元素。
- 示例：
browser_drag({source_ref: "#item", target_ref: "#cart"})
8. browser_select_option
- 功能：选择下拉框。
- 示例：
browser_select_option({element: "城市选择", ref: "#city", label: "北京"})
三、导航与标签页管理
9. browser_navigate
- 功能：跳转页面。
- 示例：
browser_navigate({url: "https://baidu.com", wait_until: "networkidle"})
10. browser_navigate_back / browser_navigate_forward
-
功能：浏览器返回/前进。
-
示例：
browser_navigate_back()browser_navigate_forward()
11. browser_tab_new / browser_tab_select / browser_tab_close
-
功能：标签页管理。
-
示例：
browser_tab_new({url: "https://github.com"})browser_tab_select({index: 1})browser_tab_close({index: 1})
12. browser_tab_list
- 功能：列出所有标签页。
- 示例：
browser_tab_list()
四、数据提取与文件操作
13. browser_snapshot
- 功能：结构化快照，用于元素定位。
- 示例：
browser_snapshot()
14. browser_take_screenshot
- 功能：页面截图。
- 示例：
browser_take_screenshot({path: "result.png", full_page: true})
15. browser_pdf_save
- 功能：保存页面为 PDF。
- 示例：
browser_pdf_save({path: "invoice.pdf", format: "A4"})
16. browser_file_upload
- 功能：文件上传。
- 示例：
browser_file_upload({element_ref: "#upload-btn", file_paths: ["./resume.pdf"]})
五、调试与高级控制
17. browser_console_messages
- 功能：获取控制台日志。
- 示例：
browser_console_messages()
18. browser_handle_dialog
- 功能：处理弹窗。
- 示例：
browser_handle_dialog({action: "accept", text: "同意"})
19. browser_network_requests
- 功能：查看网络请求。
- 示例：
browser_network_requests({filter: "login"})
20. browser_press_key
-
功能：模拟键盘操作。
-
示例：
browser_press_key({key: "Enter"})browser_press_key({key: "Control+A"})
21. browser_wait_for
-
功能：等待条件满足。
-
示例：
browser_wait_for({condition: "element", element_ref: "#loading"})browser_wait_for({condition: "timeout", timeout: 2000})
22. browser_generate_playwright_test
- 功能：生成自动化测试脚本。
- 示例：
browser_generate_playwright_test()
安装与配置教程
地址：https://github.com/microsoft/playwright
进入cursor的mcp配置文件加入如下代码即可
"playwright": {
"command": "npx",
"args": ["-y", "@playwright/mcp@latest"]
}
实战测试
实现截图自己网站