教程 26 — OpenClaw Agent Browser Skill 教程：進階無頭瀏覽器自動化，處理動態渲染和登入態（2026）
目標：安裝 Agent Browser Skill，用 Accessibility Tree 快照和 ref 引用精準操控網頁元素，處理需要 JavaScript 渲染或登入的頁面。
Agent Browser vs 內建瀏覽器工具的區別
openclaw agent browser vs 內建瀏覽器區別可以用一張表來說明：
| 維度 | Lesson 04 內建瀏覽器 | Agent Browser（本教程） |
|---|---|---|
| 頁面類型 | 靜態 HTML 頁面 | 動態渲染（React/Vue/Angular） |
| 登入態 | 不支援 | 支援，可儲存 session/cookie |
| 操作方式 | 截圖 + 坐標點擊 | Accessibility Tree + ref 引用 |
| 操作精度 | 中等，坐標偏移風險高 | 高，直接引用 DOM 元素 |
| 等待策略 | 固定延遲 | 智慧等待（網路空閒/元素出現） |
| 適合場景 | 快速抓取靜態內容 | 表單提交、登入後操作、SPA 應用 |
如果你遇到 openclaw 抓取動態渲染頁面 javascript 失敗，或者需要模擬登入，就需要從 Lesson 04 升級到本教程的 Agent Browser。
核心概念：Accessibility Tree 是什麼？
agent browser accessibility tree 操作教程的基礎是理解為什麼不用截圖。
截圖方案的問題：AI 需要識別截圖中每個元素的坐標，稍微滾動或頁面縮放就會導致坐標偏移，點擊失敗。
Accessibility Tree（無障礙樹） 是瀏覽器為輔助功能（如螢幕閱讀器）維護的結構化頁面描述，包含每個元素的：
- 角色（button、input、link、heading…）
- 文字內容
- 唯一
ref識別符 - 狀態（可見、禁用、選中…）
示例片段：
[ref=e23] button "登入" (enabled)
[ref=e24] input type="text" placeholder="郵箱" value=""
[ref=e25] input type="password" placeholder="密碼" value=""
[ref=e26] checkbox "記住我" (unchecked)
有了 ref，點擊操作變成 click ref=e23，無論頁面如何縮放都不會失敗。這正是 Agent Browser 比截圖更精準的原因。
第一步：安裝依賴（Playwright）
Agent Browser Skill 依賴 Playwright 無頭瀏覽器：
npm install -g playwright
npx playwright install chromium驗證安裝：
npx playwright --version
# 輸出版本號如 1.41.0如果你更熟悉 Puppeteer，也可以使用：
npm install -g puppeteerSkill 會自動檢測已安裝的瀏覽器驅動。
第二步：安裝 Skill
/install @matrixy/agent-browser-clawdbot
驗證：
pnpm openclaw skills list
# 列表中應出現 agent-browser-clawdbot第三步：基礎用法——導航並取得頁面結構
openclaw 無頭瀏覽器抓取動態渲染頁面的基本流程：
用 Agent Browser 打開 https://example.com，給我頁面的結構快照
底層執行：
/browser navigate https://example.com
/browser snapshot
返回結果示例（Accessibility Tree 片段）：
[ref=e1] heading "Example Domain" level=1
[ref=e2] paragraph "This domain is for use in illustrative examples…"
[ref=e3] link "More information…" href="https://www.iana.org/domains/example"
與 Lesson 04 不同，這裡不是截圖，而是結構化文字，AI 可以精準定位任何元素。
第四步：精準點擊（使用 ref 引用）
取得快照後，用 ref 引用操作元素，而不是坐標：
點擊頁面上的「更多資訊」連結
OpenClaw 會找到對應的 [ref=e3] 並執行：
/browser click ref=e3
填寫表單（組合操作）：
在搜尋框輸入「OpenClaw 教程」，然後點擊搜尋按鈕
等價執行：
/browser type ref=e12 text="OpenClaw 教程"
/browser click ref=e15
這就是 agent browser accessibility tree 操作教程的核心——所有操作基於 ref，不依賴坐標。
第五步：處理登入（儲存 session）
openclaw 無頭瀏覽器模擬登入的標準流程：
用 Agent Browser 登入 https://app.example.com，
帳號：user@example.com，密碼：mypassword，
登入成功後儲存 session
OpenClaw 執行步驟：
/browser navigate https://app.example.com/login
/browser snapshot
# 找到郵箱輸入框 [ref=e24] 和密碼框 [ref=e25]
/browser type ref=e24 text="user@example.com"
/browser type ref=e25 text="mypassword"
/browser click ref=e23 # 登入按鈕
/browser save-session --name "example-app"
儲存 session 後，下次操作同一網站時直接複用：
/browser load-session --name "example-app"
/browser navigate https://app.example.com/dashboard
第六步：動態渲染頁面等待策略
openclaw 自動化需要 javascript 渲染的網站時，最常見的問題是「內容還沒載入就截圖/快照」。Agent Browser 提供多種等待策略：
等待網路請求完成（適合 API 驅動的 SPA）：
/browser navigate https://app.example.com/data-table --wait-for network-idle
等待特定元素出現（適合非同步載入的內容）：
/browser wait-for-element --text "資料載入完成"
/browser wait-for-element --ref-role "table"
固定延遲（兜底方案）：
/browser wait 2000
第七步：實戰——自動填寫並提交表單
openclaw 無頭瀏覽器表單提交的完整示例：
用 Agent Browser 打開 https://forms.example.com/contact，
填寫以下資訊並提交：
- 姓名：張偉
- 郵箱：zhang@company.com
- 留言：我想了解貴公司的企業合作方案，請安排銷售聯絡我。
OpenClaw 執行過程：
/browser navigate https://forms.example.com/contact
/browser snapshot
# 識別表單欄位 ref
/browser type ref=e10 text="張偉"
/browser type ref=e11 text="zhang@company.com"
/browser type ref=e12 text="我想了解貴公司的企業合作方案，請安排銷售聯絡我。"
/browser click ref=e20 # 提交按鈕
/browser wait-for-element --text "提交成功"
/browser snapshot # 確認提交結果
常見問題
OpenClaw Agent Browser 和 Lesson 04 的瀏覽器自動化有什麼區別？
Lesson 04 的內建瀏覽器工具基於截圖和坐標操作，適合快速抓取靜態網頁內容，配置簡單，開箱即用。Agent Browser 使用 Playwright 驅動無頭 Chrome，通過 Accessibility Tree 而非截圖來理解頁面結構，支援 JavaScript 渲染的動態頁面、登入態保持和 cookie 複用，操作精度更高。如果你只是需要讀取靜態網頁，用 Lesson 04 即可；需要登入、填表、操作 SPA 應用時，才需要 Agent Browser。
Agent Browser Skill 能處理需要登入的網站嗎？
可以。Agent Browser 支援完整的登入流程：導航到登入頁 → 填寫帳號密碼 → 提交 → 儲存 session。儲存的 session 包含 cookie 和 localStorage 資料，下次操作同一網站時直接載入，無需重新登入。Session 加密儲存在本地 ~/.openclaw/sessions/ 目錄，不上傳到任何雲端。注意：部分網站會檢測自動化瀏覽器特徵（Bot Detection），遇到此類網站可在 Skill 設定中啟用 stealth 模式。
Accessibility Tree 是什麼？為什麼比截圖更好用？
Accessibility Tree 是瀏覽器為螢幕閱讀器等輔助工具維護的頁面結構樹，每個 UI 元素都有唯一的 ref 識別符、角色類型和文字內容。比截圖更好用的原因有三點：一，ref 引用不受頁面滾動、縮放影響，操作穩定性遠高於坐標；二，文字內容可直接被 AI 理解，不需要 OCR；三，能取得到頁面中隱藏或未渲染完成的元素狀態，方便判斷載入情況。簡單來說，截圖告訴 AI「頁面長什麼樣」，Accessibility Tree 告訴 AI「頁面有什麼元素，每個元素叫什麼」。
安裝時需要單獨安裝 Chrome 嗎？
不需要單獨安裝系統 Chrome。執行 npx playwright install chromium 時，Playwright 會下載一個獨立的 Chromium 二進位檔案（約 150 MB），與系統瀏覽器完全隔離，不影響你日常使用的 Chrome。如果你的系統已經安裝了 Chrome 並且想複用，可以在 Agent Browser Skill 配置中指定 executablePath 為本地 Chrome 路徑，但通常不需要這麼做。