这篇文章，我就用亲测的方式，手把手带你了解什么是 Playwright MCP，如何快速上手做一套“AI网页自动化”，并顺带演示一个网页截图的工作流，真正体验一下“只会说人话也能写脚本”的新时代。
什么是 Playwright MCP？
Playwright MCP 是微软推出的一个全新协议，它结合了：
-
Playwright 浏览器自动化框架
-
结构化快照系统（替代传统的 DOM/CSS 定位）
-
LLM 大模型（如 GPT、Claude）对自然语言指令的理解能力
换句话说，它是专为 AI 打造的浏览器控制协议 —— 不需要写 XPath、不需要找选择器，AI 就能听你说话去点击、跳转、截图、提取内容、生成测试脚本。
为什么值得用？
| 对比维度 | Selenium | Playwright MCP |
|---|---|---|
| 操作方式 | 选择器 + 手写代码 | 自然语言 + 快照结构 |
| 编码门槛 | 高 | 超低，零代码 |
| 适应性 | 易崩，页面一改就挂 | 自动适应 DOM 结构变更 |
| 跨设备 | 支持有限 | 支持移动、平板模拟器 |
| 性能 | 一般 | 快 30~50% |
最关键的是：你可以把 Playwright MCP 当作一个 AI 助手，告诉它“帮我截图”、“点击右上角登录按钮”，它就真能听懂去做。
支持的常用命令
Playwright MCP 提供了非常完整的一套浏览器操作能力，下面我按模块简单列一下：
浏览器控制
-
browser_close()：关闭浏览器 -
browser_resize()：调整窗口或切换为手机模式 -
browser_install()：下载对应浏览器内核（如Chromium）
页面交互
-
browser_click()：点击按钮 -
browser_type()：输入内容 -
browser_hover()：悬停 -
browser_drag()：拖拽元素 -
browser_select_option()：选择下拉菜单项
导航和标签页
-
browser_navigate()：跳转网址 -
browser_tab_new()/browser_tab_select()/browser_tab_close()：多标签控制 -
browser_navigate_back()/browser_navigate_forward()：前进/后退操作
数据提取与截图
-
browser_snapshot()：结构化快照，AI用来理解页面结构 -
browser_take_screenshot()：网页截图 -
browser_pdf_save()：另存为 PDF -
browser_file_upload()：上传文件
调试&高级操作
-
browser_console_messages()：获取 console 输出 -
browser_handle_dialog()：自动处理弹窗 -
browser_network_requests()：查看网络请求 -
browser_generate_playwright_test()：生成测试代码！
如何安装和使用？
常用的IDE配置方法，及如何快速使用
方式一：VScode + npx 快速配置
在 .mcp/config.json 中加入：
"playwright": {
"command": "npx",
"args": ["-y", "@playwright/mcp@latest"]
}
方式二：在 Cursor 中一键添加
Cursor 支持原生 MCP 插件，在 Tools 菜单直接点击添加：
方式三：在 Trae 中使用
Trae MCP 市场中搜索“playwright”，点击添加即可，非常简单
对话时选择 Builder with MCP，接着发送需求就可以了
接下来playwright MCP就会执行任务了
方式四：在 Cherry 中使用
还是可以当作日常工具使用，配置在Cherry上，可以通过对话实现一些简单的自动化功能
添加MCP配置，参考上面的配置文件，只需要添加一个npx + 两行命令就搞定了
接着在对话框选择playwright MCP，让它告诉你都能做什么
实测最简单的网页截图，Cherry会调用系统默认浏览器执行操作：
而且还是截取的全屏
结语：MCP + AI = 自动化新范式
Playwright MCP不是另一个低代码平台，而是真正让“语言模型接管网页”的落地方案。你不再需要学习 JavaScript，也不再需要反复调试 selector，只需要说出你要什么，AI 就能完成任务。
我自己也在把它集成进 Claude Code 的 Agent 流程中，未来可能构建一套「AI+Browser」的内容抓取自动工具。