在 cypress 中加载时继续向下滚动

Question

我有一个页面，其中有一个元素，如果向下滚动，它会加载新数据。

这大约需要 10 秒。

我写了以下测试：

it('Should display at least one facility in booking panel', (done) => {
  function recursivelyScroll() {
    cy.get(element)
      .scrollTo('bottom');

    cy.get(element)
      .then($el => {
        // If the element contains a loading class, we wait one second and scroll down again
        if ($el.find(Loading).length > 0) {
          setTimeout(recursivelyScroll, 1000);
        } else {
          // We are done waiting, no more loading is needed
          // write test here

          done();
        }
      });
  }
  recursivelyScroll();
});

赛普拉斯错误

在4000ms 之后超时。 done() 回调从未被调用！

根据赛普拉斯的说法，done() 方法的调用速度不够快，但他们没有关于如何延长 done 时间段的文档。此外，我可能不知道在赛普拉斯中创建这种滚动行为的更好方法。有简单的解决方法吗？

Answer 1

您是否尝试过在 cypress 中使用递归插件？

看起来像这样：

cy.get(element).scrollTo('bottom');
recurse(
    () => cy.contains('element', 'Loading').should(() => {}),
    ($quote) => $quote.length > 0 ,
    {
      limit: 300,
      log: false,
      post(){
        setTimeout(recursivelyScroll, 1000);
      }
    },
)

这个想法是在这里拍摄的：https://www.youtube.com/watch?v=KHn7647xOz8 这里示例如何使用和安装https://github.com/bahmutov/cypress-recurse

Answer 2

尝试切换到When断言并在执行之外声明该函数：

When('Should display at least one facility in booking panel', (done) => {
    recursivelyScroll(done)
}

function recursivelyScroll(done){
    //see implementation below
}

不知道“正在加载”是什么意思，也许你必须用双引号括起来？

另外请注意，cypress 是异步的，所以你的代码中会同时执行 scrollTo 和 then 代码部分，只需在滚动之后使用 then 即可。

我会在执行递归之前将setTimeout改成cy等待函数，试试下面的代码：

function recursivelyScroll(done) {
    cy.get(element)
    .scrollTo('bottom')
    .then($el => {
        // If the element contains a loading class, we wait one second and scroll down again
        if ($el.find(".Loading").length > 0) {
            cy.wait(1000).then(()=>{
                recursivelyScroll(done);
            })
        } else {
            // We are done waiting, no more loading is needed
            // write test here
            done();
        }
    });
}