传统观念里，单元测试和浏览器测试全绿就敢合并代码。但现实中的前端故障——Safari 弹窗无法滚动、阿拉伯文排版错位、MFA 重定向后用户被退回登录页、CDN 混搭新旧静态资源——全都不违反绿色管道。管道只测试了它被告知要测的东西，而现代前端的状态、环境、渲染路径、浏览器差异和异步系统远多于测试套件覆盖的范围。本文系统梳理了这些盲点，帮助团队在信任绿色之前重新审视测试策略。
常见盲点包括：
跨浏览器测试不能只看“能否打开”，字体内联、响应式断点偏移、Safari 的滚动/溢出行为都可能使“Chrome 正常”失效
设计系统令牌更新可能改变间距、层级、动画时长，与功能无关却让现有测试“无端”失败
Web Components 的 Shadow DOM 和 slot 使得旧的选择器和交互方式不可靠，测试应聚焦公开契约而非实现细节
动态表单实质是状态机，不同条件分支、草稿保存、浏览器刷新后的恢复都需要针对关键状态转换测试
认证测试不应止于登录成功，会话持久化、MFA 弹窗、跨标签页恢复、深层链接预认证等场景常被忽略
AI 特性无法用固定输出断言：流式响应的打字指示器、内联 copilot 的接受/拒绝控件、聊天机器人的话术转接、订阅计费限额都需要针对异步 UI 和业务逻辑分别验证
AI 代理不仅要测试任务完成度，更要确保副作用可控——权限范围、白名单、可清理的合成数据、破坏性操作前的确认门
生产环境的缓存、CDN、特性标记、第三方依赖、服务 Worker 等变量在 CI 中被去除，测试环境与生产环境的差异需要显式检查
客户端状态和乐观更新涉及离线队列、多标签页冲突、服务端响应后回滚等竞态条件，仅断言即时 UI 会掩盖真实失败
实时应用依赖 WebSocket/SSE，等待超时不是同步策略，应理解驱动 UI 变化的事件并据此控制测试
AI 辅助编码可能增大变更范围和复杂度，风险信号包括组件影响面、身份认证/计费触达、新依赖、浏览器特定代码、生成代码审核程度等
工具定价应对比总拥有成本，包括平台费用、并行执行量、AI 消耗、浏览器覆盖、实施与维护、故障排查投入等
覆盖这些“糟糕状态”需要组合层：组件测试、API 测试、关键路径浏览器测试、有意义的视觉检查、真实浏览器覆盖、生产监控。绿色管道仍然重要，但它必须意味着比“Chromium 里走通了一次快乐路径”更多。
#开发者 #工具 #前端测试 #CI #QA #Safari #跨浏览器 #WebComponents #设计系统 #AI测试 #认证
📢 频道：@DevToolboxHub