e2e Web测试疑难清单12个常见失败场景与解决方案【免费下载链接】e2eNext generation e2e testing framework for web and mobile apps.项目地址: https://gitcode.com/GitHub_Trending/e2e6/e2e写Web端 E2E 测试时最折磨人的往往不是业务逻辑而是那些看得见却点不到的界面角落。本文基于 e2e 框架自带的 42 个刁难场景基准应用 apps/web-benchmark/整理出 12 个高频失败场景与对应解法。e2e 是一个面向 Web 和移动端的新一代 E2E 测试框架你可以用自然语言让 AI Agent 驱动应用完成操作再用定位器locators和断言assertions在同一个测试里做确定性校验——两者结合正是应对这些疑难场景的核心思路。一、选择器打不到的场景3个1. Shadow DOM 深层表单表单被埋在多层 open/closed 影子根里普通 CSS 选择器根本够不着。e2e 的screen查询可以穿透影子边界直接按占位符和角色取值无需手动拼接选择器参考用例apps/web-benchmark/tests/shadow-dom-form.e2e.ts场景源码apps/web-benchmark/app/src/Examples/2. 跨 iframe 读写验证码显示在一个 iframe提交表单在另一个 iframe。用browser.frameLocator()定位到目标框架后再操作即可注意每个框架内的元素属于该框架的世界跨框架的instanceof判断永远为假这是经典坑参考用例apps/web-benchmark/tests/iframe-form.e2e.ts3. 撒谎的可访问性树aria-label被打乱、placeholder 张冠李戴a11y 树与肉眼所见完全对不上。此时语义树不可信应让 Agent 开启vision: true以像素证据为准或用可见文本定位而非可访问名称。对应场景LyingLabels 与 AriaHiddenFlow。二、页面上根本没有 DOM3个4. Canvas 纯画布界面整个流程画在canvas上——没有 DOM、没有文本节点选择器体系彻底失效。解法是走像素用视觉观察vision 坐标点按完成流程e2e 的 Web 引擎内置了像素级工具支持这类纯视觉页面参考用例apps/web-benchmark/tests/canvas-only.e2e.ts5. 图片化 UI操作指引被渲染成图片、按钮只剩 iconDOM 里零可读文本。处理方式与 Canvas 相同依赖截图理解画面按坐标交互断言则校验成功页的像素或最终 URL。6. CSS 伪元素文字所有标签来自::before/::after的 contentDOM 里是一堆空 div。这些文字既不在文本节点里也不在可访问树里同样只能靠视觉识别后按坐标操作。三、列表与滚动类2个7. 无限滚动找目标目标条目藏在几百条数据之后。不要写死滚 N 次而是用expect的轮询断言持续滚动直到toHaveText/toBeVisible满足为止既稳又快参考用例apps/web-benchmark/tests/infinite-scroll.e2e.ts8. 虚拟滚动表格窗口化表格中屏幕外的行根本不在 DOM 里直接定位必然LOCATOR_NOT_FOUND。正确姿势是滚动后等待让目标行进屏再断言配合expect的自动轮询无需手写 sleep。四、遮挡与时序类3个9. 遮罩陷阱Cookie 横幅 / 隐形拦截层目标按钮被 Cookie 横幅或一个透明的点击拦截层盖住点击直接ACTION_FAILED。先关闭或滚动让开所有 overlay 再操作目标Agent 模式agent.act会自动识别并先处理遮挡物参考用例apps/web-benchmark/tests/overlay-trap.e2e.ts10. 异步状态三件套骨架屏 / 瞬时 Toast / 延迟启用按钮提交按钮要等骨架屏消失后才可点成功提示一闪而过。e2e 的expect默认自动轮询等状态稳定落定再判定对瞬时 Toast先expect(toast).toBeVisible()抓住它再读内容参考用例apps/web-benchmark/tests/async-states.e2e.ts11. 每秒重挂载的过期 DOM列表节点每 1 秒销毁重建拿到的节点引用秒变 stale。不要缓存节点引用每次操作前重新解析定位器expect的轮询机制天然适应这种动起来的页面参考用例apps/web-benchmark/tests/stale-dom.e2e.ts五、交互特殊机制4个12. 防抖搜索 Portal 下拉输入触发防抖后候选项渲染在 portal 里挂在 body 末尾不在输入框 DOM 里。等防抖窗口过去再点选项即可断言用toContainText匹配结果。13. 仅悬停展开的菜单 / 原生对话框嵌套下拉只在 hover 时展开必须模拟真实鼠标悬停而alert / confirm / prompt原生弹窗会阻塞整个页面需要注册对话框处理器按脚本应答参考用例apps/web-benchmark/tests/native-dialogs.e2e.ts14. 指针拖拽Kanban 看板看板只认 Pointer 事件且带拖拽阈值HTML5 drag 事件完全无效。e2e 的 Web 引擎提供指针坐标与路径级操作按下→移动→抬起见 apps/testbed/ 中的 pointer 用例。15. 纯 div 堆砌的登录页Div Soup没有任何 role、label、testid 的远古风格页面确定性定位几乎无解。这正是 AI Agent 的用武之地一句agent.act(登录账号)Agent 靠视觉坐标完成操作再用确定性断言收口结果。附失败时如何快速定位 ️e2e 每次运行都会生成.e2e/report.json报告与截图/录屏产物退出码可直接区分故障类型1测试失败、2配置问题、3引擎/环境故障。常见错误码速查完整清单见 docs/reference/errors.mdx错误码常见原因解法LOCATOR_NOT_FOUND角色/名称不匹配、元素在 iframe 内、页面没打开读可访问名称、exact: false、frameLocatorLOCATOR_AMBIGUOUS多个匹配隐藏副本、重名标签加{ name }、容器内限定、first()ASSERTION_FAILED期望写错或状态 5s 后仍未落定对照截图、加大{ timeout }ACTION_FAILED元素被遮挡/禁用/已卸载先用expect等对条件、关闭遮罩APP_UNREACHABLE应用没起来或端口不对检查app.command日志、加大启动超时排查三板斧--headed开可见浏览器亲眼看着跑、--video录屏回放失败现场、--debug查看每步 Agent 的耗时与模型调用明细详见 docs/debugging.mdx。小结选择器够不着Shadow DOM / iframe / 假 a11y→ 用穿透查询、frameLocator、视觉证据没有 DOMCanvas / 图片 UI / CSS 文字→ 视觉 坐标操作页面在动滚动 / 虚拟列表 / 遮罩 / 异步 / 重挂载→expect自动轮询别缓存引用交互特殊拖拽 / 悬停 / 对话框 / 无标签页面→ 指针手势、对话框处理器、AI Agent 兜底失败看不懂→ 看.e2e/report.json、对照错误码表、--headed--video复现场景目录与规则说明可以持续在 apps/web-benchmark/app/src/examples.ts 中查阅每个场景都有对应的确定性测试与 Agent 测试双份覆盖是学习如何写稳 E2E 测试的绝佳素材 【免费下载链接】e2eNext generation e2e testing framework for web and mobile apps.项目地址: https://gitcode.com/GitHub_Trending/e2e6/e2e创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考