Timeouts | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Locators and Assertions
Instructor: Artem Bondar
Lesson Summary
This lesson focuses on timeouts in Playwright, explaining their types and configurations. Understanding timeouts is essential for creating stable and reliable tests. Types of Timeouts Global Timeout: The total time limit for all tests in a suite. If exceeded, all tests terminate. Test Timeout: The time limit for a single test execution, defaulting to 30 seconds . Action Timeout: The limit for executing action commands (e.g., click ), which cannot exceed the test timeout. Navigation Timeout: The time allowed for navigating to a page, also limited by the test timeout. Expect Timeout: The limit for locator assertions, defaulting to 5 seconds . Configuring Timeouts Timeouts can be configured at different levels: Globally in playwright.config.ts using timeout . Individually for tests using test.setTimeout() . For specific actions by providing a timeout in the command. Examples of Configuration timeout: 10000 // 10 seconds globalTimeout: 60000 // 60 seconds use: { actionTimeout: 5000, // 5 seconds navigationTimeout: 5000 // 5 seconds } Additionally, you can use test.slow to increase the timeout for flaky tests and modify timeouts for a test suite using a beforeEach hook. In summary, Playwright's timeout system includes a hierarchy of timeouts, with the ability to configure and override them at various levels to ensure effective test execution.
Video Transcript
In this lesson, we will talk about timeouts. PlayWrite has several types of timeouts, and those timeouts have dependencies on each other. Timeouts is directly related to how auto-weighting mechanisms work in the PlayWrite, so those two topics are connected. Understanding how the PlayWrite timeout works will help you to make your test more stable and more reliable at the execution. So you can configure timeouts at the framework level, at the project level, and on the test level. And in this lesson, I will show you how to make all those configurations. So let's get into it. So in the previous lesson, I showed you the automatic weighting feature of the PlayWrite, how it waits for the elements to be available, clickable, and so on, to interact with them. And in this lesson, we will talk about the timeout, which is how long PlayWrite will wait for the certain conditions. Timeouts in PlayWrite has a three-layer design and dependency. So the outer layer is a global timeout. Global timeout is the time limit of the whole test run. It means that if you have multiple tests, let's say 10 tests in your test suite, global timeout is the total duration of the time for the entire test run execution. If the global timeout, for example, is set for two minutes, and if your entire test suite runs longer than two minutes, then the test will be terminated based on the timeout. By default, global timeout is not configured, and if you want to configure it, you absolutely can do this. The next layer of the timeout is a test timeout, which is under a global timeout. Test timeout is the time limit for a single test execution. The default value for the timeout is 30 seconds or 30,000 milliseconds, and you can configure this value accordingly. And inside of the test timeout, there are nested three other timeouts, which are action timeout, navigation timeout, and expect timeout. Action timeout is the time limit for the action command to be executed. For example, if we take the click command, the click command will wait for element to be available, visible, clickable, and so on up to the time of the test timeout, because action timeout by default is not configured. If you will configure the action timeout, click, for example, will wait up to the configuration timeout of the action timeout. Action timeout cannot be longer than the test timeout, and test timeout cannot be longer than a global timeout. If you put, for example, action timeout of 40 seconds, but test timeout is configured as 30 seconds, the actual action timeout will be 30 seconds, because it will be limited by the layer of the test timeout. And by default, action timeout is also not configured. Navigation timeout is the same thing. Navigation timeout is how long playwright will navigate to the certain page and load this page. This timeout is also not configured by default and limited by the test timeout. And the third timeout is expect timeout. Expect timeout is the time limit for expect locator assertions. The default value is 5 seconds. And I remind you that only locator assertions has a timeout, because the generic assertion or general assertion, they don't have timeout and they don't wait for anything. So again, expect timeout cannot be configured longer than a test timeout, because the higher level timeout has higher priority. And let me show you those timeouts and configuration based on example. So we're going back to our application, to the previous auto-weighting.spec.ts, and let me create a new test just for the demonstration of the timeouts. So I will take the example from the previous lesson, just this locator, and click on our success button. This will be our demo. So await success button click. So according to default configuration, if we run this test, it should pass because the default test timeout is 30 seconds. And we know that click on this button takes 15 seconds for the button to show up. And let me run this test. So I open a test explorer and we'll run the test just in the headless mode because we don't need to open the browser. We know what's going on there. So I'm running the test and we can see that right now, click command is waiting for our success button to show up in order to click on it. And here we go. After the 15 seconds, the button showed up and we know the default test timeout is 30 seconds. So our test was executed within a timeout limit of the test. But if we configure the timeout below the 15 seconds, our test should fail. There are different ways how you can configure timeouts. One of the ways is using playwright.config.ts. So inside of the defined config, you can type a timeout and define the global settings for the timeout. So let's say we put 10 seconds, which is 10,000 milliseconds, and I'm running this test one more time. So click command is waiting. And it has failed with an error message. The target is closed because we reached the limit of the test timeout. And you can see that this has happened after 9.5 seconds. So this step probably took half a second and the rest is 9.5 seconds to execute a test. Also, you can configure other timeouts inside of the defined config. For example, to configure global timeout, you can type global timeout, colon, and configure global timeout. Let's say, for example, we put 60 seconds, which is one minute for the global timeout. And to configure other types of timeouts, such as action timeout and navigation timeout, we need to use this block in the config file, which is use. And we can type here action timeout. And let's put, for example, 5 seconds for the action timeout and navigation timeout, 5 seconds as well. So I'm going back to our test timeout and increase it to, let's say, 40 seconds. And right now, our execution will be limited by the action timeout, which is defined by 5 seconds. So if I run this test one more time, right now it will fail because we limited how long the action command will wait for the element to be available. So let me run this one more time. Test is running. We see that click is waiting for our command and it failed. And look, the error message right now, look, different timeout, 5 seconds exceeded. So locator click was not able to find the element because of the timeout of 5 seconds that we configured for this particular action command. You can always override the timeout for the action by providing the timeout inside of the command. And for example, we want to provide a timeout for this particular click of, let's say, 16 seconds. We know that this element should show up within 15 seconds. So timeout of 16 seconds will be enough. And this action timeout setting will override the action timeout that we configured in the Playwright config. So let me run this and right now this test should pass. Yeah, and you see, test passed successfully. 15.5 seconds took for the click to access this button. So what else can we do? So let's say I remove this action timeout from here. Our test timeout is 40 seconds. So if you want to override the test timeout for a particular test, you type test, set timeout, and provide the value. So let's say if we put a 10 seconds, we will fail this test. I will remove timeout from here. But even if I keep this timeout, it will not work because our test timeout is lower than a command timeout. And by the way, I can demonstrate you right now how it's going to fail. Our click is waiting. Yeah, and test failed. And test failed is because our test timeout is just 10 seconds, but button to show out is 15 seconds. So let me remove this from here. Also, let's say you know that you have a slow test that is flaky and you want to increase the timeout just for this particular test. And Playwright has a command test.slow. If you mark your test with this command, slow will increase the default timeout in three times to allow your test a little bit more time to continue the execution. For example, I change this timeout to just 10 seconds, but this test.slow multiply that 10 seconds by three. So it will be 30 seconds. So this test should pass. I'm running it one more time. Yeah, you see test pass successfully. It worked. And one more setting. So let's say you want to modify the test timeout for a particular test suite. You can do it using a before each hook. So inside of the before each hook, you need to provide the second argument, which is test info. And then you can type like test info dot set timeout. And then you can take the test info object, the existing default time value, and increase, let's say, this time value for two seconds. And this will modify the default timeout for plus two seconds, and it will be applied for every test in this particular test suite. This is another option how you can override the timeout values. And the very last thing for the expect timeout for locator assertions. If you want to override expect timeout for locator assertion, you can add it into the settings as well. So you can type expect and provide the object with the value of the timeout. Timeout, and let's say, instead of five seconds, we want to use, let's say, two seconds timeout for our locator assertion. And it will work like that. And in the previous lesson, I already showed you how you can override the particular expect timeout by just providing a timeout inside of the assertion. So that's it, guys. So let me quickly summarize what we did in this lesson. Playwright has global timeout, test timeout, and different action navigation timeouts. Action navigation and expect timeouts are within test timeout and test timeout within a global timeout. Only test timeout has a default configuration of 30 seconds, and expect timeout has default configuration of five seconds. The rest of the timeouts are not configured by default. You can configure timeouts globally for the framework in the configuration object of the playwright defining timeout. For the test, global timeout, expect timeout, navigation timeout, and action timeout. Also, you can override the settings defined in the config object by providing them directly inside of the test. You can set the settings for the particular test for the timeout or the particular action command that you want to override the waiting time. That's it, guys, and see you in the next lesson.