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?

Twelvemonth

Please show what exactly fails. Are there any Ajax calls involved in rendering the elements you want to check on? – Kolkhoz

@Kolkhoz exactly does not find this element after click. Just clicking doesn't work. It starts to work as before cy.wait (1000);. – Twelvemonth

I will add that the page render correctly, all menu elements are visible. – Twelvemonth

when you watch the test runner, can you see that Cypress is trying to get .menuElement but then it times out? – Kolkhoz

Exactly: "AssertionError: Timed out retrying: Expected to find element..." – Twelvemonth

Is it possible that the class 'menuElement' (element elector) is dynamically added to the element? Secondly did you also try: cy.wait(0);? – Heterozygote

Answer 1

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();

Neutral

Answer 2

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

Fact

Thanks for your comment. I understand the issues of timeouts and expectations for a given element, imo here the problem is more complex. Note that everything is rendered, but just clicking without cy.wait doesn't work and I can't understand it. Why does waiting before clicking cause the click to work? – Twelvemonth

If you are comfortable in sharing the code snippet, I can help you find out where is the problem and give a solution... Looking at the code that you mentioned above, is not giving any idea to find out the issue. – Fact