I have many pages in my web app where its taking time to load the pages. In the below example, I would like to avoid or reduce the using of cy.wait() as it is not ideal. How can we apply cy.route() in this example, can we create a mon function and use that we ever possible ? note: Dev team are converting some old pages to React and dealing loading issues.

//test.spec.js

 cy.wait(5000);
 cy.bookspanel.getBookNavigationTab();

//bookhelpfunctions.js

cy.bookspanel = {
    getBookNavigationTab: function () {
        return cy.get('a > span').contains("Books").click();
    }
}

//index.js

import './bookhelpfunctions'

<a class="sc-iybRtq eCauUN" href="/spa/books?candidateStatusId=44501c83-5652-4462-9512-2e482514e28f"><span class="sc-iQtOjA hRzpyH"></span><span class="sc-cEvuZC gFbQRN">Books</span></a> 

I have many pages in my web app where its taking time to load the pages. In the below example, I would like to avoid or reduce the using of cy.wait() as it is not ideal. How can we apply cy.route() in this example, can we create a mon function and use that we ever possible ? note: Dev team are converting some old pages to React and dealing loading issues.

//test.spec.js

 cy.wait(5000);
 cy.bookspanel.getBookNavigationTab();

//bookhelpfunctions.js

cy.bookspanel = {
    getBookNavigationTab: function () {
        return cy.get('a > span').contains("Books").click();
    }
}

//index.js

import './bookhelpfunctions'

<a class="sc-iybRtq eCauUN" href="/spa/books?candidateStatusId=44501c83-5652-4462-9512-2e482514e28f"><span class="sc-iQtOjA hRzpyH"></span><span class="sc-cEvuZC gFbQRN">Books</span></a> 

• javascript
• cypress

Share Improve this question Follow asked May 19, 2020 at 23:16 soccerwaysoccerway 12k2323 gold badges8181 silver badges161161 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

You should add a cy.get() for something that only appears after the page load is finished,

cy.bookspanel = {
  getBookNavigationTab: function () {
    cy.get('a > span').contains("Books").click();
    cy.contains('h2', 'Heading that displays after page is loaded');  
    // Will not run next mand until above heading appears.
  }
}

or pass to the function as a parameter if it changes on each page

cy.bookspanel = {
  getBookNavigationTab: function (myContent) {
    cy.get('a > span').contains("Books").click();
    cy.contains(myContent);  
    // Will not run next mand until above content appears.
  }
}

cy.bookspanel.getBookNavigationTab('Heading that displays after page is loaded');

Not sure if I understand your problem fully, but if you have some kind of loader (some animation for loading) on your site while the page is loading, you could do such trick:

cy.get('.loaderClassName'), { timeout: 3000 }).should("not.exist")

or, even better, with data-cy (then you could even choose loaders for particular sections/elements:

cy.get('[data-cy=loader]'), { timeout: 3000 }).should("not.exist")

This way, you are not hardcoding any values in cy.wait (you are right, you shouldn't do this). In the above solution, the moment the loader disappears (so from the user's point of view, the page is visible and ready), you may start testing.

Additionally, you may set whatever the timeout you want (in milliseconds), to suit it to your requirements (to make sure the loading doesn't exceed a given amount of time).

Then, you may use this line in the beginning of the function to make sure everything is loaded in specific time, so in your example:

cy.bookspanel = {
    getBookNavigationTab: function () {
        cy.get('[data-cy=loader]'), { timeout: 3000 }).should("not.exist")
        return cy.get('a > span').contains("Books").click();
    }
}