Cypress good practices with cy.wait

3
votes

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?

2
javascripttestingcypressbrowser-testing
Please show what exactly fails. Are there any Ajax calls involved in rendering the elements you want to check on? – viam0Zah
@viam0Zah exactly does not find this element after click. Just clicking doesn't work. It starts to work as before cy.wait (1000);. – Chrisss
I will add that the page render correctly, all menu elements are visible. – Chrisss
when you watch the test runner, can you see that Cypress is trying to get .menuElement but then it times out? – viam0Zah
Exactly: "AssertionError: Timed out retrying: Expected to find element..." – Chrisss

2 Answers

0
votes

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

0
votes

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