1
输入框样式
检测文本输入外观变化：边框、背景、内边距和字体属性。
35 测试用例
表单与状态
表单集中承载了应用中不成比例的高价值：注册、支付、搜索、银行业务确认、ERP 工单录入。表单字段上的一次视觉回归可能让转化率下滑，或在一次关键流程中阻断业务操作员。风险不仅在于字段静态时的外观，更在于其衍生状态：focus、hover、disabled、error、success，以及关联的 placeholder 和帮助文本。当开发人员为了「显得更整洁」而移除 outline 时，会损害 WCAG 无障碍可达性，键盘用户将不再知道自己正在哪个字段中输入。当帮助消息的全局样式被修改时，验证错误可能从红色变为浅灰色，无法被识别。常见回归来自 CSS grid 的修改导致搜索框收窄、reset 抹去了 checkbox 与 radio 的原生样式，或 UI 框架升级微妙地改变了 input 的边框与高度。Delta-QA 在不同状态下捕获表单，并将这些截图与视觉 baseline 进行比对。感知分析突显消息颜色变化、消失的 focus 指示器、尺寸已变的字段、被改动的 placeholder 以及不再视觉上突出的错误状态。这种覆盖避免了每次部署都要在每个表单上手动测试每个录入场景，并保证关键转化路径或业务操作路径在版本之间保持视觉一致，强化视觉回归测试与页面对比能力。
我们检测什么
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 捕获每个字段的焦点状态并对比截图：蓝色轮廓的消失在视觉差异图中立刻显现。