{"id":119,"date":"2024-01-05T10:27:13","date_gmt":"2024-01-05T09:27:13","guid":{"rendered":"https:\/\/sii.ua\/blog\/?p=119"},"modified":"2024-02-20T18:01:29","modified_gmt":"2024-02-20T17:01:29","slug":"automated-tests-cypress-waits-until-introduction-to-waits","status":"publish","type":"post","link":"https:\/\/sii.ua\/blog\/en\/automated-tests-cypress-waits-until-introduction-to-waits\/","title":{"rendered":"Automated tests: Cypress waits until\u2026 \u2013 introduction to waits"},"content":{"rendered":"\n

In the work of an automation tester, one of the key tasks is the correct handling of waits for the events, which allows us to perform assertions on an already prepared element. In testers jargon, we encounter the term “waits” from the wait() method, and this nomenclature is used in this article.<\/p>\n\n\n\n

In this post, I will elaborate on what waits are needed for in automated tests, present a comparison of waits available in Selenium and in Cypress, along with an example implementation in Cypress.<\/p>\n\n\n\n

Cypress significantly stand out from other available applications for automated testing due to one specific wait, which will also be described along with the cy.wait() and cy.intercept() methods.<\/p>\n\n\n\n

The last aspect raised in this article will be recursion, which can also be used in Cypress to wait for an item, as its own custom approach.             <\/p>\n\n\n\n

Wait in automated tests<\/strong><\/h2>\n\n\n\n

Wait is one of the basic and key parts of an automated test. It allows us to perform a delay in the test to, in order to load the web page, or any element on that page, correctly. This will make it possible to check, that the results in a positive or negative completion of the test.<\/p>\n\n\n\n

Wait\u2019s wrong implementation can result in an incorrect test result, e.g. by trying to interact with a page, which has not fully loaded. Another popular problem is lack of an item\u2019s display, because it was waiting, for example, for the server response. However, one of the biggest difficulties connected with the wait\u2019s wrong implementation is the unnecessary waiting, which increases our test duration.<\/p>\n\n\n\n

Wait in Selenium<\/strong><\/h2>\n\n\n\n

In one of the most popular tools for tests automation, that is Selenium, we encounter three types of waits, which I will describe below.<\/p>\n\n\n\n

Implicit wait<\/strong><\/h3>\n\n\n\n

It consists of an attempt to find an element in the DOM for a spcidied time if it is not immediately available. The default value of this wait is 0 and when we change this value, the implicit wait lasts until the end of the session.<\/p>\n\n\n\n

\"\"
Fig. 1 Selenium example \u2013 Implicit wait<\/figcaption><\/figure>\n\n\n\n

As presented in the code above, the implementation of this solution is very fast, but it has some limitations. This wait works only with the findElement() method<\/strong>, and that keeps us from waiting to load, for example, the text in the element.<\/p>\n\n\n\n

Explicit wait<\/strong><\/h3>\n\n\n\n

Thanks to it, we have a possibility to stop the test until our expected condition is met. Checking the condition is triggered with a certain frequency until the timeout expires. This means, that when the condition returns a false value, Selenium will wait and try again.<\/p>\n\n\n\n

\"\"
Fig. 2 Selenium example \u2013 Explicit wait<\/figcaption><\/figure>\n\n\n\n

In the code presented above, we wait until the title of our page gains the expected value. Keep in mind that the wait is now used only at the time of the trigger<\/strong>, and not as previously \u2013 globally. Here you will find a list of available expected explicit wait conditions for Selenium<\/a>.<\/p>\n\n\n\n

FluentWait<\/strong><\/h3>\n\n\n\n

We wait in an explicit manner<\/strong> for a certain situation for a given number of seconds \u2013 for example: the following code for 10 seconds will check if our website has the expected title with the frequency of one second.<\/p>\n\n\n\n

\"\"
Fig. 3 Selenium example \u2013 FluentWait<\/figcaption><\/figure>\n\n\n\n

Wait in Cypress<\/strong><\/h2>\n\n\n\n

Cypress, by default, uses dynamic wait for elements or actions available on the web page used in our automated test. We can distinguish the following ways to handle waits.<\/p>\n\n\n\n

Default timeouts<\/strong><\/h3>\n\n\n\n

In Cypress there are 6 default timeouts available. Thanks to the built-in re-try mechanism, they perform checks in a defined by us, or preset time, similarly to the explicit wait previously described:<\/p>\n\n\n\n