教程 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 路径，但通常不需要这么做。