Timeouts | Bondar Academy
Course: Cypress UI Testing with JavaScript
Module: Interaction with Web Elements
Instructor: Artem Bondar
Lesson Summary
In this lesson, we explored Cypress timeouts and how they manage waiting for web elements during testing. Here are the key points discussed: Understanding Cypress Timeouts Cypress has a default timeout of 4,000 milliseconds (4 seconds) for waiting for web elements. Timeouts can be configured globally or on a per-command basis. Demo Overview Using the Playground app, we demonstrated a test that interacts with a dialog box that opens with a delay. The steps included: Navigating to the Models and Overlays section. Clicking the Open with Delay 3 seconds button. Validating that the dialog box displays the text Friendly Reminder . Actionability Checks Cypress performs actionability checks to ensure elements are: Visible Not hidden or disabled In the DOM Configuring Timeouts Timeouts can be adjusted in two ways: Globally: Modify the configuration file to set a new default timeout. Individually: Use a second argument in commands to specify a timeout, e.g., cy.get('selector', { timeout: 11000 }) . Important Notes When using assertions, do not add timeouts directly to them; instead, apply them to action commands. This ensures proper functionality. In summary, Cypress timeouts are crucial for managing delays in web applications, and understanding how to configure them can enhance testing efficiency.
Video Transcript
Hey guys, in this lesson, we will talk about Cypress timeouts. So how Cypress waits for web elements and how to configure it. So let's get into it. For this demo, I will use a different page on our Playground app under Model and Overlays dialog, and we have this Open with Delay section. So when I click on Open with Delay 3 seconds, it opens the dialog box for me with a delay 3 seconds. It's actually doing what it says. And using this artificial delay, like in real applications, we experience delay time to time during the testing. So this is the simulation of that. And for that, I have set up a new test real quick. So it navigates to Models and Overlays, click on Dialog, so open this page. Then we click on this Open with Delay 3 seconds button. And then we should validate that NBDialogContainer, NBCardHeader should have text Friendly Reminder. So let's run this test and let's see what's gonna happen. So I'm running the test. Application visiting, navigating to this page, and look, Cypress is waiting, waiting, here we go. And once the Friendly Reminder dialog box showed up, assertion passed successfully. So let me run it just one more time, you will see this in action. So I'm running the test, Cypress waiting for this dialog box, waiting, waiting, waiting, boom, and once the dialog box is available, assertion passed. But if I will try to call the second dialog box, which takes a little bit longer to open, and I will run this test one more time, and look, assertion failed. Dialog box is not available yet, and we're waiting a little bit more, and only now it is available. So why did it happen? Because Cypress has a timeout of 4,000 milliseconds or four seconds to wait for the web element. And if web element is not found, I'm sorry, you will have this assertion error in this particular example. So first of all, how does it work and what Cypress is waiting for? So Cypress has actionability checks, so when it's especially related to the click and action commands, so right here. So Cypress has actionability checks that the element should be scroll into view, not hidden, not disabled, not detached, read only, and so on. And until the element that we are looking for qualify all of those qualities, then Cypress will retry to query that element. And this is related to active commands like click, type, clear, check, and so on. And if we talk about the assertions like over here, so should assertion is the same thing. Should assertion is expecting that we should have this element that should have text-friendly reminder. And until this element is not possible to get, Cypress is trying, trying, trying to get this element until the timeout. This timeout, though, is configurable, where two options. You can configure it on the framework level or on the command level. Let's talk about the list of available timeouts, first of all. So here in the documentation in configuration page, this is the list of the timeout. By the way, Cypress does not have many timeouts. The default command timeout is four seconds. Exact timeout is only for the CyExec function, is one minute. Task timeout only for CyTask, one minute as well. Page load related only to CyVisit, CyGo, CyReload is that initial page load. So Cypress wait up to 60 seconds. And if application was not loaded within this timeout, then the page load timeout will be triggered. And request timeout and response timeout related to API testing. And we're gonna talk about it in the API testing section. So pretty much the whole thing is controlled by this default timeout. How long Cypress wait for each command to be successfully executed. And you can configure this timeout globally in the framework. So you go to the Cypress configuration and just add it over here. And remember our button, it took like ten seconds to show up. So if we modify it to 11,000 milliseconds or 11 seconds. So this is the limit of how long Cypress will wait for the command to be executed. So we will wait up to 11 seconds. And if we go back to the test, we need to try, because we've changed the configuration, we need to reload the framework. Try again, and framework is reloaded. And now it's running the test. So now it's clicked already on this button, open with delay ten seconds. And it is waiting, waiting, waiting for our dialog box, and here we go. Dialog box showed up and assertion pass successfully, because we updated timeout to 11 seconds. And now for every command in our framework that we will call and chain and action command and assertion, Cypress will wait up to 11 seconds as a maximum delay. If anything than 11 seconds gonna be slower in our application, that moment error happen and the test execution stop at that moment. So let me delete this. And the second option, if you don't want to update the settings globally, you can do it by their commands. So every command, let me stop the test over here. Yeah, let me stop it. So every command can have a second argument, second option, which is a timeout. So I put the comma, put the timeout like this. And then for this particular get command, we know that this command is slow. I don't need to slow down this one because it works quickly, only this one. And I add this delay right here. So make it two lines. And I made in delay only right here and it's gonna work the same way. So going back to the test, running it again. And our timeout is working successfully. Waiting, waiting, waiting. Yep, here we go. It worked successfully. One important point here. So when you work with the assertions, make sure that you accidentally do not add timeout into the assertion like this. Because if you try to add timeout into the assertion instead of actual query method, it will not work. You need to add it into the action method. And in this case, it will work as expected. So that's pretty much it. And let's summarize what we did in this lesson. So Cypher has a default timeout that defines how long Cypher's commands waits for the execution. You can override this default timeout, which is four seconds, in the configuration file setting up this timeout for the entire framework. If you need to override this default timeout command by command, you can use this individually as a second argument, provided a timeout inside of the action command. All right, that's it, guys, and see you in the next lesson.