Clicking on elements not in view with scrollIntoView with Cypress

 

In this blog post I will explain one of the ways how we can interact with an element hidden from the users view. Lets say we have a button on a card view as shown below. However, when the page first loads this button may be hidden from the view.

Our objective is to click on the card once its visible. Since this button is hidden at first the click function may fail. Cypress provides multiple options to select the button we want. 

In our example lets say the id of the element is #card. Then we can use the scrollIntoView() method, when invoked, the script will scroll down until "Click" button is visible. Once the visibility is provided the click() function will be executed.

cy.get('#card').scrollIntoView().should('be.visible').click()