智能体面试准备（六十六）：Web/UI Agent 工程实战------DOM 理解、自愈选择器与失败恢复
引言
前面（二十四）讲了 GUI Agent 与 Computer Use、（五十三）讲了多模态 Agent 工程。本文把它们落到"生产级 Web/UI Agent"：让智能体像人一样操作网页和 App------填表单、点按钮、翻页、抓数据。这是最贴近业务的 Agent 形态之一（RPA 升级、自动化测试、客服代操作），也是坑最多的：页面一改就挂、选择器一失效就傻、反爬一拦就废。
本文讲 Web/UI Agent 的工程骨架：DOM 理解 vs 视觉、自愈选择器、表单与流程编排、反爬对抗、失败恢复。结尾给速答。
一、两条技术路线
Web/UI Agent 路线
A. DOM 驱动(结构化): 读页面 DOM/可访问性树 -> 选元素 -> 执行动作
+ 精确、可程序化、便宜
- 依赖页面结构, 结构变就挂
B. 视觉驱动(Computer Use): 截图 -> VLM 看图 -> 定位坐标 -> 点击
+ 不看内部实现, 拟人, 跨任意界面
- 坐标不精确, 慢且贵, 需多模态模型(呼应多模态)
混合: 视觉定位 + DOM 校验, 兼顾鲁棒与精确生产里 DOM 驱动是主力（稳、省），视觉驱动做兜底或处理无结构界面。华为多模态 LLM 方向尤其看重视觉路线。
二、DOM 理解与元素定位
DOM 驱动流程
页面 -> 抽取 可访问性树/语义 DOM -> 元素清单(文本/角色/坐标/selector)
-> Agent 选目标元素 -> 执行(click/type/scroll)可访问性树（accessibility tree）比原始 HTML 干净：去掉样式噪音，保留"按钮/输入框/链接"及文本，是 Agent 的最佳输入。
代码（用 Playwright 抽可访问性树）：
python
from playwright.sync_api import sync_playwright
def get_elements(url):
with sync_playwright() as p:
b = p.chromium.launch()
pg = b.new_page()
pg.goto(url)
# 抽可访问性快照(结构化)
tree = pg.accessibility.snapshot()
els = extract_interactive(tree) # 递归取 button/input/link
return els # [{role, name, bbox, selector}]三、自愈选择器（核心工程点）
页面重构后，写死的 CSS/XPath 选择器立刻失效。自愈选择器让 Agent 不依赖固定路径：
自愈定位策略
1. 多信号匹配: 文本+角色+附近锚点, 不单靠 selector
2. 语义回退: selector 失效 -> 用"按钮文字包含'提交'"再找
3. 属性优先级: 先 stable id > name > 文本 > 坐标
4. 邻居锚定: 找"用户名"输入框旁边的输入控件
5. 失败自愈: 点击失败 -> 重试其他候选 -> 仍失败报人工代码（语义回退定位）：
python
def locate(pg, hint):
# hint: {"text":"提交","role":"button"}
try:
return pg.locator(f"text={hint['text']}").first # 首选文本
except Exception:
pass
# 回退: 角色+关键字
for el in pg.query_selector_all(f"[role={hint['role']}]"):
if hint["text"] in (el.inner_text() or ""):
return el
raise RuntimeError(f"找不到元素: {hint}") # 触发自愈/人工要点：把"定位"封装成带重试+多策略的函数，单点失效不影响整体；每次成功定位可记录"稳定特征"用于下次。
四、表单与流程编排
表单填写流程
1. 识别字段(标签->输入框映射): "手机号"旁输入框
2. 按 schema 填值: 类型校验(手机号格式)
3. 失焦/事件触发: 部分页面需 fire event 才校验
4. 提交前校验: 必填/格式/验证码
5. 结果判定: 成功页/错误提示/弹窗验证码/2FA 是硬墙：生产应接人工（呼应 B63 HITL）或专用验证码服务，不强行破解（合规风险）。
五、反爬与对抗
反爬对抗(合规前提: 自有/授权站点)
- 请求特征: 真实 UA/指纹, 限速(呼应六十一), 避免高频
- 行为拟人: 随机间隔/模拟滚动, 不像脚本
- 登录态: 用登录 cookie/令牌(呼应 cookie 管理)
- 检测绕行: headless 特征隐藏, 但遵守 robots/授权
红线: 不爬未授权数据, 不绕付费墙, 不碰隐私(呼应 B62 安全)强调：Web Agent 必须合法授权，越权抓取有法律风险，这是工程底线。
六、失败恢复与状态管理
Web Agent 失败模式与恢复
模式 恢复
元素找不到 自愈定位/换策略/报人工(B63)
点击无响应 滚动到视口/等待加载/重试
页面跳转丢失上下文 重定位当前页/存状态续跑(呼应 B22)
弹窗遮挡 关弹窗/识别模态再继续
表单校验失败 读错误提示改值重提
网络超时 退避重试(呼应 A66 调度)状态管理：长流程把"当前步+已填字段"持久化（呼应 B22/B63 断点续跑），崩了能从断点继续而非重头。
七、可观测与评测
Web Agent 必看
- 每步动作日志(元素/坐标/结果)
- 自愈触发次数(高=页面不稳)
- 任务成功率(端到端, 呼应 B65 评测)
- 耗时/重试分布
- 失败聚类(哪类页面常挂) -> 补规则把轨迹接（B65）评测：用固定测试站点跑回归，页面改版后评测掉点就预警。
八、与多模态路线衔接
视觉路线（Computer Use）用 VLM 看截图定位坐标，适合无 DOM 的桌面/原生 App。工程上常"混合"：VLM 粗定位区域，DOM 精确定元素；或 DOM 失效时切视觉兜底。这正是（五十三）多模态 Agent 的落地场景。
面试速答
问：DOM 驱动和视觉驱动怎么选？
答：DOM/可访问性树精确便宜，是 Web 主力；视觉(Computer Use)拟人、跨任意界面但慢贵。生产常混合：视觉定位+DOM 校验。
问：自愈选择器为什么重要？
答：页面重构会让写死选择器失效。自愈用多信号（文本/角色/锚点）匹配+语义回退+失败重试，避免一改就挂。
问：Web Agent 的合规红线？
答：只操作自有/授权站点，不爬未授权数据、不绕付费墙、不碰隐私；验证码/2FA 接人工而非破解。
高频追问清单
- 可访问性树相比原始 HTML 好在哪？
- 自愈定位的多信号优先级怎么排？
- 表单字段"标签->输入框"映射怎么自动做？
- 验证码/2FA 在 Agent 里怎么处理才合规？
- 反爬限速和（六十一）可观测怎么结合？
- 长流程状态怎么持久化续跑（呼应 B22）？
- 视觉路线坐标不精确怎么补？
- Web Agent 成功率怎么评测与回归（呼应 B65）？
- DOM 失效时怎么切视觉兜底？
- 多页向导(多步跳转)怎么保持上下文不丢？