Test Automation Stack

If you are working in react application, then in most of the cases the data in the UI is provided by Graphql.

There will be times where the first set of data is loaded in a page and the next set would be loaded only after scrolling down, in such cases getting the element would fail and we need to scroll and check until the page loads the expected data.

To solve this, we can use cypress-recurse plugin. Recurse function has three parts to it,

First part is the function/command to retry and return a value.

Second part is to check the true condition

Third part is where one can define number of tries etc..

Below is the code snippet where i have used the recurse function to scroll for a certain amount of time and recursion break if the expected condition is met within that time.

recurse(

// below line will be repeated

() => cy.scrollAndGetText("selector"),

// below line checks for condition to be true

(n) => n.includes("expected text"),

{

// no of tries untill above condtion becomes true — if not, error will be thrown

limit: this.numberOfPages + 1,

timeout: 90000,

log: true,

debugLog: true,

})

Custom command to scroll and Get text of the selector provided.

Cypress.Commands.add(“scrollAndGetText”, (selector: string) => {

cy.scrollTo(“bottom”, { duration: 3000 })

return cy.get(selector).invoke(“text”)

})