乐于分享
好东西不私藏
当前位置：夜雨聆风 > 技术教程 > 软件教程 > 这7个工具让你的AI拥有自动操作浏览器的超能力

这7个工具让你的AI拥有自动操作浏览器的超能力

当前时间： 2026-04-27 16:33:05 更新时间： 2026-04-27 分类：软件教程 评论(0)

这7个工具让你的AI拥有自动操作浏览器的超能力

引言

Claude Code 能让 AI 直接操作浏览器 —— 自动测试页面、截图、填写表单、抓取数据。但支持的工具不少，定位和适用场景差别挺大。本文对比 7 个工具：Playwright MCP、Chrome DevTools MCP、Puppeteer MCP、Selenium MCP、Browser Use MCP，以及阿里巴巴 PageAgent 和最近冒头的 OpenCLI。每个都附带安装步骤，帮你做选择。

一、Playwright MCP：最成熟的通用方案

它是什么

Playwright 是微软开源的浏览器自动化框架，支持 Chromium、Firefox、WebKit 三大内核。MCP 版本让 Claude Code 能通过自然语言调用 Playwright 的能力。

适合什么场景

  • • E2E 自动化测试、回归测试
  • • 页面截图、PDF 导出
  • • 爬虫和数据抓取
  • • 需要跨浏览器兼容性的场景

安装步骤

前置条件：已安装 Node.js 18+ 和 Claude Code CLI。终端执行一条命令：

claude mcp add playwright npx @playwright/mcp@latest

WSL 环境下 shell 解析有问题，加引号：

claude mcp add playwright npx "@playwright/mcp@latest"

验证安装：

claude mcp list

看到 playwright 在列表中即为成功。手动配置方式（可选）：编辑 \~/\.claude/settings\.json：

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

使用示例

帮我打开百度，搜索"Claude Code"并截图
访问 localhost:1080，检查页面是否有错误，把 console 日志发给我
帮我生成一个 Playwright 测试，流程是：打开首页 -> 点击登录 -> 输入用户名密码 -> 验证跳转

注意事项

  • • Playwright MCP 启动时会自动下载 Chromium，首次使用需要等几分钟
  • • 页面结构复杂时，建议先用 browser\_snapshot 获取页面结构再操作
  • • @latest 标签保证始终用最新版本

二、Chrome DevTools MCP：前端调试利器

它是什么

Google 官方推出的 Chrome DevTools MCP 插件，提供 29 个工具，覆盖浏览器自动化、性能分析、网络监控。GitHub: claude.com/plugins/chrome-devtools-mcp

适合什么场景

  • • 前端开发调试（检查 DOM、查看样式、分析布局）
  • • 性能分析（Lighthouse 指标、Core Web Vitals）
  • • 网络请求监控（查看 API 调用、分析加载性能）
  • • 需要深度访问 Chrome 开发者工具的场景

与 Playwright 的区别

Playwright 是从外部操控浏览器，适合自动化流程；Chrome DevTools MCP 是深入浏览器内部，适合调试和分析。两者互补，不是替代关系。

安装步骤

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

然后在 Chrome 中安装对应的 DevTools 扩展即可连接。

使用示例

检查一下当前页面的布局问题，有没有 overflow 的情况
帮我分析一下这个页面的加载性能，看看哪些资源最慢

三、Puppeteer MCP：轻量级 Chrome 控制

它是什么

Puppeteer 是 Google 官方维护的 Node.js 库，专门控制 Chrome/Chromium。Puppeteer MCP 把它的能力通过 MCP 协议暴露给 Claude Code。相比 Playwright，Puppeteer 更轻量，只专注 Chromium 内核。社区里有几个主要实现：

  • • jaenster/puppeteer-mcp-claude
  • • andytango/puppeteer-mcp

适合什么场景

  • • 截图和 PDF 生成（Puppeteer 在这方面是业界标准）
  • • 服务端渲染（SSR）页面的爬虫
  • • 轻量级浏览器自动化，不需要 Firefox/WebKit 支持
  • • 已有 Puppeteer 项目的迁移和集成

安装步骤

# 全局安装npm install -g puppeteer-mcp-server

添加到 Claude Code 配置：

claude mcp add puppeteer puppeteer-mcp-server

或者通过 settings.json 手动配置：

{"mcpServers":{"puppeteer":{"command":"npx","args":["-y","puppeteer-mcp-server"]}}}

首次使用会自动下载 Chromium。

使用示例

用 Puppeteer 打开这个页面，截图保存为 PDF
抓取这个 SPA 页面的完整 HTML，包括 JavaScript 渲染后的内容

四、Selenium MCP：企业级测试标准

它是什么

