计算机交互实验室：视觉、DOM、动作验证与安全确认

参考：来源 F · 第 23、26 章进阶

学完你能做到

理解 GUI 感知的四层信息
按动作后果设计验证与确认
处理页面漂移、焦点、重复提交和身份边界

人看到一个按钮，会同时利用文字、位置、颜色、页面结构和任务背景。GUI Agent 若只看截图坐标，页面缩放或弹窗就会让后续动作全部偏移。可靠交互要融合多种感知信号，并在每一步后重新建立当前状态。

GUI 感知栈：优先使用语义稳定的结构信号，视觉负责补充只有像素才能表达的信息。

失败类型	表面现象	真正原因	恢复策略
页面漂移	找不到按钮	布局或文案改变	重新读取语义结构，不猜坐标
焦点丢失	文字输入到错误位置	弹窗或快捷键改变焦点	输入前确认当前字段和已有值
重复提交	生成两笔订单	超时后盲目重试	使用键并先查结果
身份错位	操作了错误账号	会话或工作区切换	执行前验证账户、组织和对象
假成功	点击完成但数据没保存	只验证动作，不验证结果	读取回执、状态或对象 ID

动作风险决定确认强度

动作安全阶梯。风险越高，越要增加预览、身份验证、明确确认和事后回执。

观察-动作-验证契约

before = observe(identity, object, current_state)
assert action.allowed_by_mandate(before)
if action.requires_confirmation: present_preview_and_wait()
receipt = execute(action, idempotency_key)
after = observe(expected_state)
if not verify(before, action, receipt, after): recover_or_handoff()

浏览器任务红队

25 分钟

为“登录教务系统并报名考试”画观察-动作-验证链。
加入弹窗、页面改版、重复点击和错误账户四种故障。
标出哪些步骤可自动恢复，哪些必须停下来让用户接管。

综合演算：让网页操作在布局变化后安全停止

Agent 要在后台系统创建活动。按钮位置、弹窗和字段会随屏幕宽度变化，提交又会真实发送邀请。实验重点不是点成功一次，而是证明动作对象正确。

本节追问：如何建立每一步都可验证的 GUI 操作协议？ 先不要急着看结论。沿着下面四步，逐项区分输入、决策、证据和失败信号。

四步案例推演。手机上可左右滑动查看；每个箭头都代表一次需要证据支撑的状态转换。

阶段	本步要做的决定	什么算证据	最常见的失败
观察场景	读取页面标题、关键区域与当前状态	截图或 DOM 快照带时间与窗口信息	沿用上一轮页面假设
绑定目标	用语义、文本和邻近关系确认元素	至少两个信号支持关键目标	仅凭坐标或颜色
受控动作	一次只执行一个可解释动作	动作参数与预期状态变化已声明	批量连点后无法定位错误
闭环验证	重新观察并比较预期与实际	不一致时停止、回退或求助	只要没报错就继续

阅读方式：先遮住后两列自己回答，再用“证据”和“失败”两列检查理解。

常见误解

把成功录屏当作可靠性测试

实际上

可观察症状：固定路径无法覆盖弹窗、加载延迟和改版。

更可靠的修复：用状态断言、扰动测试和高风险确认验证协议。

案例工作坊 · 建议真正动手完成

25 分钟

为创建活动写十步观察—动作—验证脚本。
加入弹窗、慢加载和按钮改名三种扰动。
定义提交邀请前用户必须看到的信息。

查看参考答案

GUI Agent 的基本单位不是点击，而是可验证的状态转换。每个动作前确认对象，动作后确认结果，无法确认就停止。

迁移检查：换一个场景还会不会

页面按钮位置变化但文字和表单状态未变，最稳健的定位方式是？