agent-browser與playwright-mcp對比：AI瀏覽器自動(dòng)化選型核心差異解析
為什么選 agent-browser 而不是 playwright-mcp
直接上手的差異
你寫一個(gè) AI Agent，要操作瀏覽器——比如填表、點(diǎn)按鈕、抓數(shù)據(jù)。playwright-mcp 和 agent-browser 都能做，但體驗(yàn)完全不同。
playwright-mcp 是把 Playwright 的能力“套殼”進(jìn) MCP 協(xié)議：它暴露的是底層瀏覽器操作（click, fill, wait_for_selector），返回的 JSON 帶大量元信息（如 DOM 樹快照、事件監(jiān)聽器列表、樣式計(jì)算結(jié)果）。這些對調(diào)試瀏覽器本身有用，但對 AI Agent 來說，90% 是噪音。
agent-browser 反過來：它不暴露瀏覽器細(xì)節(jié)，只暴露語義動(dòng)作和結(jié)構(gòu)化結(jié)果。比如你讓 Agent “提交登錄表單”，它返回：
{
"success": true,
"redirect_url": "https://app.example.com/dashboard",
"extracted": {
"username": "alice",
"last_login": "2024-05-20T08:32:11Z"
}
}沒有 CSS 選擇器路徑，沒有 frame 層級，沒有未渲染的 shadow DOM 節(jié)點(diǎn)。只有你真正需要的數(shù)據(jù)。
關(guān)鍵維度對比
| 特性 | playwright-mcp | agent-browser |
|---|---|---|
| 輸出格式 | 龐大 JSON，含 DOM 快照、樣式、事件等 | 精簡語義化 JSON，只含動(dòng)作結(jié)果與提取字段 |
| 元素定位 | 手寫 CSS/XPath，需反復(fù) inspect 元素 | 自然語言描述 + 自動(dòng)匹配（如 “右上角頭像圖標(biāo)”） |
| 協(xié)議設(shè)計(jì) | Playwright 命令直映射，MCP 封裝層薄 | 原生 MCP Action/Tool 定義，無冗余抽象 |
| 會話管理 | 每次調(diào)用新建 BrowserContext，狀態(tài)不保留 | 支持跨請求會話上下文（cookies、localStorage、history） |
| 性能 | 啟動(dòng) Chromium 實(shí)例約 1.2s，內(nèi)存常駐 300MB+ | 復(fù)用進(jìn)程，冷啟動(dòng) < 200ms，常駐內(nèi)存 < 80MB |
| 移動(dòng)端/云支持 | 需手動(dòng)配置 viewport、userAgent、touch 事件 | 內(nèi)置 mobile preset，自動(dòng)適配 viewport 和手勢模擬 |
| 流式響應(yīng) | 僅支持 polling，延遲高且易丟幀 | WebSocket 原生流式輸出（如頁面加載中實(shí)時(shí)吐文本塊） |
具體場景怎么體現(xiàn)
1. 構(gòu)建客服 Agent
用 playwright-mcp 實(shí)現(xiàn)“查看用戶訂單歷史”：
- 先
goto訂單頁 wait_for_selector等加載完成query_selector_all找所有.order-item- 對每個(gè) item
inner_text()提取內(nèi)容 - 手動(dòng)解析日期、金額、狀態(tài)字段
- 最后拼成 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"
}
]
}
}
}它自動(dòng)處理等待、重試、字段提取、類型轉(zhuǎn)換（如把 "May 20, 2024" 轉(zhuǎn)成 ISO 時(shí)間）。
2. 電商比價(jià)工具
你需要在 5 個(gè)網(wǎng)站抓同款商品價(jià)格。playwright-mcp 要為每個(gè)站點(diǎn)寫?yīng)毩⒌?selector 邏輯，維護(hù) 5 套 XPath；agent-browser 只需統(tǒng)一 schema：
{
"price": "number in [data-testid='price'] or .price or .current-price"
}它內(nèi)置 selector fallback 鏈和容錯(cuò)重試，失敗時(shí)返回 {"price": null, "error": "timeout"}，而不是拋出異?；蚩ㄋ?。
3. 調(diào)試真實(shí)發(fā)生什么
playwright-mcp 報(bào)錯(cuò)常見于：
TimeoutError: waiting for get_by_test_id("submit-btn") failedError: Element is not attached to the DOM
你得開 DevTools，切到 Elements 面板，手動(dòng)驗(yàn)證 selector 是否還有效。
agent-browser 報(bào)錯(cuò)帶上下文：
{
"error": "element_not_found",
"hint": "Button '提交' not visible; found 2 elements matching 'submit' but both are disabled",
"screenshot": "data:image/png;base64,..."
}截圖直接嵌在響應(yīng)里，不用切窗口。
怎么開始
安裝：
pip install agent-browser啟動(dòng)服務(wù)：
agent-browser --port 8000發(fā)送一個(gè)請求（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"}'- 查看文檔：agent-browser.readthedocs.io —— 重點(diǎn)看
browser.extract和browser.interact的 schema 定義。
不需要改現(xiàn)有 MCP client，只要把 tool call 的 name 和 input 按 agent-browser 規(guī)范發(fā)過去就行。