別再把瀏覽器當黑盒：agent-browser 如何讓 AI Agent 的網頁操作可觀測、可重播

AI Agent 真正走出聊天介面後，很快就會遇到一個不容易被 demo 呈現的問題：瀏覽器不是一組穩定的 API，而是一個會變動、會載入、會被登入狀態影響的互動環境。代理程式必須先理解頁面，再決定要點哪個按鈕、填哪個欄位，最後還要能證明操作確實完成。若流程只依賴座標或一長串 CSS selector，網站一改版，整個自動化就可能靜默失效。

vercel-labs/agent-browser 提供的是一條偏工程化的路線：用 CLI 把瀏覽器能力包裝成適合 AI Agent 呼叫的操作介面，再用 Accessibility Snapshot 將頁面轉成較容易推理的結構化文字。專案目前是實作型工具，不是教學素材或資源清單；它的價值在於把「代理程式如何安全、可觀測地操作瀏覽器」拆成一組可以被腳本、模型與測試流程重複使用的原語。

一、它解決的不是「能不能點」，而是「代理程式能不能穩定地點」

傳統瀏覽器自動化常見的寫法，是先找出一個 selector，再呼叫 click、fill 或 press。這種方法在固定測試頁面上很直觀，但對 AI Agent 而言有三個問題。第一，selector 需要事先知道 DOM 細節；第二，模型看到的畫面與程式實際使用的 selector 之間缺少共同語言；第三，當頁面有重複元素、延遲載入或重新渲染時，錯誤訊息通常只告訴你「找不到」，不告訴你當下頁面究竟長什麼樣子。

agent-browser 的核心互動模式是先執行 snapshot，取得頁面 Accessibility Tree 的文字表示，再從輸出中的短 ref 指向元素。例如，模型可以先讀到一個帶有 @e1、@e2 等參照的頁面快照，接著使用 click @e1、fill @e2 "..." 或 get text @e3。這個設計把「觀察」和「行動」分開：每次行動都能回溯到當時的頁面語意，而不是只留下某個難以解釋的 selector。

這不代表 selector 完全消失。專案仍支援 CSS、role、text、label 等常見定位方式，適合人類已經知道目標結構的腳本。差別在於，Accessibility Snapshot 與 ref 提供了更適合代理程式的預設路徑：先看可操作的語意，再選擇行動目標。

二、CLI 與 daemon：把瀏覽器程序和代理程式解耦

agent-browser 的命令列介面可以直接讓人類或另一個程序執行瀏覽器操作；對需要大量短命令的 Agent 工作流來說，專案也提供常駐 daemon 模式。命令端不必每次都重新建立整個瀏覽器程序，而是透過本機服務與既有的瀏覽器 session 溝通。這個分層很重要，因為模型呼叫通常是許多小步驟的序列：開頁、等待、讀快照、填欄位、送出、驗證結果。

從工程角度看，daemon 讓「瀏覽器生命週期」不再和「單次命令生命週期」綁死。代理程式可以在同一個 session 中保留 cookies、localStorage 與目前分頁，減少反覆登入與初始化的成本；測試或 CI 也能用明確的 session 名稱隔離不同任務。當某個工作流需要並行處理多個帳號或多個網站時，session 隔離比把所有狀態混在一個全域瀏覽器中更容易診斷。

這個設計也帶來一個必須正視的邊界：daemon 是有權限的本機自動化入口。實際部署時，應把它限制在需要的網路介面與執行環境，避免把未經保護的控制端點暴露到公網；對登入狀態、Cookie、下載檔與 session state 則應採取最小權限和獨立保存策略。工具提供能力，不會自動替你完成威脅模型。

三、從快照到驗證：一個可重播的代理程式工作流

一個實用的 agent-browser 流程，不應只是「點擊成功」就結束，而應該包含觀察、操作與驗證三段：

建立隔離 session 並開啟目標頁面。 對需要登入的流程，先確認 session 是否是預期的帳號與環境。
取得 snapshot。 讓模型或腳本看到當下可互動元素，而不是直接猜 selector。
用 ref 執行最小動作。 每次只做一個明確的 click、fill、press 或 select，並保留命令輸出。
重新觀察結果。 表單送出、頁面轉址或彈窗出現後，再取得一次 snapshot 或讀取特定文字。
保存證據與狀態。 對需要後續接續的任務，保存 storage state；對需要稽核的任務，保存關鍵輸出、URL 與截圖。

這種工作流的重點是「行動後再觀察」，而不是假設網站一定按照預期改變。對模型而言，這也形成一個簡單的控制迴圈：取得環境狀態、提出下一個工具呼叫、讀取結果、修正計畫。它比一次生成十幾個步驟的長腳本更容易在中途恢復。

四、為什麼 Accessibility Snapshot 對 AI Agent 特別有用？

Accessibility Tree 並不是完整 DOM 的替代品，而是以角色、名稱與狀態描述使用者可操作的介面。對語言模型來說，這種輸出通常比壓縮後的 HTML 更接近任務語言：按鈕有名稱，輸入欄位有 label，連結有可讀文字，元素還可以透過 ref 被後續命令引用。

