浏览器能给出控件的角色和无障碍名称时,先用它们定位。需要分清具体记录时,查看局部 DOM。需要判断图表高亮、按钮遮挡或画布内的控件时,再取一张当前截图。
一位开发者在 Playwright 社区原帖 里描述过,Agent 遇到一串同名的 Add to Cart 按钮,直接取了第九个。它缺的是按钮与商品之间的对应关系。按商品标题限定卡片,或者查稳定的商品 ID,都比记按钮的顺序更贴合任务。
下文用 Tabbit Browser 说明如何在一个浏览器标签页里切换这几种输入。
核心结论
角色和无障碍名称描述控件的用途。遇到同名控件,按目标记录、表单或弹窗限定范围。
DOM 提供元素属性和记录关系。查到节点后,还要判断可见性、可用状态和鼠标命中位置。
截图保存某一时刻的外观。视觉读懂图片后,可以把动作交回语义定位器。
页面或目标位置变化时重新观察。点击之后单独核对结果。
三种输入各自提供什么
| 输入 | 能提供 | 常见缺口 | 适合先做什么 |
|---|---|---|---|
| 局部 DOM | 运行中的节点、文本、属性 | 可能包含隐藏或旧节点 | 按已知记录 ID 查找一行 |
| 无障碍快照 | 角色、名称及部分状态 | 可能省略业务 ID 和像素位置 | 找到具名输入框或按钮 |
| 截图加视觉 | 当时的布局、色彩、位置关系 | 坐标随视口和布局变化 | 看遮挡层或画布中的图形 |
DOM 是浏览器运行中的文档,网页脚本执行后,元素结构可能和初始 HTML 响应不同。无障碍快照可保留标题层级、角色和选中状态,但可能略掉 CSS 类名或数据属性。截图保留浏览器实际绘制的内容,包括没有独立节点的像素。 Playwright 快照 · 定位器文档
读取输入和发送动作是两回事。一套浏览器工具可以同时提供语义定位和鼠标输入。需要处理浏览器外的窗口时,再按工具覆盖的范围判断是否需要 Computer Use。
用语义确定动作,用局部 DOM 确定记录
两张发票卡片都有「保存」。先用发票号、标题或应用约定的稳定属性定位卡片,再在卡片中查找唯一按钮。仅用按钮顺序,一旦列表排序变化,就可能改到另一张发票。
有些组件的语义确实不够完整。一位 Playwright 用户 遇到缺少有效角色的自定义下拉,考虑改用测试 ID。自有应用可以补可访问名称、键盘行为和稳定测试 ID。第三方页面上可以先看控件所在容器和打开后的菜单,避免把任何下拉都假定成 combobox。
即使已找到目标,加载状态或遮罩也可能挡住点击。Playwright 普通点击会检查可见、稳定、能接收事件、已启用等条件。出现拦截时先检查实际命中对象,再决定如何处理。按钮点不动的排查方法 · Playwright 动作条件
需要画面信息时再读截图
Canvas 图表可能只对应一个 DOM 节点,但蓝色数据点和红色数据点在图中分得很清楚。先检查应用是否另外提供可访问图例、键盘操作或数据导出。只有目标确实只存在于像素中时,才需要通过截图识别。HTML Canvas 支持备用内容,实际能否用要看应用实现。MDN Canvas 文档
能从图上认出已展开菜单时,可以返回角色定位,选择该菜单里的具名项目。若是画布内无独立元素的控件,再使用位置或手势。Playwright 鼠标使用视口的 CSS 像素。截图被裁剪或缩放时,要换算原点与比例,保持与当前视口一致。Playwright 鼠标接口
页面加载、工具提示或虚拟列表都可能改变下一次动作的目标。即使定位器重新解析了,「第一行」也可能换成另一条记录。操作前重新核对身份,操作后读状态。
在 Tabbit 中处理同一标签页的表单和画布
假设任务是在网页里保存货号,再切换图表编辑器的颜色。先检查 Item code 与 Save item 的角色和名称,保存后查对应货号的状态。选择画布颜色时,再观察当前截图并核对颜色回显。

表单状态与画布状态分别对应两项结果。交付给人的回执也应分开写,避免只说「成功」。
Tabbit CLI 官方快速开始 说明了如何访问标签页,CLI 指南 涵盖任务和回执。使用 MCP 可以参考 Playwright MCP 项目 与 接入步骤。这些接口回答 Agent 怎样连上网页,页面结构和任务目标决定该读哪种输入。浏览器控制方式
按当前问题决定下一步
| 情况 | 下一步 | 核对什么 |
|---|---|---|
| 多条记录上的按钮同名 | 按标题或稳定 ID 限定容器 | 目标记录内只有一个匹配 |
| 快照里缺少画面上可见的控件 | 查局部 DOM,必要时补截图 | 找到可靠语义目标或当前画面中的唯一控件 |
| 截图后布局改变 | 重新观察再使用位置 | 当前视口内的目标对应正确对象 |
| 点击返回成功但记录没变 | 先查状态再决定是否重试 | 已确认结果、明确失败或暂停人工核对 |
用 精简观察的方法 控制输入范围。周期性任务可以把重试与人工复核计入 单次成功成本。如果任务本来只是读取或导出记录,也可以看看应用是否提供 API 或 MCP 接口。
第一次跑流程时,把记录标识和成功信号写入 Agent 提示词,按 首个任务清单 约定没有回执时何时停下。能按语义定位就先定位,缺记录身份查局部 DOM,缺画面信息再看截图。在同一标签页里要完成这些动作时,可以使用 Tabbit。
常见问题
无障碍快照等于 DOM 吗?
两者保留的信息不同。DOM 提供元素及属性,快照则按工具的方式呈现计算后的角色、名称和状态,可能省略布局、类名和业务标识。
基于 DOM 的 Agent 能操作 Canvas 吗?
它能找到 Canvas 元素,也能使用应用另外提供的语义控件。如果目标只画在像素里,需要读取截图或使用应用提供的接口。
什么时候需要重截网页?
下一步依赖位置时,滚动、缩放、调整窗口、打开弹窗或页面重排后应重新截图。如果结果也是视觉状态,操作后再看一次。
浏览器视觉一定靠坐标点击吗?
视觉负责读图。混合工具可以先通过截图认出目标,再通过语义定位或键盘执行;目标缺少可靠元素身份时才考虑坐标。
点击保存后应该检查什么?
核对目标记录的保存状态、持久化值或可靠回执。结果不明确时先读取记录,避免重复提交。
面对新网站先试哪种方法?
有标签的控件先用角色和名称。遇到重复记录时按 DOM 属性或容器缩小范围,遇到外观或位置问题时补截图。