Cypress good practices with cy.wait

Question

I have the following test, written in Cypress. I use VueJS with SSR support for my frontend. My app it’s an SPA and I am testing the user click on a menu.

before(() => {
   // mock data etc.
});

it('should check if component render properly without ssr', () => {
    cy.visit('url');
    cy.wait(1000);
    cy.get('.menuElement').click();
    cy.get('.something').should($something => {
        expect($something).to.have.length(10);
    });
});

According to Cypress’ best practices, I shouldn't use cy.wait in this form. But the problem is; without the wait, the test will fail. I tried using:

• { timeout: 10000 } as param in cy.get and cy.visit
• aded something like .should('be.visible'); (for waiting when will be visible)
• added route with cy.wait("@abc")

But none of the above works for me.

Please suggest a solution. What should I do that everything works correctly in my case?

Answer 1

Apart from showing the code with cy.wait(), you didn't show the code that is not working. What is the defaultTimeout you have configured in cypress.json file. And how long is your page taking to load...

Cypress by default takes 4 secs for any cypress command and it gets timeout if element doesn't exist on DOM or page is not loaded. So you can increase pageLoadTimeout so that cypress will wait for page to fully load till 10 secs, if page is loaded within 2 secs, then immediately it will execute cy.get() command

{
  "defalutTimeout": 5000,
  "pageLoadTimeout": 10000
}

Note: I used to use lot of cy.wait() and after I started using the timeouts effectively, there was no issue for me. Please read cypress configuration documentation

Answer 2

A year later, but maybe this will be useful for somebody with a similar issue.

According to this very helpful article - https://www.cypress.io/blog/2020/07/22/do-not-get-too-detached, to implement the desired wait, you should allow application to finish action that came first, before proceeding.

My guess is that in your case, .menuElement is still not mounted in the DOM. And instead of using wait(), you could do something like this:

cy.get('.menuElement').should('not.exist');
cy.get('.menuElement').click();