Cypress wait-until not working as expected

Question

I'm using the cypress-wait-until plugin. I have a HTML test page with long scroll and element on bottom. A simple script scrolls the element into view. I have a Cypress test which checks if an element appears within the viewport, but it isn't working as expected:

.waitUntil(() => cy.get('#scrollTo').isInViewport());

With cypress command isInViewport

Cypress.Commands.add('isInViewport', { prevSubject: true }, (subject) => {
  const windowInnerWidth = Cypress.config('viewportWidth');
  const windowInnerHeight = Cypress.config('viewportHeight');

  const bounding = subject[0].getBoundingClientRect();

  const rightBoundOfWindow = windowInnerWidth;
  const bottomBoundOfWindow = windowInnerHeight;

  expect(bounding.top).to.be.at.least(0);
  expect(bounding.left).to.be.at.least(0);
  expect(bounding.right).to.be.lessThan(rightBoundOfWindow);
  expect(bounding.bottom).to.be.lessThan(bottomBoundOfWindow);
});

The test fails, it doesn't seem to wait until the element appears (element is scrolled into view in a smooth way). Note that the script itself and the scrollIntoView command are working correctly, because when I a write test like that:

.get('#scrollTo')
.wait(1000)
.isInViewport();

It passes. However I don't want to use the wait function. I'm new to Cypress, what am I doing wrong?

Answer 1

I think cypress-wait-until needs function () => cy.get('#scrollTo').isInViewport() to return something truthy (not sure, the docs are not precise) - but all the examples shown have a false/true return value (false until condition is met).

For your case that may be a simple as

Cypress.Commands.add('isInViewport', { prevSubject: true }, (subject) => {
  ...

  // NO explicit expects here, they will fail and stop the test 
  //expect(bounding.top).to.be.at.least(0);
  //expect(bounding.left).to.be.at.least(0);
  //expect(bounding.right).to.be.lessThan(rightBoundOfWindow);
  //expect(bounding.bottom).to.be.lessThan(bottomBoundOfWindow);

  // Return false or true
  return bounding.top >= 0 &&
    bounding.left >= 0 &&
    bounding.right < rightBoundOfWindow &&
    bounding.bottom < bottomBoundOfWindow
});

Since it's a custom command, you may need to cy.wrap()

  // Return false or true
  const result = bounding.top >= 0 &&
    bounding.left >= 0 &&
    bounding.right < rightBoundOfWindow &&
    bounding.bottom < bottomBoundOfWindow;
  return cy.wrap(result)

Answer 2

Since you are testing the script that scrolls to the element after visiting, then .should() will requery with a defaultCommandTimeout of 4000 ms. If this is not enough you can alter the timeout for the specific query.

cy.get('#scrollTo',{ timeout: 6000 }) //sets command timeout to 6 seconds
  .should('be.visible')

Answer 3

So I found solution, I'll post it here just for record in case anyone would have same problem. First I removed my beInViewport function from Cypress custom commands to separate helper function:

export function beInViewport($el: any): void {
  const windowInnerWidth = Cypress.config('viewportWidth');
  const windowInnerHeight = Cypress.config('viewportHeight');

  const bounding = $el.get()[0].getBoundingClientRect();

  const rightBoundOfWindow = windowInnerWidth;
  const bottomBoundOfWindow = windowInnerHeight;

  expect(bounding.top).to.be.at.least(0);
  expect(bounding.left).to.be.at.least(0);
  expect(bounding.right).to.be.lessThan(rightBoundOfWindow);
  expect(bounding.bottom).to.be.lessThan(bottomBoundOfWindow);
}

And then I just simply used it as argument passed to should function:

cy.get('#element').should(beInViewport);

Works perfectly.