为什么选 agent-browser 而不是 playwright-mcp

直接上手的差异

你写一个 AI Agent，要操作浏览器——比如填表、点按钮、抓数据。playwright-mcp 和 agent-browser 都能做，但体验完全不同。

playwright-mcp 是把 Playwright 的能力“套壳”进 MCP 协议：它暴露的是底层浏览器操作（click, fill, wait_for_selector），返回的 JSON 带大量元信息（如 DOM 树快照、事件监听器列表、样式计算结果）。这些对调试浏览器本身有用，但对 AI Agent 来说，90% 是噪音。

agent-browser 反过来：它不暴露浏览器细节，只暴露语义动作和结构化结果。比如你让 Agent “提交登录表单”，它返回：

{
  "success": true,
  "redirect_url": "https://app.example.com/dashboard",
  "extracted": {
    "username": "alice",
    "last_login": "2024-05-20T08:32:11Z"
  }
}

没有 CSS 选择器路径，没有 frame 层级，没有未渲染的 shadow DOM 节点。只有你真正需要的数据。

关键维度对比

具体场景怎么体现

1. 构建客服 Agent

用 playwright-mcp 实现“查看用户订单历史”：

• 先 goto 订单页
• wait_for_selector 等加载完成
• query_selector_all 找所有 .order-item
• 对每个 item inner_text() 提取内容
• 手动解析日期、金额、状态字段
• 最后拼成 JSON 返回

用 agent-browser：

{
  "tool": "browser.extract",
  "input": {
    "url": "https://shop.example.com/orders",
    "schema": {
      "orders": [
        {
          "id": "text in .order-id",
          "date": "text in .order-date",
          "status": "text in .order-status"
        }
      ]
    }
  }
}

它自动处理等待、重试、字段提取、类型转换（如把 "May 20, 2024" 转成 ISO 时间）。

2. 电商比价工具

你需要在 5 个网站抓同款商品价格。playwright-mcp 要为每个站点写独立的 selector 逻辑，维护 5 套 XPath；agent-browser 只需统一 schema：

{
  "price": "number in [data-testid='price'] or .price or .current-price"
}

它内置 selector fallback 链和容错重试，失败时返回 {"price": null, "error": "timeout"}，而不是抛出异常或卡死。

3. 调试真实发生什么

playwright-mcp 报错常见于：

• TimeoutError: waiting for get_by_test_id("submit-btn") failed
• Error: Element is not attached to the DOM

你得开 DevTools，切到 Elements 面板，手动验证 selector 是否还有效。

agent-browser 报错带上下文：

{
  "error": "element_not_found",
  "hint": "Button '提交' not visible; found 2 elements matching 'submit' but both are disabled",
  "screenshot": "data:image/png;base64,..."
}

截图直接嵌在响应里，不用切窗口。

怎么开始

1. 安装：

   pip install agent-browser

2. 启动服务：

   agent-browser --port 8000

3. 发送一个请求（curl 或 Python requests）：

   curl -X POST http://localhost:8000/v1/tools/browser.navigate \
     -H "Content-Type: application/json" \
     -d '{"url": "https://example.com", "wait_for": "text in h1"}'

4. 查看文档：agent-browser.readthedocs.io —— 重点看 browser.extract 和 browser.interact 的 schema 定义。

不需要改现有 MCP client，只要把 tool call 的 name 和 input 按 agent-browser 规范发过去就行。