CODEWITHSUNDEEP
javascriptcypress
Oleksiï Nikonov
Oleksiï Nikonov

Reputation: 5568

How to wait till scroll is finished in Cypress without dealing with heights of elements

how to wait the acynchronus scrollIntoView without using cy.wait(XXX) or comparing view/element heights?

Here is what i thought to be like:

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});
          ...
        });
    });

In my case i'm testing dragAndDrop so i need

  1. to scroll to an element to be dragged;
  2. mouseDown on the element
  3. scroll to target container and so on...

Also i tried a custom command 

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

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

But roots only are allowed to use @;

At this moment i use workaround with wait cyBrick.scrollIntoView().wait(500)

PS: i read in docs that scrollToView allows to chain should accertion only

Upvotes: 5

Views: 4270

Answers (1)

Ki Ueta
Ki Ueta

Reputation: 101

I stuck with similar issue using cy.scrollTo() on an Angular app with a lot of animation. Cypress proceeds to next commands before the scrolling is finished. I tried many combinations and found adding following options/values worked. These options can be used in scrollIntoView() too:

  • easing (the easing animation): linear
  • duration (Scrolls over the duration (in ms)): 100

The actual code looklikes this

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

Upvotes: 2

Related Questions