1
输入框样式
检测文本输入外观变化：边框、背景、内边距和字体属性。
35 测试用例
表单与状态
表单元素是用户交互的关键触点。损坏的验证状态或缺失的焦点指示器可能导致输入错误。Delta-QA 监控每个与表单相关的视觉状态。
我们检测什么
2
复选框和单选框
监控自定义复选框和单选按钮样式，包括选中/未选中视觉状态。
3
验证状态
捕捉 :valid、:invalid、:required 伪类样式变化和错误消息展示。
4
焦点指示器
跟踪对键盘导航可访问性至关重要的 :focus 和 :focus-visible 样式变化。
5
占位符样式
检测 ::placeholder 伪元素在颜色、透明度和字体属性方面的变化。
6
按钮状态
监控按钮的 hover、active、disabled 和默认状态以确保视觉一致性。
实际场景
🎯
占位符掩盖了错误提示
一位开发者修改了全局帮助文本样式，副作用是注册表单的错误提示从红色变成了浅灰色。访客提交了无效的邮箱，看到字段下方有一段文字……但因为是浅灰色加白色背景，根本读不清。他们以为网站坏了就离开了。没有人有时间在每次部署时检查每个表单的每种错误状态。Delta-QA 对比截图，高亮错误提示的颜色变化——几乎不可见的文字在差异图中清晰显现。
⚠️
缩小的搜索框
一位开发者修改 header 的 CSS 网格来添加新的导航链接。搜索栏缩小了一半来腾出空间。在移动端变得极小——根本无法使用。访客找不到产品，因为在这么小的输入框里打字太痛苦了。开发者检查了新链接是否正常显示，没注意到旁边的搜索框缩小了。Delta-QA 对比截图，高亮搜索栏的缩小——尺寸变化在叠加图中清晰可见。
💡
消失的焦点样式
一位开发者给 input 添加了 outline: none "看起来更干净"。结果用户点击输入框时，没有任何视觉反馈来指示哪个字段处于活跃状态——蓝色轮廓消失了。这同时也是一个 WCAG 无障碍违规。手动检查每个表单每个字段的焦点状态根本不现实。Delta-QA 捕获每个字段的焦点状态并对比截图：蓝色轮廓的消失在视觉差异图中立刻显现。