Page loading takes long and how to deal the cypress test

user_4826215 0
Viewed 6282

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 common 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>

cypress javascript
2 Answers

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 command 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 command until above content appears.
  }
}

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

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();
    }
}
user_92003980
Related