基于 AI 的 Web 设计工具 QA 运行报告“所有功能正常，通过”，但画布上却空无一物。这种“虚假通过”并非模型推理能力的缺陷，而是浏览器处理隐藏标签页的方式以及测试脚本衡量“健康度”而非视觉输出所导致的副作用。

为什么 AI QA 代理会漏掉空白画布

它们执行 JavaScript，捕获截图，并让模型推断功能是否运行正确。在实践中，有两个技术盲点会导致 UI 实际上为空时却反复出现“通过”的结果。

详解隐藏标签页的节流机制

Chrome MCP 通常在后台标签页中运行测试，以保持主窗口空闲处理其他工作。当标签页的 document.visibilityState 为 hidden 时，浏览器会限制渲染管线：

  • JavaScript 继续运行，因此不会出现运行时错误。
  • requestAnimationFrame 回调停止触发，导致动画帧计数保持为零。
  • 定时器触发频率大幅降低；原本预期 33 ms 间隔的测试可能只能观察到四次触发。

AI 代理看到了干净的 JS 结果和一张截图，便假设动画已正常工作。由于渲染循环从未产生像素，视觉缺陷因此被隐藏了。

针对隐藏标签页问题的修复方案

  • 对于任何画布、动画或图形验证，请保持测试标签页可见。
  • 仅在标签页处于前台时触发交互。
  • 在捕获截图前插入短暂等待（几秒钟），确保帧缓冲区已填充。
  • 如果必须使用隐藏标签页，请在报告开头添加免责声明，例如“未进行视觉渲染观察”。

代码健康度 vs. 功能行为

大多数 AI QA 脚本评估的是“代码健康度”：它们确认点击处理器已连接、没有抛出 JavaScript 异常，并且所需的库已加载。这些信号证明了代码已运行，并不代表 UI 按预期发生了变化。即使创建了 canvas 元素并调用了绘图程序，如果绘图命令针对的是零尺寸缓冲区或空资源，仍然可能渲染不出任何内容。

这种区别至关重要，因为健康的执行路径可能会掩盖缺失的视觉产物。

添加行为检查

  1. 识别动态元素 – 扫描源码中的 canvas 标签、file-input 字段、下载按钮和动画循环。
  2. 定义可观察的结果 – 对于 canvas，需要进行像素级检查以确保位图不为空；对于文件输入，验证预览图是否出现；对于下载，确认文件是否已在文件系统中创建；对于动画，断言追踪的属性随时间发生了变化。
  3. 报告覆盖范围 – 在 QA 输出中附加一个表格，列出每个功能、代码健康状态以及行为验证结果。任何缺乏行为检查的项目应标记为“未验证”，而非“通过”。

应用这一规则极大地减少了作者测试套件中的误报，同时也暴露了 CSS 不匹配的问题（即样式表声明了一种颜色，但渲染出的像素却不同）。

实现可靠视觉测试的实践步骤

  • 在可见标签页中运行测试：只要功能涉及渲染，请务必这样做。
  • 等待 UI 稳定：固定的几秒钟延迟通常足够，但更稳健的方法是使用 getImageData 轮询非空白画布。
  • 在测试脚本中将代码健康度断言与视觉断言分离：让 AI 模型独立评估两者。
  • 记录可见性状态和帧计数器（requestAnimationFrame 调用），将其作为诊断输出的一部分。
  • 记录任何无法避免的隐藏标签页运行情况，并附带明确警告，以便下游评审人员了解局限性。

下一步需要关注什么

随着 AI 辅助 QA 工具的激增，开发者必须将其视为助手，而非仲裁者。代码健康度指标永远只是用户端行为的一个不完整的代理指标。结论很简单：AI 模型只能报告它所看到的内容。如果因为标签页隐藏导致浏览器从未进行绘制，或者测试脚本从未询问“屏幕上是否出现了东西？”，模型就会开心地宣布成功。增加可见性要求和行为验证步骤，可以将一个看似完美的“通过”转变为一个值得信赖的结果。