Cypress.io: Anyway to test for specific scroll amount?

Question

Wanted to know if there is some way to test for scroll amount, within a certain range with Cypress.io.

More Specifically

1. Starting from top of page, press button
2. Page scrolls down to a certain height
3. Test whether scroll height is correct within a certain range

My attempt: The way I assume would be best is to test that would to test out, that a current div is not within the viewable area of phone screen. Then to scroll down so it does become viewable.

cy.get('#angular-projects').should('not.be.visible') // div #angular-projects
cy.get('#developer-projects').click() // button
cy.get('#angular-projects').should('be.visible')

Wanted to know whether this can be done via mocha, chai, if there is no cypress work around

Answer 1

You can get the window object with cy.window() and then build your assertion checking if the scrollY equals what you expect.

Something like this should test if the scroll is between 300 and 500 pixels from the top (the first argument of closeTo specifies the value you want and the second is the margin of error you want to accept):

cy.window().then(($window) => {
  expect($window.scrollY).to.be.closeTo(400, 100);
});