Agent-Browser：專為 AI 打造的瀏覽器自動化工具

2026-03-06 約 1526 字預計閱讀 7 分鐘

在 AI Agent 快速發展的今天，讓 AI 能夠「看見」並操作網頁成為一項核心能力。無論是自動化測試、數據抓取，還是幫助用戶完成複雜的網頁操作，我們都需要一個強大且易於 AI 理解的瀏覽器工具。

過去，開發者們常用 Playwright 或 Puppeteer 來進行瀏覽器自動化。這些工具功能強大，但它們的輸出並非專為 AI 設計。最近發現了 Vercel Labs 的這個開源項目 Agent-Browser，它從底層就為 AI Agent 優化，帶來了全新的使用體驗。

什麼是 Agent-Browser？

Agent-Browser 是一個開源的 Headless 瀏覽器自動化 CLI 工具，由 Vercel Labs 開發。它採用 Rust + Node.js 的混合架構，核心特點是專為 AI 設計的輸出格式和極致的易用性。

與傳統工具不同，Agent-Browser 不僅關注「能做多少」，更關注「AI 能多好地理解和使用」。

與其他工具的對比

與 Playwright / Puppeteer 的區別

特性	Playwright / Puppeteer	Agent-Browser
設計目標	開發者自動化測試	AI Agent 操作
輸出格式	HTML / 原始數據	結構化 Accessibility Tree
元素引用	CSS Selector / XPath	確定性 Refs (@e1, @e2)
安裝難度	需編寫腳本	一行命令即用
性能	依賴 Node.js	Rust CLI + Node.js 混合

Playwright 和 Puppeteer 是優秀的開發者工具，但它們需要編寫大量代碼來解析頁面結構。Agent-Browser 則直接輸出 AI 最容易理解的格式。

與 OpenClaw 內置 Browser 的區別

作為 OpenClaw 用戶，你可能已經在使用內置的 browser 工具。Agent-Browser 作為獨立工具，提供了額外的功能：

功能	OpenClaw Browser	Agent-Browser
基礎截圖	✅	✅
帶標註截圖	❌	✅
PDF 導出	❌	✅
全頁長截圖	❌	✅
iOS 模擬器	❌	✅
Cloud 瀏覽器	❌	✅

Agent-Browser 不是為了取代現有工具，而是作為功能補充和獨立技能存在。

Agent-Browser 的核心優勢

1. 專為 AI 優化的 Snapshot 輸出

傳統工具返回 HTML，AI 需要從中解析出可交互元素。Agent-Browser 直接返回結構化的 Accessibility Tree：

- link "人生這部戲" [ref=e1]
- link "文章" [ref=e2]
- button "選擇語言" [ref=e7]
- textbox "Email" [ref=e3]

每個元素都有確定性的 @eN 引用，AI 可以直接使用這些引用進行操作，無需重新查詢 DOM。

2. 帶標註的視覺反饋

使用 --annotate 參數，Agent-Browser 會在截圖上標註數字編號，對應 snapshot 中的 refs：

[1] @e1 link "人生這部戲"
[2] @e2 link "文章"

這對多模態 AI 特別有用——AI 既能「看到」頁面佈局，又能精確操作元素。

3. PDF 導出能力

這是許多場景的剛需：頁面存檔、報告生成、簽收證明等。Agent-Browser 內建 PDF 導出，無需額外配置。

4. 極簡的安裝和使用

無需編寫腳本，無需配置環境，一行命令即可開始：

agent-browser open example.com

安裝步驟

前提條件

Node.js 16+

安裝命令

# 全局安裝
npm install -g agent-browser

# 下載 Chromium（首次使用）
agent-browser install

# 驗證安裝
agent-browser --version

Linux 用戶注意

如果遇到共享庫錯誤，運行：

agent-browser install --with-deps
# 或
npx playwright install-deps chromium

使用示例

基礎工作流

# 1. 開啟網頁
agent-browser open https://www.frank.hk

# 2. 獲取可交互元素
agent-browser snapshot -i

# 3. 點擊元素（使用 ref）
agent-browser click @e1

# 4. 填寫表單
agent-browser fill @e3 "test@example.com"

# 5. 截圖保存
agent-browser screenshot page.png

# 6. 關閉瀏覽器
agent-browser close

鏈式命令

agent-browser open example.com && \
  agent-browser wait --load networkidle && \
  agent-browser snapshot -i && \
  agent-browser screenshot page.png && \
  agent-browser close

帶標註截圖

agent-browser open https://www.frank.hk
agent-browser screenshot --annotate page.png
agent-browser close

輸出會顯示：

✓ Screenshot saved to page.png
   [1] @e1 link "人生這部戲"
   [2] @e2 link "文章"
   [3] @e7 button "選擇語言"

PDF 導出

agent-browser open https://www.frank.hk
agent-browser pdf page.pdf
agent-browser close

適用場景

AI Coding Agent 的技能庫
- 給 Claude Code、Codex、Cursor 等工具增加瀏覽器能力
自動化測試腳本
- 快速驗證頁面功能，無需編寫複雜代碼
數據抓取工作流
- 結合 AI 理解頁面結構，精確提取數據
頁面存檔與報告
- PDF 導出適合保存頁面狀態
OpenClaw 的功能擴展
- 當需要 PDF、長截圖或 iOS 測試時作為補充

總結

Agent-Browser 代表了瀏覽器自動化工具的演進方向——從「服務開發者」到「服務 AI」。它不是要取代 Playwright 或 Puppeteer，而是為 AI Agent 時代提供了一個更合適的工具。

對於 OpenClaw 用戶來說，Agent-Browser 是一個理想的補充技能：當你需要 PDF 導出、帶標註截圖或 iOS 模擬時，它可以完美填補現有功能的空白。

目錄

目錄