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?
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)
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.
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')