WebDriver BiDi vs WebMCP
它们都叫「控制浏览器的协议」,却解决完全不同时代、完全不同层级的问题。理解它们的边界,比记住名字更重要——读完这篇,你能立刻判断自己的场景该用哪个。
先把两者定位讲清
同样是「管浏览器的协议」,为什么说这两个的控制方向恰好相反?
两个名字都带「浏览器」和「协议」,但它们的控制方向完全相反:一个是外部程序伸进来操控浏览器,一个是网站自己伸出手把能力交给浏览器里的 AI。
由外部程序远程驱动浏览器的协议。Selenium、Puppeteer、Playwright 基于它打开标签页、点击按钮、监听网络、抓取 DOM。浏览器是被操控的客户端。
由网站自身向浏览器内 AI Agent 暴露能力的协议。网站声明「我支持搜索 / 加购 / 下单」,Agent 直接调用结构化工具,而不再模拟鼠标点界面。
用一个比喻立刻区分
一个像遥控器,一个像服务窗口——哪个是哪个?
BiDi = 浏览器的遥控器
外部脚本通过 WebSocket 连入浏览器,双向通信。浏览器把自己当成被远程操控的设备,吐出底层事件——DOM 变化、网络请求、控制台日志。
WebMCP = 网站给 AI 开的业务 API 门
网站主动注册一组结构化工具,浏览器里的 AI Agent 以函数调用方式触发业务动作。绕开脆弱的 DOM 模拟,进入语义层操作。
八个维度并列对照
把它们摆到同一张表上,差异到底有多大?
| 维度 | WebDriver BiDi | WebMCP |
|---|---|---|
| 协议定位 | 浏览器自动化协议(外部 → 浏览器) | 网页与 AI Agent 的通信协议(网站 → 浏览器内 Agent) |
| 主要使用者 | 测试工程师 · 爬虫 · RPA · DevOps | 网站开发者 · AI Agent · 浏览器内置 AI |
| 控制粒度 | 底层:DOM、网络、JS 执行、Cookies、事件 | 业务:网站自定义的「工具」(下单 · 搜索 · 收藏) |
| 连接方向 | 外部进程经 WebSocket 连入浏览器,双向通信 | 同源页面经 JS API 向浏览器内 Agent 声明能力 |
| 需要网站配合? | 不需要——黑盒驱动任意网站 | 需要——网站主动暴露 WebMCP 工具 |
| 标准化进度 | W3C 已有规范,Chrome / Firefox / Edge 都在实现 | Chrome 146 早期预览,Chrome 149 Origin Trial,仅 Chrome |
| 成熟度 | 较成熟,可生产使用(STABLE) | 实验 / 原型期(EXPERIMENTAL) |
| 取代关系 | 逐步取代 CDP(Chrome 专有)与 WebDriver Classic | 不取代 BiDi,补全 AI ↔ 网站语义层的桥梁 |
它们之间真正的联系
方向相反,难道就老死不相往来?
同一个时代趋势
都在追求「让程序更可靠地操作浏览器」——只是面对的「程序」不同:一个是脚本,一个是 AI。
都推崇结构化与双向通信
双向、事件驱动、结构化交互是两者共有的设计哲学,目的都是替换脆弱的「模拟点击」。
可组合在一栈中
外部 Agent 经 BiDi 启动并接管浏览器,浏览器内 AI 再经 WebMCP 调用网站工具,形成上下两层。
背后都有 Chrome 团队推动
Google / Chrome 在 W3C 与 Origin Trial 中同时推进两条协议,但定位互不冲突。
典型适用场景各四例
落到具体活儿上,到底什么时候用哪个?
用 WebDriver BiDi
- 端到端自动化测试(Selenium / Playwright / Puppeteer)
- 动态渲染网站的爬虫抓取与数据采集
- RPA 流程:跨网站批量表单填写与任务执行
- 浏览器层性能监测、网络拦截与调试工具
用 WebMCP
- 电商网站让 AI 直接调用「搜索 / 加购 / 下单」工具
- SaaS 后台暴露「创建工单 / 导出报表」给浏览器 Agent
- 替代脆弱的 DOM 模拟点击,让 AI 操作稳定可解释
- 网站可控地「对 AI 友好」——定义哪些动作允许被代理
代码风格速览
写起来,两者分别长什么样?
// 外部脚本经 WebSocket 连接浏览器 const session = await chromium.connect({ wsEndpoint: 'ws://localhost:9222' }); const page = await session.newPage(); await page.goto('https://example.com'); // BiDi 核心:双向 + 事件驱动 page.on('console', msg => console.log(msg.text())); await page.click('button#buy'); await page.waitForResponse('**/checkout');
// 网站端:注册一个可被 Agent 调用的工具 navigator.modelContext.registerTool({ name: 'addToCart', description: '将商品加入购物车', inputSchema: { type: 'object', properties: { productId: { type: 'string' } }, required: ['productId'] }, async handler({ productId }) { await cart.add(productId); return { ok: true }; } });
最新进展时间线
这两条线,是怎么一步步走到今天的?
该选哪个:四个判断
轮到你拍板时,怎么一句话选对?
参考来源
顺着下面这些一手资料继续读,状态以 Chrome 官方文档为准。