Selenium 是最早也最广泛使用的浏览器自动化框架。Selenium MCP 把它的能力通过 MCP 协议接入 Claude Code。它支持几乎所有主流浏览器（Chrome、Firefox、Safari、Edge），社区生态也最庞大。PyPI: selenium-mcp-server

适合什么场景

  • • 企业级 E2E 测试（很多公司的测试体系基于 Selenium）
  • • 需要测试多浏览器的兼容性
  • • 遗留 Selenium 项目的 AI 化改造
  • • 自动化测试团队从 Selenium Grid 迁移

安装步骤

pip install selenium-mcp-server

添加到 Claude Code 配置：

claude mcp add selenium selenium-mcp-server

需要确保系统中已安装对应浏览器的 WebDriver（或使用 selenium-manager 自动管理）。

使用示例

用 Selenium 打开这个页面，等待 3 秒后截图
帮我用 Selenium 完成登录流程，验证页面元素是否存在

五、Browser Use MCP：AI 原生浏览器自动化

它是什么

Browser Use 是一个为 AI Agent 设计的浏览器自动化框架。它的 MCP Server 让 Claude Code 以 AI 友好的方式操控浏览器 —— 不是机械地按坐标点击，而是理解页面语义后智能操作。GitHub: kontext-dev/browser-use-mcp-server文档: docs.browser-use.com

适合什么场景

  • • AI Agent 需要理解页面内容并做决策（不只是机械操作）
  • • 复杂的网页交互流程（需要理解上下文）
  • • 智能数据提取（基于语义而非固定选择器）
  • • Agent 需要看懂页面后再行动

安装步骤

# 使用 pip 安装pip install browser-use-mcp-server# 或使用 uv（更快）uv pip install browser-use-mcp-server

添加到 Claude Code 配置：

claude mcp add browser-use browser-use-mcp-server

如果页面提示找不到浏览器驱动：

playwright install

使用示例

用 Browser Use 打开这个电商页面，帮我找到最便宜的商品
分析这个页面的主要内容和结构，提取关键信息

六、阿里巴巴 PageAgent：让 AI 住进网页里

它是什么

PageAgent 是阿里巴巴开源的纯前端 GUI Agent（GitHub: alibaba/page-agent，约 14.7k Stars）。它不是从外部操控浏览器，而是直接嵌入网页内部，让 AI 理解并操作当前页面。

适合什么场景

  • • SaaS 产品中添加 AI 助手功能（几行代码集成）
  • • 智能表单填写（把多次点击变成一句话）
  • • ERP/CRM/ 管理后台的自然语言操作
  • • 需要保持用户登录态、实时交互的场景

与前五者的核心区别

维度
Playwright / DevTools / Puppeteer 等
PageAgent
运行位置
外部控制浏览器
嵌入页面内部
需要浏览器进程
是
否（当前页面即可）
交互方式
代码指令
自然语言 + DOM 解析
用户登录态
需手动配置 Cookie
自动保持
适合人群
开发者 / 测试人员
产品团队 / 终端用户

安装步骤

方式一：NPM 集成（开发者）

npm install page-agent

在代码中初始化：

