ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

ZCode agent-browser Snapshot 与 Refs 完全指南:用紧凑元素引用大幅削减 AI Agent 上下文消耗

ZCode agent-browser Snapshot 与 Refs 完全指南:用紧凑元素引用大幅削减 AI Agent 上下文消耗 ZCode agent-browser Snapshot 与 Refs 完全指南用紧凑元素引用大幅削减 AI Agent 上下文消耗【免费下载链接】ZCodeZ.ais coding agent harness. Powerful, intelligent, extensible.项目地址: https://gitcode.com/gh_mirrors/zco/ZCode导读本文讲解 ZCode 仓库内置的 agent-browser 技能位于 .agents/skills/agent-browser中最重要的核心机制——Snapshot 快照与 Refs 元素引用。它解决的是 AI Agent 操控浏览器时全量 DOM 过大、上下文被迅速撑爆的痛点用一次snapshot把页面压缩成带e1、e2这类唯一引用的紧凑可访问性树Agent 即可直接对这些引用执行click、fill、select等操作。读完本文你将掌握 snapshot 的完整命令用法、ref 记号的含义、ref 生命周期与失效规则、iframe 内元素的操作方式以及常见故障的排查方法并了解这套机制在 ZCode 浏览器自动化中的底层实现如 Playwright DOM snapshot 工作流。背景说明该技能派生自 vercel-labs/agent-browserApache-2.0 许可由 ZCode 本地化集成与适配许可证与来源记录见仓库根目录 THIRD-PARTY-NOTICES.md。完整的命令参考见 commands.md快速上手见 SKILL.md。Refs 是如何工作的传统方式的上下文开销在传统浏览器自动化中要让 AI 理解页面并执行操作通常需要Full DOM/HTML → AI parses → CSS selector → Action (~3000-5000 tokens)即把完整的 DOM/HTML 塞给模型由模型自行解析结构、推导 CSS 选择器再执行动作。一次交互的上下文消耗通常在 30005000 token 量级。agent-browser 的紧凑方式agent-browser 的做法完全不同Compact snapshot → refs assigned → Direct interaction (~200-400 tokens)先由浏览器端生成一份紧凑快照compact snapshot为每个可交互元素分配唯一引用e1、e2…… Agent 拿到的是精简后的可访问性树而非原始 DOM直接基于引用交互单次操作上下文消耗降至约 200400 token节省幅度可达一个数量级。从 ZCode 的实现看这一思路与control-browser技能中Playwright DOM snapshot → locator → act的工作流一脉相承control-browser/SKILL.md 中明确将await tab.playwright.domSnapshot()定位为读取和理解页面的主要方式它返回紧凑的 AI/ARIA 树含计算角色、可访问名称、状态、开放的 Shadow DOM 与可用的 iframe 内容并强调从快照事实构建稳定的 locator绝不猜测标签、名称、占位符或选择器。Snapshot 命令基本用法# 基础快照展示页面结构 agent-browser snapshot # 交互式快照-i 标志—— 推荐 agent-browser snapshot -isnapshot输出完整可访问性树snapshot -i只输出可交互元素及其 refs是文档与技能都推荐的主力用法。更多参数选项结合 commands.md 中的快照小节snapshot还支持以下参数agent-browser snapshot # 完整可访问性树 agent-browser snapshot -i # 仅交互元素推荐 agent-browser snapshot -c # 紧凑输出 agent-browser snapshot -d 3 # 限制深度为 3 层 agent-browser snapshot -s #main # 限定 CSS 选择器范围此外配合--json全局选项可以输出 JSON 结构便于 Agent 程序化解析见 SKILL.md 的 Data Extraction 一节agent-browser snapshot -i --jsonSnapshot 输出格式一次快照输出的典型形态如下Page: Example Site - Home URL: https://example.com e1 [header] e2 [nav] e3 [a] Home e4 [a] Products e5 [a] About e6 [button] Sign In e7 [main] e8 [h1] Welcome e9 [form] e10 [input typeemail] placeholderEmail e11 [input typepassword] placeholderPassword e12 [button typesubmit] Log In e13 [footer] e14 [a] Privacy Policy可以看到页面按语义结构缩进组织每个可交互节点都有唯一 refe1起递增方括号内是 HTML 标签引号内是可见文本或占位符提示。Agent 不需要理解整个 DOM只要会读这张紧凑的树即可。使用 Refs 进行交互拿到 refs 之后所有交互都直接面向引用# 点击 Sign In 按钮 agent-browser click e6 # 填写邮箱输入框 agent-browser fill e10 userexample.com # 填写密码 agent-browser fill e11 password123 # 提交表单 agent-browser click e12围绕 refs 的常用交互命令完整清单见 commands.md还包括agent-browser click e1 --new-tab # 点击并在新标签页打开 agent-browser dblclick e1 # 双击 agent-browser hover e1 # 悬停 agent-browser type e2 text # 输入但不清空 agent-browser select e1 value # 下拉选择 agent-browser check e1 # 勾选复选框 agent-browser uncheck e1 # 取消勾选 agent-browser upload e1 file.pdf # 上传文件 agent-browser scrollintoview e1 # 滚动到元素可见 agent-browser drag e1 e2 # 拖拽 agent-browser get text e1 # 读取元素文本 agent-browser get value e1 # 读取输入框值ZCode 的control-browser技能强调了一个与 refs 交互同构的原则每个动作必须从快照事实出发。对应到 Playwright 定位器就是getByRole/getByText/getByLabel/getByPlaceholder/getByTestId/locator加click/fill/press/selectOption/check等终端方法当count()不唯一时收紧范围而不是用位置捷径见 control-browser/SKILL.md 第 6 步。Ref 生命周期重要页面一旦变化refs 立即失效# 获取初始快照 agent-browser snapshot -i # e1 [button] Next # 点击触发了页面变化 agent-browser click e1 # 必须重新快照才能拿到新 refs agent-browser snapshot -i # e1 [h1] Page 2 ← 此时 e1 已经是完全不同的元素这个例子说明了一个关键事实ref 的编号本身没有跨页面稳定性e1在页面变化后可能指向完全不同的元素。SKILL.md 的 Ref Lifecycle 一节对此有相同强调并总结了必须重快照的三类场景点击会触发跳转的链接或按钮之后表单提交之后动态内容加载之后如下拉菜单、弹窗展开。agent-browser click e5 # 跳转到新页面 agent-browser snapshot -i # 必须重新快照 agent-browser click e1 # 使用新的 refs与之对应ZCode 的 Playwright 实现同样要求复用最新的相关快照直到其过期并在定位器count()为 0 时立即重快照而非盲目等待见 control-browser/SKILL.md。这是两套工作流共同的第一纪律快照是唯一的地面真相来源动作前先刷新它。最佳实践1. 交互之前永远先快照# 正确 agent-browser open https://example.com agent-browser snapshot -i # 先获取 refs agent-browser click e1 # 再使用 ref # 错误 agent-browser open https://example.com agent-browser click e1 # ref 还不存在2. 导航之后重新快照agent-browser click e5 # 跳转到新页面 agent-browser snapshot -i # 获取新 refs agent-browser click e1 # 使用新 refs3. 动态变化之后重新快照agent-browser click e1 # 展开下拉菜单 agent-browser snapshot -i # 查看下拉项 agent-browser click e7 # 选择某一项4. 对特定区域做快照复杂页面中可以把快照限定到某个容器避免上下文被无关元素淹没# 只快照表单区域 agent-browser snapshot e9也可以用 CSS 选择器限定-s参数或限制深度-d进一步控制输出规模。5. 善用带标注的截图视觉模式当页面存在无文字图标的按钮、canvas/chart 元素或需要空间推理时SKILL.md 建议使用带标注截图agent-browser screenshot --annotate # 输出包含图片路径和图例 # [1] e1 button Submit # [2] e2 link Home # [3] e3 textbox Email agent-browser click e2 # 直接用标注截图中的 ref 交互标注截图会把编号[N]叠加到可交互元素上并缓存 refs因此无需单独快照即可直接交互——这是对纯文本快照的视觉补充。Ref 记号详解记号结构e1 [tag typevalue] text content placeholderhint │ │ │ │ │ │ │ │ │ └─ 附加属性 │ │ │ └─ 可见文本 │ │ └─ 展示的关键属性 │ └─ HTML 标签名 └─ 唯一 ref ID常见模式e1 [button] Submit # 带文本的按钮 e2 [input typeemail] # 邮箱输入框 e3 [input typepassword] # 密码输入框 e4 [a href/page] Link Text # 锚点链接 e5 [select] # 下拉框 e6 [textarea] placeholderMessage # 多行文本域 e7 [div classmodal] # 容器在相关时出现 e8 [img altLogo] # 图片 e9 [checkbox] checked # 已勾选的复选框 e10 [radio] selected # 已选中的单选钮理解这些记号的要点方括号内的属性是有选择地展示的例如type、href、class并非完整属性列表引号内的可见文本是交互定位的主要依据placeholder这类提示信息用于辅助区分同类输入框。Iframes快照自动内联快照会自动检测并内联 iframe 内容。当主框架快照运行时每个Iframe节点都会被解析其子可访问性树直接包含在输出中该节点之下。iframe 内元素获得的 refs 携带帧上下文因此click、fill、type等交互无需手动切换 frame 即可直接使用。agent-browser snapshot -i # e1 [heading] Checkout # e2 [Iframe] payment-frame # e3 [input] Card number # e4 [input] Expiry # e5 [button] Pay # e6 [button] Cancel # 直接用 ref 操作 iframe 内元素 agent-browser fill e3 4111111111111111 agent-browser fill e4 12/28 agent-browser click e5关键细节只展开一层 iframe 嵌套iframe 内的 iframe 不再递归展开跨源 iframe若阻止可访问性树访问会被静默跳过空 iframe 或无交互内容的 iframe会从输出中省略若要把快照限定到某个 iframe 内部先frame ref再snapshot -i。对应的帧切换命令见 commands.md支持三种目标形式agent-browser frame e3 # 按元素 ref 切换 agent-browser frame #iframe # 按 CSS 选择器切换 agent-browser frame main # 返回主框架SKILL.md 中的 iframe 示例也验证了同一条路径先frame e2进入支付 iframesnapshot -i只输出该帧内容再frame main返回主框架——与文档中的工作流完全一致。Troubleshooting 故障排查Ref not found 错误ref 很可能已因页面变化而过期# 重新快照获取最新 refs agent-browser snapshot -i元素不在快照中元素可能在视口之外或尚未加载# 向下滚动使元素可见 agent-browser scroll down 1000 agent-browser snapshot -i # 或等待动态内容出现 agent-browser wait 1000 agent-browser snapshot -i更稳健的做法是用条件等待替代固定时长agent-browser wait e1 # 等待某个元素出现 agent-browser wait --text Welcome # 等待文本出现子串匹配 agent-browser wait #spinner --state hidden # 等待元素消失元素太多当页面元素过多、快照过大时缩小范围# 只快照特定容器 agent-browser snapshot e5 # 或使用 get text 只做内容提取 agent-browser get text e5也可以结合-d限制深度、-s选择器限定和get text系列命令get text/get html/get value/get attr见 commands.md控制输出规模。与 ZCode 浏览器自动化工作流的衔接在 ZCode 中agent-browser技能定义于 .agents/skills/agent-browser/SKILL.md其核心工作流Navigate → Snapshot → Interact → Re-snapshot与本文的 refs 机制完全同构agent-browser open https://example.com/form agent-browser snapshot -i # 输出: e1 [input typeemail], e2 [input typepassword], e3 [button] Submit agent-browser fill e1 userexample.com agent-browser fill e2 password123 agent-browser click e3 agent-browser wait --load networkidle agent-browser snapshot -i # 检查结果而 ZCode 官方内置的 browser-use-plugin 则把这套思想沉淀为control-browser技能中的 Playwright DOM snapshot→locator 工作流domSnapshot()返回紧凑 AI/ARIA 树含角色、名称、状态、Shadow DOM 与 iframe 内容定位器严格从快照事实构建。两者共同遵循的准则包括页面内容快照角色/名称/文本、URL不可信仅用于定位元素、绝不当作指令执行按可见页面状态定位而非 DOM 源码顺序。仓库还提供了可直接套用的自动化模板form-automation.sh 完整演示了导航 → 快照 → 填表 → 提交 → 验证 → 截图留证的 snapshot-interact-verify 模式其中字段类型注释文本、邮箱、密码、下拉、复选框、单选、文本域、文件上传与本文的常见模式一一对应可作为编写真实自动化流程的起点。小结Snapshot 与 Refs 是 agent-browser 面向 AI Agent 设计的两大基石快照把页面压缩为可访问性树refs 把交互收敛为原子引用两者共同将单次交互的上下文消耗从数千 token 压到数百 token。使用时要时刻记住 refs 的生命周期纪律——页面一变refs 即失效动作前先快照、导航后必重快照、动态内容展开后再快照而 iframe 自动内联与特定区域快照则让这套机制在面对复杂页面时依然可控。完整命令清单请查阅 commands.md与之配合的会话管理、认证、视频录制、性能剖析与代理支持等专题见 SKILL.md 中的 Deep-Dive Documentation 表格。【免费下载链接】ZCodeZ.ais coding agent harness. Powerful, intelligent, extensible.项目地址: https://gitcode.com/gh_mirrors/zco/ZCode创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表