name: ux-waiting-audit description: 使用浏览器自动化审计Web应用中长时间运行操作（30秒以上）的UX等待状态。当被要求评估、审计或分析产品的加载状态、等待时间、进度指示器或在慢速操作期间的用户体验时使用。需要浏览器自动化（Chrome MCP工具）。生成包含截图、清单评估和优先级建议的综合报告。

UX等待状态审计

使用浏览器自动化评估应用程序如何处理长时间运行的操作（30秒以上）。

核心原则

截图优先，DOM其次 — 导航或卡住时始终截图。视觉检查优于DOM探测。

📸 截图 → 👀 视觉分析 → 🎯 点击坐标 → 📸 验证 → 重复

关键：截图优先的自动化

何时截图

始终截图：

打开任何URL后（初始状态）
尝试与元素交互前
当任何JavaScript返回“缺失值”或失败时
点击/提交后（验证成功）
长时间操作期间的定时间隔

为什么截图优于DOM探测

DOM方法	截图方法
复杂选择器静默失败	视觉显示确切的UI状态
“缺失值”不提供信息	图像揭示按钮位置
10+次尝试查找元素	1次截图 → 点击坐标
无法看到实际用户体验	看到用户看到的完全相同内容

截图工作流模式

# 1. 导航
Control Chrome:open_url(TARGET_URL)
sleep(2)

# 2. 始终先截图
# 使用浏览器截图或html2canvas
# 在任何交互前分析图像

# 3. 如果需要交互，优先坐标而非选择器
# 看到截图后：“提交按钮大约在~(1200, 650)”
Control Chrome:execute_javascript("document.elementFromPoint(1200, 650).click()")

# 4. 再次截图验证

快速开始工作流

阶段1：设置与导航

# 1. 导航到目标URL
Control Chrome:open_url(TARGET_URL)
sleep(3)

# 2. 截图 - 查看加载内容
# 分析：哪些可见？交互元素在哪里？

# 3. 请求用户帮助识别：
#    - 要测试的操作
#    - 如何触发（按钮位置、所需输入）

阶段2：触发操作（困难部分）

这通常是审计卡住的地方。 现代SPA具有复杂的UI。

# 策略1：请求用户指导
# “我看到页面了。你能描述按钮在哪里或点击什么吗？”

# 策略2：使用简单、有针对性的JS
Control Chrome:execute_javascript("document.querySelector('button[type=submit]').click()")

# 策略3：基于坐标的点击（截图后）
Control Chrome:execute_javascript("document.elementFromPoint(X, Y).click()")

# 策略4：让用户手动触发
# “请点击按钮开始操作，然后告诉我何时正在处理”

阶段3：捕获等待状态

操作运行后：

# T+0秒：操作开始时立即截图
# T+10秒：10秒后截图
sleep(10)
# 截图 + capture_state.js

# T+30秒：30秒后截图
sleep(20)
# 截图 + capture_state.js

# T+完成：完成时截图
# 观察指示完成的UI变化

阶段4：评估与报告

# 1. 根据清单评估截图（见references/checklist.md）
# 2. 生成带注释截图的报告
# 3. 优先级建议

故障排除：卡住时

问题：找不到/点击元素

❌ 错误：不断尝试不同的选择器
   → 浪费时间，静默失败

✅ 正确：截图，视觉分析
   → 必要时请求用户帮助
   → 使用基于坐标的点击

问题：JavaScript返回“缺失值”

这通常意味着：

脚本太复杂（简化它）
元素不存在（截图验证）
时机问题（添加sleep，重试）

修复： 使用简单的一行JS，而非复杂函数。

// ❌ 复杂（静默失败）
(function() { const elements = []; ... return JSON.stringify(elements); })()

// ✅ 简单（清晰结果）
document.body.innerText.substring(0, 500)
document.querySelectorAll('button').length
document.querySelector('.loading') !== null

问题：表单无法提交

按顺序尝试：

截图查看提交按钮位置
document.forms[0].submit()
按坐标点击提交按钮
请求用户手动提交

审计指令

步骤1：理解目标

询问用户：

要审计的URL
要测试的操作（搜索、报告生成、AI任务等）
如何触发 — 按钮名称、位置或步骤
预期持续时间（帮助校准截图间隔）
任何认证要求（如需登录凭据）

如果用户可用： 请求他们手动触发操作，同时您捕获截图。这避免了导航复杂性。

步骤2：捕获序列

始终先截图。 然后运行简单的状态检查：

// 不会静默失败的简单一行代码：

// 检查加载指示器
!!document.querySelector('[class*="spin"], [class*="load"], .spinner')

// 检查进度条
!!document.querySelector('progress, [role="progressbar"]')

// 获取可见文本（查找状态消息）
document.body.innerText.substring(0, 1000)

// 统计出现的结果数量
document.querySelectorAll('[class*="result"], [class*="item"]').length

捕获时间线：

时间	操作
T+0秒	截图 + 记录触发内容
T+10秒	截图 + 简单状态检查
T+30秒	截图 + 简单状态检查
T+完成	截图 + 最终状态

步骤3：根据清单评估

加载并对照references/checklist.md评估。为每个类别评分：

✅ 存在且实施良好
⚠️ 部分实施 / 需要改进
❌ 缺失
N/A 不适用于此操作

步骤4：生成报告

使用references/report-template.md中的模板。

关键评估模式

渐进式值检测

查找：

// 出现部分结果
document.querySelectorAll('[class*="result"], [class*="item"], li, tr').length

// 流式内容
document.querySelector('[class*="stream"], [class*="typing"], [class*="cursor"]')

心跳指示器

查找：

// 计数器
document.body.innerText.match(/\d+\s*(found|processed|complete|%)/gi)

// 动画（CSS或JS）
document.querySelectorAll('[class*="animate"], [class*="pulse"], [class*="spin"]')

时间估计

查找：

// 剩余时间文本
document.body.innerText.match(/(\d+\s*(sec|min|second|minute)|remaining|left|ETA)/gi)

// 进度百分比
document.querySelector('[role="progressbar"]')?.getAttribute('aria-valuenow')

截图比较策略

对于每个间隔，记录：

与先前截图相比发生了什么变化
活动信号（计数器、动画、部分结果）
用户焦虑因素（冻结的UI、无反馈）

比较：

元素	T+0秒	T+10秒	T+30秒	完成
结果可见
计数器/进度
状态消息
动画活动

报告输出结构

生成包含以下内容的Markdown报告：

总结评分：X/10个类别已解决
截图库：带时间戳和注释
优势：哪些工作良好
关键差距：最损害UX的缺失元素
快速改进：低投入、高影响的改进
详细发现表：见references/report-template.md
优先级矩阵：P1/P2/P3建议

最佳实践对比

参考这些优秀等待UX的示例：

Figma导出：进度条 + 百分比 + 文件计数
Notion AI：流式文本 + 光标动画
ChatGPT：逐令牌流式传输 + 停止按钮
Linear搜索：即时部分结果 + 细化
Vercel部署：逐步进度 + 日志

要测试的错误场景

如果可能，测试：

部分失败：UI是否优雅降级？
网络中断：进度是否保留？
超时：是否有清晰反馈？

// 模拟慢速网络（如果DevTools可用）
// 或短暂断开连接并观察行为

常见问题标记

问题	用户影响	快速修复
仅加载指示器	焦虑、放弃	添加状态文本
无进度	“卡住了吗？”	添加心跳计数器
无取消	被困感	添加取消按钮
静默完成	错过结果	添加完成动画
全页面阻塞	无法多任务	移至后台