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

Posted 2023-02-18

【中文标题】在 cypress 中加载时继续向下滚动

【英文标题】：Keep scrolling down while loading in cypress

【发布时间】：2021-12-14 10:59:56

【问题描述】：

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

这大约需要 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 时间段的文档。此外，我可能不知道在赛普拉斯中创建这种滚动行为的更好方法。有简单的解决方法吗？

【参考方案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

【讨论】：

这看起来很有希望！我放弃了需要此代码的测试，但我真的很喜欢这个答案！

【参考方案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();
        
    );

【讨论】：

cy.wait 可能是我需要做的，而不是 setTimeout，这看起来也很有希望。 Loading 是我代码中的一个变量，因此我无需更改其余部分，但我知道很难以这种方式重现。谢谢你的建议！