Playwright Timeouts

Timeouts are an integral part of any test automation framework. It is very important to let you tests know to fail after a certain time . In modern day web apps, which have mostly dynamic content, it is very essential to let you tests have that element of timeout – where either you fail an operation explicitly or the tool does it for you.

Timeouts are necessary in test automation to handle scenarios where an operation takes longer than expected or encounters unexpected delays. By setting appropriate timeouts, you can ensure that your test scripts don’t hang indefinitely and can proceed to the next steps or fail gracefully if necessary.

When to use Timeouts?

Now we have this beautiful functionality of timeouts. So when do we use it? What are some practical applications of the timeout in a test automation framework –

1. Unresponsive elements: If there are instances where an element is temporarily unresponsive or takes longer to load, then by setting a timeout, you can define how long to wait for an element to become available or responsive before considering it as a failure.
2. Network delays: Modern day web apps rely on some kind of network operations – may be an rest-api call. Network-related issues can cause delays in requests, responses, or page loading times. By setting timeouts for network operations, you can control how long to wait for a response before marking it as a failure.
3. Resource-intensive operations: When working with operations such as file uploads, large data processing, or complex computations, setting appropriate timeouts ensures that the test script doesn’t wait indefinitely for these operations and can proceed with the next steps if they exceed the defined time limit.
4. Test script stability: Without timeouts, a test script might hang indefinitely if an expected condition doesn’t occur or if there’s a system issue. By setting timeouts, you can enforce a maximum waiting period, allowing the test script to recover or fail gracefully if the condition isn’t met within the specified time.
5. Performance monitoring: Timeouts can also be used for performance monitoring and benchmarking. By measuring the time it takes for certain operations to complete, you can analyze and track the performance of your application over time.

Playwright Timeouts

In Playwright too, there are certain level of timeouts that have been provided in-built by the tool. It is a great feature and the best part is that most of them are configurable – means you can change the behaviour. This can be done either at a global level or a simple test step level.

On a broader level – these are the timeouts that can be defined in Playwright

• Test timeout
• Expect timeout
• Action timeout
• Navigation timeout
• Hooks timeout
• Global timeout
• Fixture timeout

In the below sections, we will see each one of them and we will try to see what the default value is -if any and how can we modify this in our code.

Test timeout

For each test there is a time period defined after which it will time out. In Playwright, for each test, the default value of timeout is 30000 milli seconds

This includes

• time spent in the test section.
• time spent in any included fixture.
• time spent in any hooks – let say beforeEach or afterEach hook.

If your test function promise doesn’t get resolved in the 30 milliseconds duration, then you will get a Timeout exceeded message.

How to configure:

Globally

You can set a global value of timeout, which will apply to all tests in your framework in the playwright.config.ts file

Per Test

You can also define a timeout for a specific test – apart from being in the global scope.

First way to increase the timeout for a test by marking it as slow test using test.slow().

If you mark the test as slow then the timeout for that test will be tripled to that of the default value set in playwright.config.ts file

Second way is to use the setTimeout() method to explicitly mention the timeout for a test.

Expect timeout

In most cases your tests would contain some type of assertions – using the expect provided in Playwright. Playwright also has a default timeout after which the assertion would automatically be timed-out and marked as failure.

By default, in Playwright an expect will be timed out after 5 seconds.

It is important to know that this is completely different from the test timeout mentioned in the above section.

How to configure:

Globally:

You can set the value in playwright.config.ts to have a global timeout for expect – which will be valid for all tests.

Per Test

For a single expect in a test, you can configure the timeout using the timeout value

Action timeout

This refers to timeout that you can set for any action performed in the test – one very good example is the click() method. You can define the time in which , if the event is not completed then the test will throw a timeout error.

By default, the action timeout is set to 0 in the playwright.config.ts file, which means no timeout at all – but this can be changed

How to configure:

Globally:

You can set the action timeout in the use section in the playwright.config.ts file

Per Action:

You can define the per action timeout in the action itself.

Navigation timeout

The navigation timeout is implied and comes into picture during the navigation from one page to another in a playwright test. This defaults to 0 milliseconds which means no timeout. However this can be configured either globally or locally in a test.

How to configure

Globally:

Almost similar to the action timeout,this can be defined globally for all tests in the use section in playwright.config.ts file.

Per Test

Hooks Timeout

Playwright test runner provides us hooks which we can use in our tests. The hooks given by Playwright are –

• beforeAll
• beforeEach
• afterAll
• afterEach

For beforeEach() and afterEach() the timeout period is included in the test timeout – as mentioned above in the test timeout section.

Although you can configure to change that per test

import { test, expect } from '@playwright/test';

test.beforeEach(async ({ page }, testInfo) => {
  // Extend timeout for all tests running this hook by 30 seconds.
  testInfo.setTimeout(testInfo.timeout + 30000);
});

In this case, all the tests that are using this hook will have the extra 30000ms added to the test timeout.

However for beforeAll() and afterAll() methods, the timeout is separate – they have a timeout that is equal to the test timeout. So if you define the test timeout to be 45000 ms in the playwright.config.ts file, this will be implied to the afterAll and beforeAll hooks too.

Additionally you can configure this per hook too –

Global timeout

Global timeout sets the total duration for your tests to run. It means that if playwright test execution exceeded the set timeout for global timeout, then the tests will be marked failed there after.

This has been done so that the excess resource usage when everything went wrong doesn’t happen.

There is no default value set for global timeout. However, you can configure this in your playwright.config.ts file.

This can be set only globally and not locally. If the tests exceed this timeout, then the error comes like this – I’ve taken a very small timeout value of 100s to show how this looks like.

Fixture timeout

Fixtures are a very powerful concept in Playwright, albeit little bit tough to understand. As mentioned in the test timeout section, by default, the fixture timeout is included in the test timeout period only.

However, you can customize this value , especially worker-scoped ones, it is convenient to have a separate timeout.

You can read more about fixtures on the Playwright documentation page here.

So in this blog, we have seen the different types of timeouts that we can use in Playwright tests. When I was going through the timeouts, I was stunned to see the level of granularity and the amount of flexibility, the Playwright team has provided w.r.t timeouts in the test. Another feature to love Playwright.