如何在 Cypress 中等待滚动完成而不处理元素的高度

Question

如何在不使用cy.wait(XXX)或比较视图/元素高度的情况下等待同步scrollIntoView？

这就是我的想法：

const cyBrick = cy.get(selector);
    cyBrick.scrollIntoView().then( _ => {
      cyBrick
        .then(([$brick]) => {
          const brickBody = $brick.getBoundingClientRect();
          cyBrick.trigger('mousedown', {which: 1, pageX: brickBody.x, pageY: brickBody.y});
          ...
        });
    });

就我而言，我正在测试拖放所以我需要

1. 滚动到要拖动的元素；
2. 将鼠标放在元素上
3. 滚动到目标容器等等...

我还尝试了自定义命令

//commands.js
Cypress.Commands.add('scrollIntoViewAndUseThen', {prevSubject: true}, (subject) => {
  cy.wrap(subject).scrollIntoView().as('scrolling');
  cy.wait('@scrolling');
});

//mytest.spec.js
cyBrick.scrollIntoViewAndUseThen().then( _ => ...

但只允许root使用@；

此时我使用等待的解决方法 cyBrick.scrollIntoView().wait(500)

PS：我在文档中读到，scrollToView允许仅链接应该加速

Answer 1

我在带有大量动画的 Angular 应用程序上使用 cy.scrollTo() 遇到了类似的问题。在滚动完成之前，赛普拉斯将继续执行下一个命令。我尝试了很多组合，发现添加以下选项/值是有效的。这些选项也可以在scrollIntoView()中使用：

• easing（缓动动画）：线性
• 持续时间（滚动持续时间（以毫秒为单位））：100

实际的代码看起来像这样

cy.scrollTo('bottom', { easing: 'linear',duration: 100 }).then(() => { 
    // commands need to be executed after the scrolling is finished
});