ARIA 快照 Playwright 用于 AI 代理

AI自动化中基于ARIA语义快照的智能代理技术

早期的AI代理依赖原始HTML，虽然适用于文本任务，但在复杂用户界面中表现不佳。尽管有模板过滤器辅助，交互元素仍需其他方案。桌面自动化中使用截图的准确率约为86%（GPT-5.2），但会消耗大量token，且难以追踪变化——尤其在日期选择器等组件上。

端到端测试工具如Playwright转向了ARIA——W3C标准（WAI-ARIA 1.0，2014年发布），最初专为屏幕阅读器设计。ARIA通过以下方式增强HTML：

• 角色：元素类型（按钮、文本框）。
• 名称：可读标签。
• 状态：动态条件（[已选中]、[禁用]）。

欧盟和美国政府网站无障碍法规推动了其广泛应用。谷歌也在2021年优化了Chrome开发者工具的无障碍树功能。

标准ARIA在AI应用中的局限性

ARIA面向人类设计：屏幕阅读器上下文窗口远小于大语言模型的上下文容量，且强调顺序阅读。主要问题包括：

• 在Firefox/WebKit中跨浏览器一致性较弱。
• 增量更新能力有限。
• 过度依赖Chrome API（Puppeteer）。

Playwright开发了自有解析器：向浏览器注入JS代码，在处理边缘情况的同时从DOM构建ARIA快照。输出格式为YAML——剔除了CSS和冗余的div嵌套结构。

Playwright的ARIA快照结构

该快照代表一个语义树结构：

- navigation [ref=e1]:
  - link "Home" [ref=e2]:
    - /url: /
  - link "Settings" [ref=e3] [active]:
    - /url: /settings
- main [ref=e4]:
  - heading "Account Settings" [level=1]
  - group "Profile":
    - textbox "Display name" [ref=e5]: John Doe
    - textbox "Email" [ref=e6]: [email protected]
      - /placeholder: [email protected]
  - group "Preferences":
    - checkbox "Email notifications" [ref=e7] [checked]
    - checkbox "Dark mode" [ref=e8]
  - button "Save Changes" [ref=e9] [cursor=pointer]

角色定义交互行为：按钮 = 点击，文本框 = 输入。

名称按优先级解析：aria-labelledby > aria-label > label > content > title > placeholder。无名称的元素对AI不可见：

<button><svg class="icon-save"/></button>  <!-- 对AI不可见 -->
<button aria-label="Save"><svg class="icon-save"/></button>  <!-- 对AI可见 -->

状态捕捉[已选中]、[展开]等信息。

每个节点包含ref标识符，用于执行动作：

{
  "name": "browser_click",
  "arguments": { "element": "Save Changes button", "ref": "e9" }
}

优化用增量更新机制

复杂页面的完整快照可能包含数千个元素，token开销巨大。Playwright改用差分传输：

- <changed> main [ref=e4]:
  - ref=e5 [unchanged]
  - textbox "Email" [ref=e6]: [email protected]
  - ref=e7 [unchanged]
  - checkbox "Dark mode" [ref=e8] [checked]
  - ref=e9 [unchanged]

[unchanged]引用模型上下文，使数据量减少94%（从5KB降至300B，支持100+元素）。这使得多步骤流程无需重复描述全部内容。

构建语义解析器的挑战

Playwright解决了：

• 模板/插槽：最终渲染视图。
• aria-owns：虚拟DOM关系。
• ::before/::after：生成内容。
• 可见性：过滤display:none、aria-hidden、零尺寸元素。

遗留问题：模态框有时无法正确隐藏字段。

ARIA盲区：

• 视觉元素：颜色、图标。
• 空间布局：边界框（实验性支持）。
• Canvas/WebGL：无ARIA则完全不可见。
• 隐含语义：仅靠CSS样式无法表达。

足以应对表单与导航；视觉任务仍需备选方案。

智能代理工具对比

| 工具/代理 | 方法 |

|------------|----------|

| Claude (MCP) | Playwright ARIA + 差分更新 |

| Cursor | 类似Claude |

| GitHub Copilot | Playwright ARIA（自2026年起） |

| ChatGPT浏览模式 | DOM分析 |

| Anthropic Computer Use | 截图 |

| Stagehand | HTML |

| LaVague | 截图 + HTML |

趋势：正加速向Playwright ARIA迁移。

核心要点

• ARIA快照为LLM提供标准化观察方式，通过差分更新将token消耗降低94%。
• ref标识符简化操作，无需XPath/CSS选择器。
• 解析器支持模板、aria-owns、::before，确保语义树准确。
• 局限性：缺乏视觉与位置信息；截图作为后备至关重要。
• AI经济驱动下，语义化HTML正快速普及。

— Editorial Team