Detailed guide on configuring various types of timeouts in Playwright using typescript,

complete with descriptions, default values, and examples.

1. Test Timeout

Description: This is the maximum time allowed for a single test to run. It includes the
execution time of the test function, beforeEach, afterEach, beforeAll, and afterAll hooks, and
any fixtures used by the test.

Default: 30 seconds

Set Default in Configuration:

// playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({

timeout: 60000, // Set default test timeout to 60 seconds
});

Override in a Single Test:

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

test('very slow test', async ({ page }) => {

test.setTimeout(120000); // Override timeout for this specific test to 120
seconds
// Test code...
});

2. Expect Timeout

Description: This timeout applies to assertions made using Playwright's expect function. It
defines how long Playwright will wait for a condition to be met before throwing an error.

Default: 5 seconds

Set Default in Configuration:

// playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({

expect: {
timeout: 10000, // Set default expect timeout to 10 seconds
},
});

Override in a Single Assertion:

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

test('basic test', async ({ page }) => {

 await expect(page.getByRole('button')).toBeVisible({ timeout: 10000 }); //
Override timeout for this assertion to 10 seconds
});

3. Global Timeout

Description: This is the maximum time allowed for the entire test suite to run. It's useful for
preventing excessive resource usage when something goes wrong during the test run.

Default: No default value

Set in Configuration:

// playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({

globalTimeout: 60 * 60 * 1000, // Set global timeout to 1 hour
});

4. Action Timeout

Description: This timeout applies to individual actions such as clicks, type operations, and
other interactions with the page.

Default: No default value

Set Default in Configuration:

// playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({

use: {
actionTimeout: 10000, // Set default action timeout to 10 seconds
},
});

Override in a Single Action:

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

test('basic test', async ({ page }) => {

await page.getByText('Get Started').click({ timeout: 10000 }); // Override
timeout for this action to 10 seconds
});

5. Navigation Timeout

Description: This timeout applies to navigation actions such as page.goto, page.reload,

and page.waitForNavigation.

Default: No default value

Set Default in Configuration:

// playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({

use: {
navigationTimeout: 30000, // Set default navigation timeout to 30 seconds
},
});

Override in a Single Navigation Action:

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

test('basic test', async ({ page }) => {

await page.goto('https://playwright.dev', { timeout: 30000 }); // Override
timeout for this navigation to 30 seconds
});

6. Before/After Hooks Timeout

Description: This timeout applies to beforeAll, beforeEach, afterAll, and afterEach

hooks. These hooks can have their own timeout that is separate from the test timeout.

Default: Shares the test timeout by default

Override in Hooks:

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

test.beforeAll(async ({}, testInfo) => {

testInfo.setTimeout(60000); // Set timeout for this beforeAll hook to 60
seconds
});

test.beforeEach(async ({}, testInfo) => {

testInfo.setTimeout(testInfo.timeout + 30000); // Extend timeout for this
beforeEach hook by 30 seconds
});

7. Fixture Timeout

Description: Fixtures are pieces of setup code that can be shared across multiple tests. This
timeout applies to individual fixtures, which can have their own timeout that is separate from
the test timeout.

Default: Shares the test timeout by default

Set in Fixture:

import { test as base } from '@playwright/test';

const test = base.extend<{ slowFixture: string }>({

slowFixture: [async ({}, use) => {
 // Perform a slow operation
await use('hello');
}, { timeout: 60000 }], // Set timeout for this fixture to 60 seconds
});

test('example test', async ({ slowFixture }) => {

// Test code...
});

Comprehensive Configuration File

Here is an example configuration file that incorporates multiple timeout settings:

// playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({

timeout: 60000, // Default test timeout to 60 seconds
globalTimeout: 60 * 60 * 1000, // Global timeout to 1 hour
expect: {
timeout: 10000, // Default expect timeout to 10 seconds
},
use: {
actionTimeout: 10000, // Default action timeout to 10 seconds
navigationTimeout: 30000, // Default navigation timeout to 30 seconds
},
});

Examples in Tests

Example of Overriding Test Timeout

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

test('very slow test', async ({ page }) => {

test.setTimeout(120000); // Override timeout for this specific test to 120
seconds
// Test code...
});

Example of Overriding Expect Timeout

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

test('basic test', async ({ page }) => {

await expect(page.getByRole('button')).toBeVisible({ timeout: 10000 }); //
Override timeout for this assertion to 10 seconds
});

Example of Overriding Action Timeout

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

test('basic test', async ({ page }) => {

await page.getByText('Get Started').click({ timeout: 10000 }); // Override
timeout for this action to 10 seconds
});
Example of Overriding Navigation Timeout

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

test('basic test', async ({ page }) => {

await page.goto('https://playwright.dev', { timeout: 30000 }); // Override
timeout for this navigation to 30 seconds
});

Example of Setting Hook Timeout

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

test.beforeAll(async ({}, testInfo) => {

testInfo.setTimeout(60000); // Set timeout for this beforeAll hook to 60
seconds
});

test.beforeEach(async ({}, testInfo) => {

testInfo.setTimeout(testInfo.timeout + 30000); // Extend timeout for this
beforeEach hook by 30 seconds
});

Example of Setting Fixture Timeout

import { test as base } from '@playwright/test';

const test = base.extend<{ slowFixture: string }>({

slowFixture: [async ({}, use) => {
// Perform a slow operation
await use('hello');
}, { timeout: 60000 }], // Set timeout for this fixture to 60 seconds
});

test('example test', async ({ slowFixture }) => {

// Test code...
});

By understanding and utilizing these configurations, you can fine-tune the performance and
reliability of your Playwright tests, ensuring they run efficiently and effectively.