Cypress加载Spinner测试最佳实践及超时问题解决方案

问题分析 #

• 首次测试存在竞态条件：页面请求可能在cy.get(selectors.spinner)执行前就完成，导致Spinner已消失，断言失败。
• 二次测试的超时错误：cy.intercept的回调Promise等待时间超过了默认的defaultCommandTimeout（4000ms），因为要等待测试中手动触发sendResponse()，超出了Cypress对拦截回调的时间限制。

修正方案（无需修改全局配置） #

核心思路：给目标请求的拦截回调单独设置超时，同时确保测试步骤与请求状态严格同步。

方案一：单独配置拦截请求超时 #

it('should display spinner during page load', () => {
  let sendResponse;
  const trigger = new Promise((resolve) => {
    sendResponse = resolve;
  });

  // 给该拦截请求单独设置更长超时，规避全局4000ms限制
  cy.intercept({
    method: 'GET',
    url: '/myRequiredPageData',
    timeout: 10000
  }, (req) => {
    return trigger.then(() => {
      req.reply(); // 等待测试触发后再响应请求
    });
  });

  cy.visit(myPageUrl);

  // 确认Spinner显示后，触发请求响应
  cy.get(selectors.spinner).should('be.visible').then(() => {
    sendResponse();
    // 断言Spinner消失
    cy.get(selectors.spinner).should('not.exist');
  });
});

方案二：使用请求暂停/恢复更简洁实现 #

it('should display spinner during page load', () => {
  let pendingRequest;
  cy.intercept('GET', '/myRequiredPageData', (req) => {
    pendingRequest = req;
    req.pause(); // 暂停请求响应
  });

  cy.visit(myPageUrl);

  // 确认Spinner显示后，恢复请求
  cy.get(selectors.spinner).should('be.visible').then(() => {
    pendingRequest.resume();
    // 断言Spinner消失
    cy.get(selectors.spinner).should('not.exist');
  });
});

加载Spinner测试的最佳实践 #

• 拦截核心请求：必须拦截页面渲染依赖的关键请求，彻底避免网络速度或页面加载顺序导致的竞态问题。
• 同步请求与UI状态：先确认Spinner已显示，再允许请求完成，确保测试能稳定捕获到Spinner的存在状态。
• 用断言替代硬等待：所有步骤基于元素的exist/be.visible断言，拒绝使用cy.wait(xxx)这类不稳定的硬等待。
• 局部配置超时：针对需要延迟响应的拦截请求，单独设置timeout参数，不影响全局测试配置。
• 验证完整链路：除了Spinner的显隐，可额外验证请求响应后页面数据是否正确渲染，确保流程完整性。

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