We are writing UI tests with cypress, which is usually quite simple to use. But again and again I stumble over a tedious waiting problem.
The scenario is pretty simple. The user clicks on the search button. Then he selects one of the elements with a certain text. Here's the code:
cy.get('#search-button').click();
cy.contains('Test item 1').click();
cy.get('#cheapest-offer-button').click();
The third click event fails, because already cy.contains('Test item 1')
doesn't wait for the page and the element to be rendered. From what I can see in the test steps, it simply clicks in the middle of the page, which does essentially nothing. So all subsequent steps fail of course.
However if I add a wait()
between the calls like this:
cy.get('#search-button').click();
cy.wait(2000);
cy.contains('Test item 1').click();
cy.get('#cheapest-offer-button').click();
The page is rendered correctly, Test item 1
appears, is clicked and all subsequent steps succeed.
According the best practices the wait()
call should not be necessary and therefore should be avoided. What am I doing wrong here?