Cypress E2E测试全部通过但无步骤显示且加载圈持续转动问题排查

以下是具体排查方向和解决建议：

• 检查版本兼容性
  确认当前Cypress版本与项目依赖（如Node.js）是否匹配。可尝试升级到最新稳定版：

  npm install cypress@latest --save-dev
  

  若升级后问题依旧，可回退到之前能正常运行的版本测试。

• 验证配置文件设置
  检查cypress.config.js（或cypress.config.ts）：

  • 临时注释blockHosts、modifyObstructiveCode这类可能干扰UI渲染的配置项，重试测试。
  • 确认viewportWidth/viewportHeight设置合理，极端尺寸可能导致UI渲染异常。

• 排查浏览器环境问题

  • 切换至其他浏览器（如Edge、Firefox）运行测试，排查是否为特定浏览器兼容性问题。
  • 以无痕模式启动Cypress，或清除浏览器缓存后重试，避免缓存干扰。
  • 禁用浏览器所有扩展（如广告拦截器、隐私插件），排除插件拦截Cypress脚本的可能。

• 检查测试代码阻塞逻辑

  • 排查用例中未正确处理的异步操作，确保所有异步行为都通过cy.wait()、cy.then()等Cypress命令处理，避免进程阻塞。
  • 检查是否存在无限循环、超长等待（如cy.wait(999999)）这类卡住测试的代码。
  • 确认cy.visit()加载的页面资源是否全部正常加载，页面加载失败或缓慢会导致Cypress UI无法更新。

• 清理缓存与残留进程

  • 执行npx cypress cache clear清除Cypress缓存，再重新启动测试。
  • 手动关闭所有Cypress及相关浏览器进程，避免残留进程干扰。

• 排查项目依赖冲突
  创建一个仅含基础Cypress依赖的新项目，验证是否能正常显示测试步骤。若正常，逐步引入原项目依赖，定位冲突的包。

内容的提问来源于stack exchange，提问作者Maykel