Cypress执行多个it用例后cy.visit()偶现页面不加载问题咨询

这类问题在Cypress Web自动化测试中非常普遍，多数和测试状态污染、页面加载事件阻塞、默认配置容错性不足有关，以下是可落地的排查思路和解决方案：

排查方向 #

• 优先核对测试上下文状态：打开Cypress Test Runner的时间旅行快照，定位失败用例执行前的页面状态，重点检查上一个用例收尾阶段的/logout跳转是否正常完成：有没有logout请求超时、302跨域重定向异常、页面静态资源401/403、控制台JS报错阻塞load事件触发的情况。连续跑用例时如果上一个用例的登出流程没走完，下一个用例的登录逻辑会在异常页面上下文执行，直接导致后续cy.visit导航卡住。
• 检查页面加载超时阈值：Cypress默认pageLoadTimeout为60000ms，连续执行用例时浏览器内存占用会持续升高，如果被测单页应用存在内存泄漏问题，页面加载速度会逐次下降，超过默认超时时间就会判定加载失败，失败时控制台通常会抛出Timed out after waiting 60000ms for your remote page to load类报错。
• 检查未清理的异步任务：前面用例触发的未捕获JS异常、未resolve的XHR/fetch请求、未断开的websocket连接，都会阻塞Cypress等待的页面load事件触发，导致cy.visit一直挂起直到超时。
• 检查登录逻辑稳定性：如果cy.login是通过UI点击操作实现的登录，连续执行时很容易出现元素定位偶发失败、登录跳转未完成就进入用例逻辑的问题，后续cy.visit会因为页面还在登录跳转流程中出现导航中断。

解决方案 #

结合给出的测试代码，可按以下方式优化，能解决绝大多数连续执行时的cy.visit偶发失败问题：

describe('Check stuff', () => {
  const password = Cypress.env('PASSWORD');
  const user1 = Cypress.env('USERS_US')['USER1']['USERNAME']
  // 根据测试环境实际加载速度调大页面加载超时
  Cypress.config('pageLoadTimeout', 120000)

  beforeEach(() => {
    // 每个用例执行前主动清理所有存储状态，避免上一个用例残留污染
    cy.clearCookies()
    cy.clearLocalStorage()
    cy.window().then(win => win.sessionStorage.clear())
    // 优先替换UI登录为接口登录，登录完成后显式校验登录态生效
    cy.loginByApi(user1, password)
    cy.visit('/')
    cy.get('[data-testid="user-avatar"]').should('be.visible')
  });

  afterEach(() => {
    // 登出前判断页面有效性，避免页面崩溃时logout逻辑失效
    cy.window().then(win => {
      if (win.location.href !== 'about:blank') {
        // 替换页面跳转登出为接口登出，减少页面跳转带来的不稳定
        cy.request('POST', '/api/logout')
        cy.clearAllSession()
      }
    })
  });

  // 抽离测试用例统一配置，减少重复代码
  const testCases = [
    { id: 'check1', url: 'url1', match: 'url1' },
    { id: 'check2', url: 'url2', match: 'url2' },
    { id: 'check3', url: 'url3', match: 'url3' },
    { id: 'check4', url: 'url4', match: 'url4' },
    { id: 'check5', url: 'url5', match: 'url5' },
  ]

  testCases.forEach(case => {
    it(case.id, () => {
      cy.visit(case.url, {
        failOnStatusCode: false,
        retryOnNetworkFailure: true,
        timeout: 60000
      })
      cy.url().should('contain', case.match);
    });
  })
});

配套的全局优化配置：

• 在cypress/support/e2e.js中添加全局未捕获异常处理，忽略页面本身不影响业务逻辑的JS报错，避免报错阻塞Cypress执行：

Cypress.on('uncaught:exception', () => {
  return false
})

• 在cypress.config.js中配置运行时用例重试，遇到偶发网络、加载问题时自动重试用例，避免单个偶发问题中断整个测试流程：

module.exports = defineConfig({
  e2e: {
    retries: {
      runMode: 2,
      openMode: 0
    },
    // 其他原有配置
  }
})

• 如果被测应用是单页应用，可在cy.visit后显式等待页面核心渲染元素出现，不要仅依赖url断言判断页面加载完成。

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