1
仪表板组件
验证数据卡片、图表、KPI 显示和指标面板的视觉完整性。
35 测试用例
真实组件
真实组件将多个 CSS 属性组合成复杂的相互依赖的视觉系统。一个属性的变化可能级联到整个组件。Delta-QA 测试完整的 UI 模式以捕获回归。
我们检测什么
2
电商卡片
测试产品卡片、价格显示、评分组件和购买按钮样式。
3
看板
监控列布局、卡片堆叠、拖拽手柄和状态指示器。
4
定价表
验证定价层级卡片、功能比较列表、突出显示的方案和 CTA 按钮样式。
5
导航栏
测试头部导航、下拉菜单、移动端汉堡菜单状态和活动链接指示器。
6
数据表格
检测表头、行条纹、单元格对齐和响应式表格行为的变化。
实际场景
🎯
在表格后面打开的下拉菜单
一位开发者在表格上添加 overflow: hidden 来修复水平滚动问题。后果：每行的操作下拉菜单打开后被裁切——只能看到上半部分，"删除"和"归档"选项被截断。开发者修复了滚动问题，没有检查下拉菜单是否仍然正常显示。Delta-QA 对比菜单打开状态的截图，检测到下拉菜单被截断——缺失的下半部分在差异图中清晰可见。
⚠️
不再居中的弹窗
一位开发者为新的 sticky 组件修改了 body 的定位。副作用：确认弹窗偏移到了左上角而不是居中显示。在移动端，弹窗部分超出屏幕——访客看不到"确认"按钮。上线很紧急，测试了 sticky 组件但没测试网站上的 5 个弹窗。Delta-QA 对比截图，高亮弹窗的位移——偏移的新位置在叠加图中清晰可见。
💡
显示两张幻灯片的轮播
一个 CSS 改动修改了产品轮播父容器的宽度。原本一次只显示一张的轮播现在同时显示了两张——第二张被截断了一半。视觉效果明显损坏，客户看到的是粗糙的展示。开发者因为其他原因修改了容器，根本不知道轮播依赖它。Delta-QA 对比截图，检测到部分显示的第二张幻灯片——被截断的内容在差异图中清晰可见。