How to scroll the table in a page and catch all the elements using each in cypress?

Question

I have 30 rows in a table and I need to perform scroll twice or it may be thrice if rows increases in future. I am using each and store first 20 element with 1 scroll but the element I need will need one more scroll.

cy.get("row locator").each(($ele, index) => {
  if (index > 9){
    cy.get("scroll bar locator").scrollTo(1000, 1000).wait(0);
    cy.get("row locator").contains(text).parent().parent()
    .sibling().eq(1).click();
   }
  else{
    cy.get("row locator").contains(text).parent().parent()
     .sibling().eq(1).click();
     }
   });
    

Answer 1

If you want to repeat an action (like scrolling a table) until a condition is met, the cypress-recurse plugin is useful.

For example

import { recurse } from 'cypress-recurse'

recurse(
  () => cy.get('table tbody tr'),
  (rows) => expect(rows.length).to.be.gte(30),  // this is the condition you want met
  {
    // this is the action to take if condition isn't met
    post: () => cy.get('table tbody').scrollTo('bottom')
  }
)