使用Cypress做E2E测试时页面无限加载问题求助

AI 小北

2026-9-25

常见触发原因及对应解决方案

前端路由未正确处理Cypress运行环境下的状态切换
多数单页应用的路由跳转逻辑会依赖窗口原生的beforeunload/unload事件监听，或是存在自定义的加载状态防抖逻辑，Cypress的页面劫持机制可能会导致这类事件触发异常，跳转后加载状态无法被正确重置。
解决方法：跳转前主动移除测试环境下多余的事件监听，或是在跳转命令后添加自定义等待逻辑，等待目标分区的核心DOM元素出现，而非依赖Cypress默认的页面加载完成判定：
```
// 示例代码
cy.get('header .nav-item[href="/target-section"]').click()
cy.waitUntil(() => cy.get('.target-section-wrapper').should('be.visible'), {
  timeout: 10000,
  interval: 500
})
```
Cypress默认的页面加载等待逻辑和站点的异步资源加载逻辑冲突
你当前配置的modifyObstructiveCode: false会保留站点原有的所有阻塞型代码逻辑，如果站点存在未处理的死循环请求、或是依赖第三方资源加载完成才会终止加载状态，Cypress会持续等待直到超时。
解决方法：跳转前关闭不必要的资源请求拦截，或是添加pageLoadTimeout配置延长超时时间，也可以使用cy.intercept()拦截死循环的异常请求直接返回成功状态：
```
// cypress.config.js 补充配置示例
module.exports = defineConfig({
  e2e: {
    pageLoadTimeout: 30000,
    chromeWebSecurity: false,
    modifyObstructiveCode: false
  }
})
```
登录态未正确同步到跳转后的分区
部分站点不同分区会校验不同的权限cookie/请求头，如果登录态仅在首页生效，跳转后的分区会持续发起权限校验请求进入死循环。
解决方法：跳转后主动打印当前页面的cookie和localStorage信息，确认登录态是否正常同步，必要时可以用cy.setCookie()主动写入对应分区需要的权限凭证。