How to Use Cypress scrollIntoView() Command

scroll-into-view-demo.cy.js

/* Official Documentation */
/* https://docs.cypress.io/api/commands/scrollintoview */


/* Cypress Custom Command - Scroll till end of page */
/* Python equivalent */
/* https://github.com/hjsblogger/web-scraping-with-python/blob/main/pageobject/helpers.py#L96 */
/* https://github.com/hjsblogger/web-scraping-with-python/blob/main/pageobject/helpers.py#L111 */


/* Also took help of AI to convert the Python code to Cypress custom command in JS */
Cypress.Commands.add('scrollUntilBottom', (url) => {
   cy.visit(url); // Visit the provided URL


   const scroll_window = () => {
     cy.window().then((win) => {
       const startHeight = win.document.body.scrollHeight;
       win.scrollTo(0, startHeight);


       /* Wait for the content to load */
       cy.wait(2000);


       /* Check the new scroll height */
       const newHeight = win.document.documentElement.scrollHeight;


       if (newHeight > startHeight)
       {
         /* If the new height is greater, repeat the process */
         scrollAndCheckHeight();
       }
       else
       {
         /* End of the page reached */
         cy.log('Reached the end of the page');
       }
     });
   };


   scroll_window();
});


it('Window ScrollIntoView Demo - Infinite Scroll', () =>
{
   const cameraImage = '[src="/static/img/59851-A.jpg"]';


   cy.visit(urls.url2);


   /* Wait till the DOM contents are loaded */
   /* in this case, it is only the canvas element */
   cy.document().should((doc) => {
     expect(doc.readyState).to.equal('complete');
   });


   /* Scroll till the end of page is reached */
   cy.scrollUntilBottom(urls.url2);
  
   /* Scroll into the view */
   /* Doc - https://docs.cypress.io/api/commands/scrollintoview#Use-linear-easing-animation-to-scroll */
   cy.document().then((doc) => {
     try
     {
       const element = doc.querySelector(cameraImage);
       expect(element, `Element with selector ${cameraImage} should exist`).to.exist;
    
       if (!element)
       {
         throw new Error(`Element not found: ${cameraImage}`);
       }
       else
       {
         /* Scroll into view */
         element.scrollIntoView({ behavior: 'smooth', block: 'center' });


         /* Highlight the element */
         /* Took some help from AI :), why not :D */
         element.style.border = "2px solid red";
         element.style.backgroundColor = "rgba(255, 0, 0, 0.2)";


         /* Assert if not visible */
         expect(element.offsetParent).to.not.be.null;


         cy.wait(4000);


         element.click();


         cy.wait(4000);


         /* Verify if the respective product page is open */
         cy.url().should('include', '59851-A');
       }     
     }
     catch (error)
     {
       cy.log('An error occurred:', error.message);
       console.error('Full error details:', error);
       throw error;
     }


     cy.log('Window ScrollIntoView Demo Complete')
 });
});