！ 本篇文章將會介紹 agent-browser 入門：給 Agent 一雙手，期望大家都能讓 Agent 自己開網頁、看頁面、點按鈕、填表單 :D
W2 收官時我留了一個尾巴：發文這步目前還是靠我的 agent-browser 手感在撐，還沒系統化——而這正是 W3 的全部內容。今天第三週開張，先給 Agent 裝上雙手。前兩週它已經會寫文章（W1）、會看班表自動跑（W2），但寫完的文章要上架到 iT 邦幫忙，得有人開瀏覽器、貼標題、貼內文、按送出。這週的目標就是把「人開瀏覽器」換成「Agent 開瀏覽器」。本日範圍：安裝 agent-browser，以及四個核心操作——open、snapshot、click、fill。看起來樸素，但整週的瀏覽器自動化都建立在這四招上。
讀完這篇你會學到：
# 確認 Node 環境（npm 會一起帶上來）
node -v
# 安裝 CLI 本體
npm i -g agent-browser
# 下載它要驅動的瀏覽器——漏了這步，第一個指令就會跟你哭
agent-browser install
# 驗收（本系列機器上目前是 0.34.0）
agent-browser --version
安裝只要 npm i -g agent-browser 加 agent-browser install 兩步，但有一個觀念要先建立：CLI 跟瀏覽器是兩件事。前者是你在終端機敲的指令，後者才是真正開網頁的那顆 Chrome，agent-browser install 負責把瀏覽器備齊。
第二個觀念：agent-browser 不是每敲一個指令就開一顆新瀏覽器。第一次執行時它會在背景叫起一個 daemon（常駐程序），之後所有指令都送交同一顆瀏覽器處理——所以連續下指令的體感就像在同一場 session 裡操作，頁面不會憑消失不見。它底層直接透過 CDP（Chrome DevTools Protocol）驅動 Chrome/Chromium，不是 Playwright 也不是 Puppeteer 的包殼。閒置約一小時後 daemon 會自動收工省資源，下次有指令再自動醒來。
裝完先來個 30 秒煙霧測試：
# 開一頁
agent-browser open https://example.com
# 截圖存證——headless 模式你看不到畫面，截圖就是你的眼睛
agent-browser screenshot /tmp/smoke.png
# 確認沒問題就收工
agent-browser close
你我看網頁靠渲染出來的畫面，Agent 看網頁靠 snapshot。它吐出來的不是原始 HTML，而是 accessibility tree（無障礙樹），並且給每個可互動的元素發一個 @ref 編號：
agent-browser open https://example.com
agent-browser snapshot -i # -i = 只列可互動元素，輸出最精簡
輸出長這樣（簡化示意）：
Page: Example Domain
URL: https://example.com/
@e1 [link] "More information..."
為什麼不直接把 HTML 丟給 Agent？這是 token 經濟學。一個中型網頁的原始 HTML 動輒數十萬 token，塞進 context 不是爆表就是燒錢；accessibility tree 把頁面壓縮到數百 token 等級，Agent 還能直接知道哪個元素可以點、叫什麼名字。-i 進一步只保留可互動元素，等於把「按鈕清單」直接遞到 Agent 手上。對 CLI agent 來說，這個設計是成敗關鍵：context 有限的狀況下，看頁面的成本越低，剩給「思考跟決定下一步」的空間就越多。
snapshot 還有幾個好用的旗標：
agent-browser snapshot -i -u # 連結附上 href
agent-browser snapshot -i -s "#main" # 只看某個 CSS selector 範圍內
agent-browser snapshot -i --json # 機器可讀格式
小小小測驗：你知道 Agent 透過 snapshot 看到的頁面，跟你眼睛看到的畫面可能完全「不一樣」嗎？
答案：snapshot 讀的是網頁的無障礙標記（role、label、placeholder）。有些網站畫面做得美輪美奐，元素卻沒有語意標籤，Agent 看到的就是一片模糊。所以「給人看的 UI」不等於「給 Agent 看的 UI」——這也解釋了為什麼 W3 後面要花一整天教 selector 跟等待策略。
工具認識完了，拿真網站練一輪：讓 Agent 去 DuckDuckGo 搜尋。
agent-browser open https://duckduckgo.com
agent-browser snapshot -i # 找到搜尋框的 ref，假設是 @e3
agent-browser fill @e3 "agent-browser cli"
agent-browser press Enter # 按 Enter 送出搜尋
agent-browser wait --load networkidle # 等網路請求穩定，別搶拍
agent-browser snapshot -i # 頁面變了，refs 全部重發
agent-browser screenshot /tmp/results.png
拆解一下四個角色的分工：
open：導航到指定 URLsnapshot：看頁面、領取這一輪的 @ref 號碼牌fill：清空後再填入（相對地，type 是直接疊打上去——操作表單用 fill 穩很多，不會跟殘留文字混在一起）click：點 @ref（也可以吃 CSS selector）操作完想回收資料，用 get 系列：
agent-browser get title # 頁面標題
agent-browser get url # 目前網址
agent-browser get text @e5 # 某個元素的可見文字
而這整段流程裡藏著一條本週最重要的鐵律：頁面一變、重看一次。@ref 是每次 snapshot 現場發放的臨時號碼牌，頁面一重新渲染就全部重洗。今天的搜尋迴圈裡 press Enter 之後那第二次 snapshot，就是這條鐵律的示範。這四招還會在 d19、d20 直接上戰場——拆 iThelp 的發文編輯器，標題與內文就是靠 fill 塞進去的。
npm i -g agent-browser 裝完了，第一個指令卻報錯找不到瀏覽器？agent-browser install。CLI 跟瀏覽器分開安裝是它的設計，第二步不要省。Linux 主機還要補 agent-browser install --with-deps 安裝系統相依函式庫；macOS 通常免。export AGENT_BROWSER_SESSION=ironman-publish 這樣切一顆專用瀏覽器。本系列的 generate 與 publish 各有自己的 session，不會互相劫持頁面。fill 跟 click 明明寫對了，卻三不五時失敗，重跑又好了？agent-browser wait——可以等指定元素出現，也可以等固定毫秒數。等待策略的水很深，d17 會有一整篇的篇幅認真處理。npm i -g 裝 CLI、agent-browser install 裝瀏覽器；daemon 常駐讓一串指令像同一場 session下一篇我們要介紹「Persistent profile：登入一次，永久 headless」，headless 模式每次醒來都是一顆全新的瀏覽器，登入狀態不會留下——那要怎麼讓 Agent 每天都「已經登入好」直接開工？明天用 --profile 解決，敬請期待！
參考資料：
有任何疑問但沒有 iT 邦幫忙帳號，或是想匿名提問？
歡迎到 https://dev.benben.me/q/Z5442T 提問或加油打氣，沒意外的話會在完賽之後一起回答 :D
iThome鐵人賽
看影片追技術