import { PageAgent } from'page-agent';const agent = newPageAgent({// 配置 LLM 模型和 API Key});await agent.execute('帮我填写这个表单');

方式二：Chrome 扩展（普通用户）在 Chrome 应用商店搜索安装 Page Agent 扩展，打开目标网页后点击扩展图标即可用自然语言操作页面。方式三：MCP Server（Beta，配合 Claude Code/Cursor）

  1. 1. 在 Chrome 中安装 Page Agent 扩展
  2. 2. 在 MCP 客户端配置中添加 PageAgent Server
  3. 3. 配置完成后，Claude Code 可直接通过 MCP 协议操控浏览器官方文档: alibaba.github.io/page-agent

七、OpenCLI：把网站变成命令行

它是什么

OpenCLI 是一个 AI 原生的 CLI 运行时框架，由开发者 jackwener 于 2026 年 3 月 14 日发布。思路很直接：把任何网站或 Electron 桌面应用变成命令行工具。开源两天拿到 1.8K GitHub Stars，最近挺火。GitHub: jackwener/opencli

工作原理

与传统的 GUI 自动化（让 AI 看截图、点按钮、填表单，每步调用视觉模型）不同，OpenCLI 的思路是：网页上看到的所有数据，背后都有 API 接口在返回。它通过 Chrome 浏览器直接调用这些底层 API，把网页能力提取成命令行命令。

  • • 复用 Chrome 登录态 —— 无需 API 密钥，零风控风险
  • • 无需源码或 API 文档 —— 直接从外部把应用的操作能力掏出来
  • • 已支持 19+ 平台（B 站、知乎等），80+ 命令

与 MCP 的关系

OpenCLI 与 MCP 是互补关系：

  • • MCP 需要应用方主动提供接口
  • • OpenCLI 不需要应用方配合，直接从外部提取能力
  • • 理想链路：OpenCLI 将网站 CLI 化 → 包装成 MCP Server → AI Agent 通过 MCP 调用

适合什么场景

  • • AI Agent 需要操控第三方网站 / 应用（如 B 站、知乎、飞书等）
  • • 不需要写脚本点按钮，直接调命令
  • • 复用已有 Chrome 登录态，无需处理验证码、风控
  • • 把 Electron 桌面应用（如微信、钉钉）变成命令行

安装步骤

# 安装 OpenCLInpm install -g @jackwener/opencli# 查看支持的命令opencli --helpopencli list# 使用具体平台命令（示例）opencli bilibili search "AI"opencli zhihu trending

与 Claude Code 配合时，OpenCLI 作为命令行工具可以被 Claude 直接在 Bash 中调用：

帮我用 opencli 查一下知乎今天的热搜
用 opencli 在 B站搜索"机器学习"，把前 5 个结果发给我

注意事项

  • • 需要 Chrome 浏览器已登录目标平台账号
  • • 2026 年 3 月版本有重大变更，建议使用最新版
  • • 建议关闭广告拦截类插件以避免干扰

八、7 个工具对比总结

Playwright MCP
Chrome DevTools MCP
Puppeteer MCP
Selenium MCP
Browser Use MCP
PageAgent
OpenCLI
开发者
微软
Google
Google / 社区
Selenium / 社区
Kontext-dev
阿里巴巴
jackwener
核心能力
浏览器自动化
浏览器调试分析
Chrome 控制
多浏览器自动化
AI 语义理解操控
页面内 AI 操控
网站变命令行
安装方式
npm 一行命令
npm + Chrome 扩展
npm/pip
pip
pip
npm / 扩展
npm
适合测试
✅
❌
⚠️ 可以
✅
⚠️ 可以
❌
❌
适合前端调试
⚠️ 一般
✅
⚠️ 一般
❌
❌
⚠️ 一般
❌
适合爬虫
✅
❌
✅
✅
⚠️ 偏重理解
❌
⚠️ 限支持平台
适合 AI Agent
⚠️ 机械操作
❌
⚠️ 机械操作
⚠️ 机械操作
✅
✅
✅
适合产品集成
❌
❌
❌
❌
❌
✅
⚠️ 间接
跨浏览器
✅
❌ 仅 Chrome
❌ 仅 Chromium
✅
✅
✅ 页面无关
依赖 Chrome
成熟度
高
中
高
高
中
中
新（2026.3）

怎么选

  • • 自动化测试、截图 → Playwright MCP（最成熟，首选）
  • • 前端开发调试 → Chrome DevTools MCP（官方出品，调试能力强）
  • • 轻量 Chrome 控制、PDF 生成 → Puppeteer MCP（Google 官方维护，轻量）
  • • 企业级多浏览器测试 → Selenium MCP（生态最大，支持最广）
  • • AI Agent 智能操控网页 → Browser Use MCP（理解语义，不只是机械点击）
  • • 给产品加 AI 助手 → PageAgent（嵌入页面内，保持登录态）
  • • 操控第三方网站 / 应用 → OpenCLI（网站变命令行，零风控）

九、补充说明

以上工具都基于 MCP（Model Context Protocol）协议或与之兼容。MCP 是 Anthropic 提出的标准化接口，让 AI 模型能通过统一方式调用外部工具。安装通常一条命令，升级也不用改代码，多个工具可以同时装互不影响。在 Claude Code 里装了多个浏览器工具后，AI 会根据你的需求自动选。说截个图它用 Playwright，说检查一下页面布局可能用 Chrome DevTools MCP，说帮我查一下知乎热榜可能用 OpenCLI。工作需要同时做测试、调试和操控第三方网站的话，完全可以同时装多个。

相关工具官网链接：

  • Playwright MCP 安装指南(https://playwright.dev/mcp/installation）

  • Chrome DevTools MCP 插件(https://claude.com/plugins/chrome-devtools-mcp)

  • puppeteer-mcp-claude(https://github.com/jaenster/puppeteer-mcp-claude)

  • selenium-mcp-server(https://pypi.org/project/selenium-mcp-server/)

  • Browser Use MCP Server(https://github.com/kontext-dev/browser-use-mcp-server)

  • PageAgent 官方文档(https://alibaba.github.io/page-agent/)

  • Opencli(https://github.com/jackwener/opencli)

关注我们，助你掌握更多AI超能力！

)