Playwright MCP浏览器自动化实战，AI直接操控浏览器

文章目录

- 一、这玩意儿到底是啥
- 二、开装之前，先看看你有啥
- 三、安装
- - [3.1 在 Claude Code 里装](#3.1 在 Claude Code 里装)
  - [3.2 在 Hermes Agent 里配](#3.2 在 Hermes Agent 里配)
  - [3.3 手动配置文件方式](#3.3 手动配置文件方式)
  - [3.4 验证安装](#3.4 验证安装)
- 四、工具全家桶
- - [4.1 页面导航](#4.1 页面导航)
  - [4.2 页面交互](#4.2 页面交互)
  - [4.3 内容获取](#4.3 内容获取)
  - [4.4 多标签管理](#4.4 多标签管理)
  - [4.5 高级功能](#4.5 高级功能)
- 五、实战案例
- - [5.1 案例一：自动抓新闻标题](#5.1 案例一：自动抓新闻标题)
  - [5.2 案例二：表单填写与提交测试](#5.2 案例二：表单填写与提交测试)
  - [5.3 案例三：跨标签比价](#5.3 案例三：跨标签比价)
  - [5.4 案例四：执行 JavaScript 获取页面状态](#5.4 案例四：执行 JavaScript 获取页面状态)
  - [5.5 案例五：Cookie 管理](#5.5 案例五：Cookie 管理)
- 六、自定义配置
- - [6.1 指定浏览器](#6.1 指定浏览器)
  - [6.2 启动选项](#6.2 启动选项)
  - [6.3 设置视口](#6.3 设置视口)
  - [6.4 代理配置](#6.4 代理配置)
- 七、和别的方案打一架
- 八、翻车现场
- - [8.1 Q1：首次运行提示 "Cannot find browser"](#8.1 Q1：首次运行提示 "Cannot find browser")
  - [8.2 Q2：页面操作报 "Element not found"](#8.2 Q2：页面操作报 "Element not found")
  - [8.3 Q3：截图内容为空白](#8.3 Q3：截图内容为空白)
  - [8.4 Q4：Cookie 无法设置](#8.4 Q4：Cookie 无法设置)
  - [8.5 Q5：多标签页操作混淆](#8.5 Q5：多标签页操作混淆)
- 九、安全，别浪
- 十、总结

P.S. 无意间发现了一个巨牛的人工智能教程，非常通俗易懂，对AI感兴趣的朋友强烈推荐去看看，传送门https://blog.csdn.net/qq_34419312

一、这玩意儿到底是啥

先聊点暴论：以前让 AI 操作浏览器，场面基本等于让一个蒙眼的人去拧灯泡------它知道灯泡就在那，但每次伸出去的手都差点意思。

后来微软看不下去了，出了个 Playwright MCP。一句话：这是微软官方维护的"浏览器遥控器"，专门把 Playwright 的能力打包成 MCP 协议，喂给 AI 编程助手。AI 拿到它之后，导航页面、点按钮、填表单、截图、跑 JavaScript，样样都行，而且干得比你快。

这就好比以前你请了个钟点工，进门先问拖把在哪；现在你请了个带全套装备的，进门直接开干，还顺手把你茶几上那包过期薯片扔了------虽然你没让她扔，但效果确实好。

它最大的骚操作，是用无障碍树（Accessibility Tree）定位元素，而不是像素坐标。什么意思？AI 看页面不是看"第 800 像素那个红按钮"，而是看"这个按钮叫提交，作用是提交表单"。这就跟以前追女生靠猜她朋友圈的含义，现在直接给配了个翻译器一样，属于从原始社会直接跳到文明时代。

核心优势，我给你数数：

微软官方维护，跟 Playwright 主项目同步更新，不会用着用着突然没人管
Chromium、Firefox、WebKit 三兄弟全支持
能模拟 iPhone、Android，移动端测试不用真机
无障碍树定位，LLM 友好，不用写 XPath / CSS 选择器
零配置启动，npx 一把梭，浏览器自动下载

说到零配置，我想起我妈。我妈永远说"你自己看着办"，但最后所有事都是她办的。Playwright MCP 也一样：嘴上说零配置，其实背着你下载了 300MB 的浏览器。行吧，这个"妈"我认了。

二、开装之前，先看看你有啥

要求不高，三样东西：

Node.js >= 18，它靠 npx 跑，没有 Node 寸步难行
一个支持 MCP 的 AI 工具，比如 Claude Code、Hermes Agent
能连上 npm registry 的网络，首次运行要下载浏览器，大概 300MB

300MB 啥概念？我下载它那天，进度条走得比我的人生规划还慢。不过下载完就爽了，以后启动秒开，比某些同事回消息的速度都快。

先做个环境检查：

复制代码

node --version   # v18.x 或更高
claude --version # 确认 AI CLI 已安装

三、安装

3.1 在 Claude Code 里装

一条命令的事：

复制代码

# 方式一：项目级，推荐
claude mcp add playwright -s local -- npx @playwright/mcp@latest
# 方式二：全局，所有项目都能用
claude mcp add playwright -s user -- npx @playwright/mcp@latest

-s local 和 -s user 的区别，用一句话概括：一个是你卧室的规矩，一个是你家的规矩。卧室里可以随便躺，客厅里至少得坐直了。但命令都一样快，这点比公司制度强多了。

3.2 在 Hermes Agent 里配

编辑 ~/.hermes/config.yaml：

yaml 复制代码

mcp_servers:
  playwright:
    command: "npx"
    args: ["@playwright/mcp@latest"]
    timeout: 120
    connect_timeout: 60

然后重启 Hermes Agent。启动时它会自动连上 Playwright MCP，工具自动注册，你啥都不用管。

3.3 手动配置文件方式

不想用 CLI 也行，直接写配置文件。项目级用 .mcp.json，用户级用 ~/.mcp.json：

json 复制代码

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

3.4 验证安装

复制代码

claude mcp list

输出里能看到 playwright → npx @playwright/mcp@latest [local] 就齐活了。

四、工具全家桶

Playwright MCP 一共提供大概 20 个工具，分五类。不多，但够用------这配置让我想起我家的工具箱：平时觉得没用，真要用的时候翻半天，最后用的还是那把螺丝刀。20 个工具至少比螺丝刀多，赢。

4.1 页面导航

工具名	功能	参数
`browser_navigate`	导航到指定 URL	url
`browser_go_back`	后退	无
`browser_go_forward`	前进	无
`browser_reload`	刷新	无

四个工具，一个"去"，三个"回"，像极了过年回家：进门是 navigate，被问工资是 go_back，想跑被拽回来是 go_forward，重头再来是 reload。区别是：浏览器 reload 之后页面还是那个页面，你 reload 之后还是那个你。

示例：

复制代码

claude "打开 https://example.com 并截图"

AI 内部就干两件事：

复制代码

browser_navigate(url: "https://example.com")
browser_screenshot()

4.2 页面交互

工具名	功能
`browser_click`	点击元素
`browser_fill`	填输入框
`browser_select_option`	选下拉选项
`browser_hover`	鼠标悬停
`browser_press_key`	按键
`browser_drag_and_drop`	拖拽

这里我得表扬一下 browser_hover。我鼠标悬停超过三秒，基本就是在摸鱼；AI 悬停超过三秒，是在认真思考。同一个动作，不同的命运，这就是人和 AI 的区别。

来段经典登录操作：

复制代码

claude "帮我登录这个网站：打开 https://example.com/login，输入用户名 admin，密码 123456，然后点击登录按钮"

AI 内部调用链路：

复制代码

1. browser_navigate(url: "https://example.com/login")
2. browser_fill(element: "用户名输入框", value: "admin")
3. browser_fill(element: "密码输入框", value: "123456")
4. browser_click(element: "登录按钮")

4.3 内容获取

工具名	功能
`browser_screenshot`	截图（支持整页）
`browser_get_content`	获取页面文本
`browser_get_element_text`	获取指定元素文本
`browser_get_attribute`	获取元素属性

4.4 多标签管理

工具名	功能
`browser_new_page`	新建标签页
`browser_close_page`	关闭当前标签页
`browser_switch_page`	切换标签页
`browser_list_pages`	列出所有标签页

以前我自己开 20 个标签页，浏览器要死要活地警告我"内存不足"；现在 AI 开 20 个标签页，浏览器一声不吭，任劳任怨。同一个浏览器，两副面孔，我终于明白了什么叫"干活的是孙子，指挥的是大爷"。

4.5 高级功能

工具名	功能
`browser_evaluate`	执行 JavaScript
`browser_get_cookies`	读 Cookie
`browser_set_cookies`	设 Cookie
`browser_clear_cookies`	清 Cookie
`browser_take_snapshot`	拿无障碍树快照

五、实战案例

5.1 案例一：自动抓新闻标题

需求：打开 Hacker News，提取首页前 10 条标题和链接。

复制代码

claude "打开 https://news.ycombinator.com，提取首页前10条新闻的标题和链接，以表格形式返回"

以前干这事，我得先写爬虫、加代理、处理反爬、调格式，一下午就没了。现在一句话搞定。那一刻我看着我电脑里积灰的爬虫代码，突然有种想把它烧给列祖列宗的冲动------列祖列宗可能也看不懂，但仪式感得有。

AI 执行过程：

复制代码

1. browser_navigate(url: "https://news.ycombinator.com")
2. browser_get_content() → 获取页面文本
3. 解析标题行和链接行
4. 生成 Markdown 表格

5.2 案例二：表单填写与提交测试

复制代码

claude "打开 https://example.com/register，帮我完成用户注册表单：
1. 用户名：test_user_001
2. 邮箱：test@example.com
3. 密码：Test@123456
4. 确认密码：Test@123456
5. 勾选同意条款
6. 点击注册按钮
然后截图告诉我是否注册成功"

以前测表单，我要么手点一百遍，要么写脚本改一百遍。现在动动嘴就行。这感觉怎么说呢，就像你终于从"自己做饭"升级到了"点外卖"------但你妈可能觉得你在偷懒。测完记得把测试数据清掉，别问我是怎么知道的。

5.3 案例三：跨标签比价

复制代码

claude "帮我比价 iPhone 16 Pro Max：
1. 打开淘宝搜索 'iPhone 16 Pro Max'
2. 新建标签页打开京东搜索同款
3. 切换到淘宝截图搜索结果
4. 切换到京东截图搜索结果
5. 汇总两个平台的最低价格"

比价这功能，我称之为"人类最后的尊严"。因为当 AI 都会比价了，你买东西再买贵了，就彻底没有借口了。以前是"我不会比价"，以后只能老老实实说"我懒"。

5.4 案例四：执行 JavaScript 获取页面状态

复制代码

claude "打开 https://example.com，执行以下 JavaScript 并返回结果：
1. 获取页面所有图片的 src
2. 检查页面是否有 404 资源
3. 获取页面加载性能数据（performance.timing）"

AI 内部调用：

复制代码

browser_navigate(url: "https://example.com")
browser_evaluate(script: "Array.from(document.images).map(img => img.src)")
browser_evaluate(script: "performance.getEntriesByType('resource').filter(e => e.responseStatus >= 400)")
browser_evaluate(script: "JSON.stringify(performance.timing)")

复制代码

claude "登录 https://example.com，获取登录后的 Cookie 信息，保存到文件"

AI 内部调用：

复制代码

browser_navigate(url: "https://example.com/login")
browser_fill(element: "用户名", value: "myuser")
browser_fill(element: "密码", value: "mypass")
browser_click(element: "登录按钮")
browser_get_cookies() → 返回 Cookie 数组

六、自定义配置

6.1 指定浏览器

yaml 复制代码

mcp_servers:
  playwright:
    command: "npx"
    args: ["@playwright/mcp@latest"]
    env:
      PLAYWRIGHT_CHROMIUM_EXECUTABLE: "/usr/bin/chromium-browser"

6.2 启动选项

复制代码

# 用 Chrome 而不是默认 Chromium
claude mcp add playwright -- npx @playwright/mcp@latest --browser=chrome
# 无头模式（默认）
claude mcp add playwright -- npx @playwright/mcp@latest --headless
# 显示浏览器窗口（调试用）
claude mcp add playwright -- npx @playwright/mcp@latest --visible

--headless 无头模式，让我想起程序员的理发史：效果其实不错，但过程没人看得见。--visible 就是反过来，活干得怎么样全程直播，领导看了都说好。

6.3 设置视口

yaml 复制代码

mcp_servers:
  playwright:
    command: "npx"
    args: ["@playwright/mcp@latest"]
    env:
      PLAYWRIGHT_VIEWPORT_WIDTH: "375"    # iPhone 宽度
      PLAYWRIGHT_VIEWPORT_HEIGHT: "812"   # iPhone 高度

6.4 代理配置

yaml 复制代码

mcp_servers:
  playwright:
    command: "npx"
    args: ["@playwright/mcp@latest"]
    env:
      PLAYWRIGHT_PROXY: "http://proxy.example.com:8080"

七、和别的方案打一架

市面上同类选手不少，主要就仨：

对比维度	Playwright MCP	Chrome DevTools MCP	Puppeteer MCP
维护方	Microsoft	Google	社区
浏览器支持	Chromium + Firefox + WebKit	仅 Chrome	仅 Chromium
核心能力	自动化操作	调试诊断	自动化操作
工具数量	~20 个	29 个	~15 个
无障碍树	✅ 原生支持	❌ 无	❌ 无
多标签页	✅	❌	✅（有限）
Console 读取	✅ 基础	✅✅✅ 完整	❌
性能分析	❌	✅✅✅	❌
网络拦截	✅ 完整	✅✅✅ 完整	✅ 基础
启动方式	自启动	连接已有 Chrome	自启动
AI 友好度	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐

选型怎么选？一句话：Chrome DevTools MCP 是调试界的摄影师，Puppeteer MCP 是社区的野路子，Playwright MCP 是微软的亲儿子。这就跟选手机似的：一个拍照好，一个续航长，一个全家桶。成年人当然全都要------就是钱包不答应。技术选型也一样，反正最后你大概率三个都装了。

八、翻车现场

8.1 Q1：首次运行提示 "Cannot find browser"

原因：浏览器二进制还没下载。解决：

复制代码

npx playwright install chromium
# 或者干脆全装
npx playwright install

8.2 Q2：页面操作报 "Element not found"

原因：AI 通过无障碍树定位失败。解决：

描述更具体一点，比如"点击页面中央那个蓝色的'登录'按钮"
让 AI 先截个图，再看着图操作
用 browser_take_snapshot 拿无障碍树结构

AI 找不到元素，就像你妈找不到你的袜子：东西明明就在那，她就是看不见。区别是，你妈会补一句"就在你屋里，自己找！"，而 AI 只会冷冰冰地来一句 "Element not found"。同样是找不到，一个带情绪，一个带日志。

8.3 Q3：截图内容为空白

原因：页面还没加载完，或者需要滚动。解决：等一等。

复制代码

claude "打开页面后等待5秒再截图"

原因：Cookie 的域名和当前页面域名对不上。解决：先导航到目标域名，再设 Cookie。顺序很重要，跟先穿袜子再穿鞋一个道理。

8.5 Q5：多标签页操作混淆

原因：AI 同时操作多个标签页，上下文串了。解决：分步执行，每步操作后确认一下当前标签页状态。

九、安全，别浪

能用，但别乱用。给你划重点：

✅ 可以：访问公开网页、提取信息、测试环境表单自动化、截图、执行只读 JavaScript
❌ 不行：生产环境输真实密码、自动执行转账删除类敏感操作、把 Cookie 交给不信任的 AI 提示、爬违反 robots.txt 的页面

最佳实践：

测试环境用独立测试账号
敏感操作加人工确认
用 --headless 减少界面干扰
定期清理浏览器缓存和 Cookie

把真实密码交给 AI，等于把银行卡密码写在便利贴上再贴电脑屏幕------不是 AI 不可信，是防君子不防小人，防小人不防傻子。咱们写代码的，可以菜，但不能傻。这两件事我已经占了第一件，第二件咱得守住。

十、总结

一句话总结这个工具的价值：以前是"我写代码让浏览器干活"，现在是"我跟 AI 说一声，AI 让浏览器干活"。科技越发达，人类越像甲方。

它解决的痛点：

痛点	解决方案
元素定位困难	无障碍树语义定位，不用 XPath/CSS
跨浏览器兼容	原生支持三大引擎
AI 集成复杂	MCP 标准协议，一行命令搞定
上下文管理	自动截图 + 内容提取辅助理解

适用场景：

网页数据抓取和监控
端到端测试自动化
表单填写和提交验证
多平台比价和信息聚合
页面状态检查和性能验证
跨浏览器布局对比

最后送各位一句话：工具越来越强是好事，但别高兴太早------当 AI 连浏览器都会用了，下一个被优化的可能就是我这种只会点点点的。不对，我会写代码。......好吧，AI 也会写了。那我会什么？我会讲这个。行，那这条也算个技能。

快速上手，一分钟：

复制代码

claude mcp add playwright -s local -- npx @playwright/mcp@latest
claude "打开 https://example.com 截图"

P.S. 无意间发现了一个巨牛的人工智能教程，非常通俗易懂，对AI感兴趣的朋友强烈推荐去看看，传送门https://blog.csdn.net/qq_34419312

Playwright MCP浏览器自动化实战，AI直接操控浏览器

文章目录

一、这玩意儿到底是啥

二、开装之前，先看看你有啥

三、安装

3.1 在 Claude Code 里装

3.2 在 Hermes Agent 里配

3.3 手动配置文件方式

3.4 验证安装

四、工具全家桶

4.1 页面导航

4.2 页面交互

4.3 内容获取

4.4 多标签管理

4.5 高级功能

五、实战案例

5.1 案例一：自动抓新闻标题

5.2 案例二：表单填写与提交测试

5.3 案例三：跨标签比价

5.4 案例四：执行 JavaScript 获取页面状态

5.5 案例五：Cookie 管理

六、自定义配置

6.1 指定浏览器

6.2 启动选项

6.3 设置视口

6.4 代理配置

七、和别的方案打一架

八、翻车现场

8.1 Q1：首次运行提示 "Cannot find browser"

8.2 Q2：页面操作报 "Element not found"

8.3 Q3：截图内容为空白

8.4 Q4：Cookie 无法设置

8.5 Q5：多标签页操作混淆

九、安全，别浪

十、总结