Cypress滚动加载场景下done回调4000ms超时怎么解决？

问题根因 #

• Cypress 中带done回调的测试用例默认超时时间为4000ms，你的页面完整加载需要10秒，超出默认阈值自然触发超时报错
• 你使用原生setTimeout实现递归调用，脱离了Cypress的命令调度队列，容易出现时序错位，是Cypress不推荐的用法

解决方案 #

方案1：快速修复现有代码，延长超时时间 #

在it块的第二个参数传入配置项，指定超时时间为15000ms（覆盖10秒的加载耗时即可），修改后代码如下：

// 第二个参数传入超时配置，第三个参数为测试用例回调
it('Should display at least one facility in booking panel', { timeout: 15000 }, (done) => {
  function recursivelyScroll() {
    cy.get(element)
      .scrollTo('bottom');

    cy.get(element)
      .then($el => {
        if ($el.find(Loading).length > 0) {
          // 把setTimeout换成Cypress自带的cy.wait，避免脱离命令队列
          cy.wait(1000).then(recursivelyScroll);
        } else {
          // 你的测试断言逻辑写在这里
          done();
        }
      });
  }
  recursivelyScroll();
});

方案2：更符合Cypress最佳实践的实现 #

不需要手动递归调用+done回调，直接利用Cypress的断言自动重试机制实现，代码更简洁稳定：

it('Should display at least one facility in booking panel', { defaultCommandTimeout: 15000 }, () => {
  // 定义滚动函数
  const scrollToBottom = () => cy.get(element).scrollTo('bottom');
  
  // 不断滚动直到加载元素消失，Cypress会自动重试直到超时
  cy.get(element).then($el => {
    const checkLoading = () => {
      if ($el.find(Loading).length > 0) {
        scrollToBottom();
        cy.wait(1000);
        cy.get(element).then($newEl => {
          $el = $newEl;
          checkLoading();
        });
      }
    };
    checkLoading();
  });

  // 加载完成后直接写断言即可，Cypress会自动等待前置命令执行完成
  cy.get('你要断言的设施选择器').should('have.length.gte', 1);
});

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