1
Display 切换
检测元素在 display 值之间切换（none、block、flex、grid、inline）。
25 测试用例
可见性与透明度
可见性回归是最具迷惑性的一类，因为它们让管道相信一切正常：元素存在于 DOM 中，单元测试通过，但视觉上它已经消失、被另一个组件遮挡，或被父容器裁剪。这正是促销横幅在代码中始终存在但因别处添加 overflow: hidden 而变得不可见的场景，或移动端「购买」按钮被 z-index 配置过高的聊天小部件覆盖的场景。在业务型界面上，一条因级联效应而被设为 opacity 0 的验证错误消息可能让一项关键操作失败，而操作员却不明白原因。常见原因包括：header 重构时新增的 overflow、跨团队 z-index 协调不当造成的层叠冲突、未完全回滚的 A/B 测试遗留下的 display: none、为某个视觉效果引入但被过度传播的 opacity 修改，或生产环境中样式表加载顺序与预期不同造成的冲突。Delta-QA 攻克该盲区的方法是比较浏览器中渲染出的截图，而非原始 DOM 树。如果一个元素不再可见、被部分裁剪、不透明度下降或被其他组件遮盖，视觉 diff 会清晰报告。该工具还能捕获交互状态，使您能够验证下拉菜单、modal 或 overlay 在每次部署后仍然正确可见，无需在每个页面上手动重现每个用户路径，从而提升视觉回归测试的覆盖率。
我们检测什么
2
Visibility 属性
捕捉 visibility:hidden 变化，元素变为不可见但仍占据空间。
3
透明度变化
监控从完全透明（0）到完全不透明（1）的 opacity 变化。
4
Z-index 重排
检测堆叠上下文变化，元素因 z-index 修改而以不同方式重叠。
5
Overflow 和裁剪
识别 overflow 行为变化（visible、hidden、scroll、auto），可能隐藏或显示内容。
实际场景
🎯
消失的促销横幅
一位开发者重做 header 时在父容器上添加了 overflow: hidden。促销横幅"使用代码 SUMMER 享八折"还在代码里，但视觉上被裁切了——屏幕上不可见。访客看不到促销活动，你连续好几天都在丢失销量。团队信赖测试流水线——横幅在 DOM 中存在，测试全部通过。Delta-QA 对比截图，检测到横幅消失——页面顶部的空白在差异图中立刻显现。
⚠️
遮住按钮的 z-index
一位开发者集成了一个 z-index 为 9999 的聊天小部件。在移动端，小部件正好定位在屏幕底部悬浮的"购买"按钮上方。按钮还在代码里但被聊天窗口完全遮住——客户无法购买。测试人员在桌面端验证过，没有检查移动端元素重叠的情况。Delta-QA 对比移动端截图，检测到"购买"按钮被小部件遮盖——被遮挡区域在差异图中清晰可见。
💡
让文字无法阅读的透明度
一位开发者降低了主图暗色遮罩层的透明度，想"让照片更清晰"。白色文字落在了过于明亮的背景上——几乎无法阅读。访客无法阅读首页的主要信息。这个改动看起来只是美化调整，开发者觉得效果更好就直接合并了。Delta-QA 对比截图，高亮变得无法阅读的文字——文字与背景之间的对比度下降在叠加图中清晰可见。