更重要的是，snapshot 是一種可檢查的中介表示。開發者可以把它記錄到測試產物，確認模型到底看見什麼；如果操作選錯，也能回頭檢視當下的頁面結構。當網站使用大量動態元件時，這種「先把觀察結果固定下來」的做法，有助於區分是模型推理錯誤、頁面尚未穩定，還是定位策略本身不可靠。

不過，Accessibility Snapshot 也不應被神化。若網站沒有正確提供語意標籤，快照仍可能不完整；如果元素在操作後重新生成，舊 ref 也可能失效。因此穩定流程需要在頁面重大變更後重新 snapshot，並對關鍵結果增加文字、URL、元素狀態或截圖驗證。

五、MCP 與腳本介面：同一套能力接上不同 Agent

專案同時提供適合命令列工作流的 CLI，以及可供 MCP 客戶端使用的整合方式。這讓瀏覽器能力可以被放進不同的 Agent 架構：簡單任務可由 shell 腳本串接；需要工具發現與結構化呼叫的代理程式，則可透過 MCP 使用同一套瀏覽器操作。

這裡的關鍵不是「多一個協定」而已，而是把瀏覽器操作從某個特定模型的 prompt 技巧，提升成可被替換與測試的工具層。你可以先用 CLI 在終端機重現一個失敗案例，再把相同步驟接到 MCP Agent；也可以在不改變瀏覽器控制核心的情況下，替換上層的規劃器或模型。

但 MCP 工具描述越完整，代理程式可執行的動作也越多。部署時仍應限制可存取的網域、檔案路徑與憑證範圍，並把高風險操作，例如付款、刪除、寄信或提交正式表單，設計成需要人類確認的門檻。

六、安裝與第一個可驗證的操作

專案 README 提供 npm 安裝與直接執行的方式。實際導入前，先確認 Node.js 環境、瀏覽器依賴與執行權限，再用一個不含敏感資料的測試頁面驗證。最小流程可以抽象成以下形式：

# 安装 CLI（实际版本请以专案 README 为准）
npm install -g agent-browser

# 首次下载 Chrome；Linux 可连同系统依赖一起安装
agent-browser install
# agent-browser install --with-deps

# 启动浏览器并开启测试页

# 取得可操作的頁面快照
agent-browser snapshot

# 依 snapshot 中的 ref 執行操作
agent-browser click @e1

# 操作後再次觀察並驗證
agent-browser snapshot

上面的 @e1 只是示意，不能在沒有查看實際 snapshot 的情況下照抄。更可靠的自動化程式會解析命令輸出、確認 ref 仍屬於目前頁面，並在操作後檢查預期文字或 URL。若使用 session state，請把 state 檔案視為憑證處理，不要提交到 Git，也不要放進公開的 CI artifact。

七、把它放進測試與生產工作流前，先補上這些護欄

權限隔離。 用專用瀏覽器 profile 和最低權限帳號執行，將測試、預覽與正式環境分開。

網路限制。 對 Agent 能開啟的網域建立 allowlist；若工具執行在伺服器上，避免將控制端點直接綁到公網介面。

可觀測性。 保留命令、URL、snapshot 摘要、錯誤訊息與必要截圖，但先排除 Cookie、Token、個人資料與表單秘密。

冪等性。 對提交、付款、刪除等不可逆動作，先做 dry run 或預覽，並用唯一識別碼避免重複執行。

失敗恢復。 將長流程切成可重試的階段；每個階段都重新觀察頁面，而不是盲目重播舊 ref。

版本固定。 在 CI 或生產環境鎖定套件版本，並以一組代表性頁面做 smoke test。瀏覽器版本、網站改版與 Accessibility Tree 變化，都可能影響代理程式行為。

結語：瀏覽器是工具，但快照才是代理程式的觀察界面

agent-browser 值得注意的地方，不只是它能替 AI Agent 按鈕或填表單，而是它把瀏覽器自動化整理成一個可觀察、可分段、可驗證的控制迴圈：CLI 負責可組合性，daemon 負責持續 session，Accessibility Snapshot 負責把畫面轉成可推理的語意，ref 負責把觀察和行動連起來，state 與輸出則讓流程有機會重播與稽核。

對想把 Agent 從展示推進到實際工作流的團隊，這種介面比「讓模型自己猜 selector」更值得測試。不過導入成功的關鍵，仍然是把權限、網路、敏感資料與不可逆操作放進系統設計，而不是把所有責任交給模型。若你的下一個 AI 工作流需要操作真實網站，agent-browser 是一個值得用小型、低風險場景開始評估的開源候選。

參考資料

專案首頁：https://github.com/vercel-labs/agent-browser
README 與安裝說明：https://github.com/vercel-labs/agent-browser/blob/main/README.md
npm 套件頁面：https://www.npmjs.com/package/agent-browser