Optimizing Your Cypress Tests: Tips for Efficient Waiting and Assertion Handling
Published: 2023-03-21 12:23:05

Since I started writing automated tests I always looked for a best practices in terms of waiting. So lets start with basics, we all know there are **implicit** and **explicit** waits.

Lets start with **implicit wait**, for implicit wait in **Cypress** we have **cy.wait()** command in which we pass how much **miliseconds** we want to wait. **This is bad approach** and if you ask why? Here is the answer, for example if you want some element to appear and sometimes it appears in 2 seconds, sometimes in 3 seconds, sometimes in 5 seconds, you would need to put **cy.wait(5000)** in order to cover the latest time in which element can appear, but if element appears in 2 seconds, you will still wait 5 seconds no matter what happens. This is why this is a **bad approach**.

Instead we need to use **explicit waits**, in **Cypress** we have multiple options on how to use **explicit waits** I will count every wait that I use regularly in my tests!

First of all, the one that you will use the most is **.should()** command that waits for specific state for example this command in photo below will wait for element to be visible and then it will continue the test. Should command **will constantly retry** to see if element is visible **by default 4 seconds**, but we can change that in **defaultCommandTimeout**. **This is a good practice!**

![ShouldBeVisible](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/064oy60oyiitmdpsq5at.png)

There is another way to check is element **is visible**. I am using [**Cypress helper methods**](https://docs.cypress.io/api/cypress-api/dom) in this link there are all helper methods you can use! Particularly for this scenario I use Cypress.Dom.IsVisible as on photo below. **Keep in mind this does exactly the same like in previous image, just another way**. I added this just to let you know of **different helper methods!**


![Cypress.dom.IsVisible](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wflo6k09c5pbxs8jt8gu.png)



Keep in mind that .click() command in **Cypress** has built-in retry-ability to find and click on element, so if you have element that appears after few seconds, you don't need to use **.should()** assertion before actually clicking on element.


![Click retry](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h95psyctllbv3dkoqra0.png)


![Click finished](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ybd96f73fjobyj3ha1z.png)

Another type of **wait** that we can use in **Cypress** is to wait some **API request to finish** before proceeding with the test. We can do this by using **cy.intercept()** command as on photo below

![Intercept](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8foja4hrbrtsdlrzdu8u.png)

![Inside Cypress Runner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6unvlno49h1zfv9dbu5g.png)

**cy.wait() will resolve as soon as request is finished.**

At the end of this post I want to go back to **.should()** command, what I want to mention is that with this command you can **wait for almost anything**, e.g. if list is loading slowly and you want to wait till list has length of **5** you can do that as on photo below

![Should waiting for almost anything](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r2srszuym4408w7nuif0.png)

These are explicit waits that I constantly use in my tests, I hope you found this blog useful for your daily work! If you did, please leave a follow on [LinkedIn](https://www.linkedin.com/in/milan-nicic-a58217222/)

See you in next blog!
Cheers!