Playwright Test
Playwright Test provides a test
function to declare tests and expect
function to write assertions.
import { test, expect } from '@playwright/test';
test('basic test', async ({ page }) => {
await page.goto('https://playwright.dev/');
const name = await page.innerText('.navbar__title');
expect(name).toBe('Playwright');
});
Methods
test
Added in: v1.10Declares a test.
Usage
import { test, expect } from '@playwright/test';
test('basic test', async ({ page }) => {
await page.goto('https://playwright.dev/');
// ...
});
Arguments
Test title.
testFunction
function(Fixtures, TestInfo)#Test function that takes one or two arguments: an object with fixtures and optional TestInfo.
test.afterAll
Added in: v1.10Declares an afterAll
hook that is executed once per worker after all tests.
Usage
test.afterAll(async () => {
console.log('Done with tests');
// ...
});
Arguments
hookFunction
function(Fixtures, TestInfo)#Hook function that takes one or two arguments: an object with worker fixtures and optional TestInfo.
Details
When called in the scope of a test file, runs after all tests in the file. When called inside a test.describe() group, runs after all tests in the group. If multiple afterAll
hooks are added, they will run in the order of their registration.
Note that worker process is restarted on test failures, and afterAll
hook runs again in the new worker. Learn more about workers and failures.
test.afterEach
Added in: v1.10Declares an afterEach
hook that is executed after each test.
Usage
import { test, expect } from '@playwright/test';
test.afterEach(async ({ page }, testInfo) => {
console.log(`Finished ${testInfo.title} with status ${testInfo.status}`);
if (testInfo.status !== testInfo.expectedStatus)
console.log(`Did not run as expected, ended up at ${page.url()}`);
});
test('my test', async ({ page }) => {
// ...
});
Arguments
hookFunction
function(Fixtures, TestInfo)#Hook function that takes one or two arguments: an object with fixtures and optional TestInfo.
Details
When called in the scope of a test file, runs after each test in the file. When called inside a test.describe() group, runs after each test in the group. If multiple afterEach
hooks are added, they will run in the order of their registration.
You can access all the same Fixtures as the test function itself, and also the TestInfo object that gives a lot of useful information. For example, you can check whether the test succeeded or failed.
test.beforeAll
Added in: v1.10Declares a beforeAll
hook that is executed once per worker process before all tests.
Usage
import { test, expect } from '@playwright/test';
test.beforeAll(async () => {
console.log('Before tests');
});
test.afterAll(async () => {
console.log('After tests');
});
test('my test', async ({ page }) => {
// ...
});
Arguments
hookFunction
function(Fixtures, TestInfo)#Hook function that takes one or two arguments: an object with worker fixtures and optional TestInfo.
Details
When called in the scope of a test file, runs before all tests in the file. When called inside a test.describe() group, runs before all tests in the group. If multiple beforeAll
hooks are added, they will run in the order of their registration.
Note that worker process is restarted on test failures, and beforeAll
hook runs again in the new worker. Learn more about workers and failures.
You can use test.afterAll() to teardown any resources set up in beforeAll
.
test.beforeEach
Added in: v1.10Declares a beforeEach
hook that is executed before each test.
Usage
import { test, expect } from '@playwright/test';
test.beforeEach(async ({ page }, testInfo) => {
console.log(`Running ${testInfo.title}`);
await page.goto('https://my.start.url/');
});
test('my test', async ({ page }) => {
expect(page.url()).toBe('https://my.start.url/');
});
Arguments
hookFunction
function(Fixtures, TestInfo)#Hook function that takes one or two arguments: an object with fixtures and optional TestInfo.
Details
When called in the scope of a test file, runs before each test in the file. When called inside a test.describe() group, runs before each test in the group. If multiple beforeEach
hooks are added, they will run in the order of their registration.
You can access all the same Fixtures as the test function itself, and also the TestInfo object that gives a lot of useful information. For example, you can navigate the page before starting the test.
You can use test.afterEach() to teardown any resources set up in beforeEach
.
test.describe(title, callback)
Added in: v1.10Declares a group of tests.
Usage
test.describe('two tests', () => {
test('one', async ({ page }) => {
// ...
});
test('two', async ({ page }) => {
// ...
});
});
Arguments
Group title.
A callback that is run immediately when calling test.describe(). Any tests added in this callback will belong to the group.
test.describe(callback)
Added in: v1.24Declares an anonymous group of tests. This is convenient to give a group of tests a common option with test.use().
Usage
test.describe(() => {
test.use({ colorScheme: 'dark' });
test('one', async ({ page }) => {
// ...
});
test('two', async ({ page }) => {
// ...
});
});
Arguments
A callback that is run immediately when calling test.describe(). Any tests added in this callback will belong to the group.
test.describe.configure
Added in: v1.10Configures the enclosing scope. Can be executed either on the top level or inside a describe. Configuration applies to the entire scope, regardless of whether it run before or after the test declaration.
Learn more about the execution modes here.
Usage
Running tests in parallel.
// Run all the tests in the file concurrently using parallel workers.
test.describe.configure({ mode: 'parallel' });
test('runs in parallel 1', async ({ page }) => {});
test('runs in parallel 2', async ({ page }) => {});Running tests serially, retrying from the start.
noteRunning serially is not recommended. It is usually better to make your tests isolated, so they can be run independently.
// Annotate tests as inter-dependent.
test.describe.configure({ mode: 'serial' });
test('runs first', async ({ page }) => {});
test('runs second', async ({ page }) => {});Configuring retries and timeout for each test.
// Each test in the file will be retried twice and have a timeout of 20 seconds.
test.describe.configure({ retries: 2, timeout: 20_000 });
test('runs first', async ({ page }) => {});
test('runs second', async ({ page }) => {});
Arguments
options
Object (optional)mode
"parallel"|"serial" (optional)#Execution mode. Learn more about the execution modes here.
retries
number (optional) Added in: v1.28#The number of retries for each test.
timeout
number (optional) Added in: v1.28#Timeout for each test in milliseconds. Overrides testProject.timeout and testConfig.timeout.
test.describe.fixme
Added in: v1.25Declares a test group similarly to test.describe(). Tests in this group are marked as "fixme" and will not be executed.
Usage
test.describe.fixme('broken tests', () => {
test('example', async ({ page }) => {
// This test will not run
});
});
Arguments
Group title.
A callback that is run immediately when calling test.describe.fixme(). Any tests added in this callback will belong to the group, and will not be run.
test.describe.only
Added in: v1.10Declares a focused group of tests. If there are some focused tests or suites, all of them will be run but nothing else.
Usage
test.describe.only('focused group', () => {
test('in the focused group', async ({ page }) => {
// This test will run
});
});
test('not in the focused group', async ({ page }) => {
// This test will not run
});
Arguments
Group title.
A callback that is run immediately when calling test.describe.only(). Any tests added in this callback will belong to the group.
test.describe.skip
Added in: v1.10Declares a skipped test group, similarly to test.describe(). Tests in the skipped group are never run.
Usage
test.describe.skip('skipped group', () => {
test('example', async ({ page }) => {
// This test will not run
});
});
Arguments
Group title.
A callback that is run immediately when calling test.describe.skip(). Any tests added in this callback will belong to the group, and will not be run.
test.extend
Added in: v1.10Extends the test
object by defining fixtures and/or options that can be used in the tests.
Usage
First define a fixture and/or an option.
- TypeScript
- JavaScript
import { test as base } from '@playwright/test';
import { TodoPage } from './todo-page';
export type Options = { defaultItem: string };
// Extend basic test by providing a "defaultItem" option and a "todoPage" fixture.
export const test = base.extend<Options & { todoPage: TodoPage }>({
// Define an option and provide a default value.
// We can later override it in the config.
defaultItem: ['Do stuff', { option: true }],
// Define a fixture. Note that it can use built-in fixture "page"
// and a new option "defaultItem".
todoPage: async ({ page, defaultItem }, use) => {
const todoPage = new TodoPage(page);
await todoPage.goto();
await todoPage.addToDo(defaultItem);
await use(todoPage);
await todoPage.removeAll();
},
});
const base = require('@playwright/test');
const { TodoPage } = require('./todo-page');
// Extend basic test by providing a "defaultItem" option and a "todoPage" fixture.
exports.test = base.test.extend({
// Define an option and provide a default value.
// We can later override it in the config.
defaultItem: ['Do stuff', { option: true }],
// Define a fixture. Note that it can use built-in fixture "page"
// and a new option "defaultItem".
todoPage: async ({ page, defaultItem }, use) => {
const todoPage = new TodoPage(page);
await todoPage.goto();
await todoPage.addToDo(defaultItem);
await use(todoPage);
await todoPage.removeAll();
},
});
Then use the fixture in the test.
import { test } from './my-test';
test('test 1', async ({ todoPage }) => {
await todoPage.addToDo('my todo');
// ...
});
Configure the option in config file.
- TypeScript
- JavaScript
import { defineConfig } from '@playwright/test';
import { Options } from './my-test';
export default defineConfig<Options>({
projects: [
{
name: 'shopping',
use: { defaultItem: 'Buy milk' },
},
{
name: 'wellbeing',
use: { defaultItem: 'Exercise!' },
},
]
});
// @ts-check
module.exports = defineConfig({
projects: [
{
name: 'shopping',
use: { defaultItem: 'Buy milk' },
},
{
name: 'wellbeing',
use: { defaultItem: 'Exercise!' },
},
]
});
Learn more about fixtures and parametrizing tests.
Arguments
An object containing fixtures and/or options. Learn more about fixtures format.
Returns
test.fail()
Added in: v1.10Unconditionally marks a test as "should fail". Playwright Test runs this test and ensures that it is actually failing. This is useful for documentation purposes to acknowledge that some functionality is broken until it is fixed.
Usage
import { test, expect } from '@playwright/test';
test('not yet ready', async ({ page }) => {
test.fail();
// ...
});
test.fail(condition)
Added in: v1.10Conditionally mark a test as "should fail" with an optional description.
Usage
import { test, expect } from '@playwright/test';
test('fail in WebKit', async ({ page, browserName }) => {
test.fail(browserName === 'webkit', 'This feature is not implemented for Mac yet');
// ...
});
Arguments
Test is marked as "should fail" when the condition is
true
.description
string (optional)#Optional description that will be reflected in a test report.
test.fail(callback)
Added in: v1.10Conditionally mark all tests in a file or test.describe() group as "should fail".
Usage
import { test, expect } from '@playwright/test';
test.fail(({ browserName }) => browserName === 'webkit');
test('fail in WebKit 1', async ({ page }) => {
// ...
});
test('fail in WebKit 2', async ({ page }) => {
// ...
});
Arguments
callback
function(Fixtures):boolean#A function that returns whether to mark as "should fail", based on test fixtures. Test or tests are marked as "should fail" when the return value is
true
.description
string (optional)#Optional description that will be reflected in a test report.
test.fixme(title, testFunction)
Added in: v1.10Declares a test to be fixed, similarly to test(). This test will not be run.
Usage
import { test, expect } from '@playwright/test';
test.fixme('test to be fixed', async ({ page }) => {
// ...
});
Arguments
Test title.
testFunction
function(Fixtures, TestInfo)#Test function that takes one or two arguments: an object with fixtures and optional TestInfo.
test.fixme()
Added in: v1.10Mark a test as "fixme", with the intention to fix it. Test is immediately aborted when you call test.fixme().
Usage
import { test, expect } from '@playwright/test';
test('test to be fixed', async ({ page }) => {
test.fixme();
// ...
});
Mark all tests in a file or test.describe() group as "fixme".
import { test, expect } from '@playwright/test';
test.fixme();
test('test to be fixed 1', async ({ page }) => {
// ...
});
test('test to be fixed 2', async ({ page }) => {
// ...
});
test.fixme(condition)
Added in: v1.10Conditionally mark a test as "fixme" with an optional description.
Usage
import { test, expect } from '@playwright/test';
test('broken in WebKit', async ({ page, browserName }) => {
test.fixme(browserName === 'webkit', 'This feature is not implemented on Mac yet');
// ...
});
Arguments
Test is marked as "fixme" when the condition is
true
.description
string (optional)#Optional description that will be reflected in a test report.
test.fixme(callback)
Added in: v1.10Conditionally mark all tests in a file or test.describe() group as "fixme".
Usage
import { test, expect } from '@playwright/test';
test.fixme(({ browserName }) => browserName === 'webkit');
test('broken in WebKit 1', async ({ page }) => {
// ...
});
test('broken in WebKit 2', async ({ page }) => {
// ...
});
Arguments
callback
function(Fixtures):boolean#A function that returns whether to mark as "fixme", based on test fixtures. Test or tests are marked as "fixme" when the return value is
true
.description
string (optional)#Optional description that will be reflected in a test report.
test.info
Added in: v1.10Returns information about the currently running test. This method can only be called during the test execution, otherwise it throws.
Usage
test('example test', async ({ page }) => {
// ...
await test.info().attach('screenshot', { body: await page.screenshot(), contentType: 'image/png' });
});
Returns
test.only
Added in: v1.10Declares a focused test. If there are some focused tests or suites, all of them will be run but nothing else.
Usage
test.only('focus this test', async ({ page }) => {
// Run only focused tests in the entire project.
});
Arguments
Test title.
testFunction
function(Fixtures, TestInfo)#Test function that takes one or two arguments: an object with fixtures and optional TestInfo.
test.setTimeout
Added in: v1.10Changes the timeout for the test. Zero means no timeout. Learn more about various timeouts.
Timeout for the currently running test is available through testInfo.timeout.
Usage
Changing test timeout.
test('very slow test', async ({ page }) => {
test.setTimeout(120000);
// ...
});Changing timeout from a slow
beforeEach
orafterEach
hook. Note that this affects the test timeout that is shared withbeforeEach
/afterEach
hooks.test.beforeEach(async ({ page }, testInfo) => {
// Extend timeout for all tests running this hook by 30 seconds.
test.setTimeout(testInfo.timeout + 30000);
});Changing timeout for a
beforeAll
orafterAll
hook. Note this affects the hook's timeout, not the test timeout.test.beforeAll(async () => {
// Set timeout for this hook.
test.setTimeout(60000);
});Changing timeout for all tests in a test.describe() group.
test.describe('group', () => {
// Applies to all tests in this group.
test.describe.configure({ timeout: 60000 });
test('test one', async () => { /* ... */ });
test('test two', async () => { /* ... */ });
test('test three', async () => { /* ... */ });
});
Arguments
test.skip(title, testFunction)
Added in: v1.10Declares a skipped test, similarly to test(). Skipped test is never run.
Usage
import { test, expect } from '@playwright/test';
test.skip('broken test', async ({ page }) => {
// ...
});
Arguments
Test title.
testFunction
function(Fixtures, TestInfo)#Test function that takes one or two arguments: an object with fixtures and optional TestInfo.
test.skip()
Added in: v1.10Unconditionally skip a test. Test is immediately aborted when you call test.skip().
Usage
import { test, expect } from '@playwright/test';
test('skipped test', async ({ page }) => {
test.skip();
// ...
});
Unconditionally skip all tests in a file or test.describe() group:
import { test, expect } from '@playwright/test';
test.skip();
test('skipped test 1', async ({ page }) => {
// ...
});
test('skipped test 2', async ({ page }) => {
// ...
});
test.skip(condition)
Added in: v1.10Conditionally skip a test with an optional description.
Usage
import { test, expect } from '@playwright/test';
test('skip in WebKit', async ({ page, browserName }) => {
test.skip(browserName === 'webkit', 'This feature is not implemented for Mac');
// ...
});
Skip from test.beforeEach() hook:
import { test, expect } from '@playwright/test';
test.beforeEach(async ({ page }) => {
test.skip(process.env.APP_VERSION === 'v1', 'There are no settings in v1');
await page.goto('/settings');
});
Arguments
A skip condition. Test is skipped when the condition is
true
.description
void|string (optional)#Optional description that will be reflected in a test report.
test.skip(callback)
Added in: v1.10Conditionally skips all tests in a file or test.describe() group.
Usage
import { test, expect } from '@playwright/test';
test.skip(({ browserName }) => browserName === 'webkit');
test('skip in WebKit 1', async ({ page }) => {
// ...
});
test('skip in WebKit 2', async ({ page }) => {
// ...
});
Arguments
callback
function(Fixtures):boolean#A function that returns whether to skip, based on test fixtures. Test or tests are skipped when the return value is
true
.description
string (optional)#Optional description that will be reflected in a test report.
test.slow()
Added in: v1.10Unconditionally marks a test as "slow". Slow test will be given triple the default timeout.
Usage
import { test, expect } from '@playwright/test';
test('slow test', async ({ page }) => {
test.slow();
// ...
});
Details
test.slow() cannot be used in a beforeAll
or afterAll
hook. Use test.setTimeout() instead.
test.slow(condition)
Added in: v1.10Conditionally mark a test as "slow" with an optional description. Slow test will be given triple the default timeout.
Usage
import { test, expect } from '@playwright/test';
test('slow in WebKit', async ({ page, browserName }) => {
test.slow(browserName === 'webkit', 'This feature is slow on Mac');
// ...
});
Arguments
Test is marked as "slow" when the condition is
true
.description
string (optional)#Optional description that will be reflected in a test report.
test.slow(callback)
Added in: v1.10Conditionally mark all tests in a file or test.describe() group as "slow". Slow tests will be given triple the default timeout.
Usage
import { test, expect } from '@playwright/test';
test.slow(({ browserName }) => browserName === 'webkit');
test('slow in WebKit 1', async ({ page }) => {
// ...
});
test('fail in WebKit 2', async ({ page }) => {
// ...
});
Arguments
callback
function(Fixtures):boolean#A function that returns whether to mark as "slow", based on test fixtures. Test or tests are marked as "slow" when the return value is
true
.description
string (optional)#Optional description that will be reflected in a test report.
test.step
Added in: v1.10Declares a test step.
Usage
import { test, expect } from '@playwright/test';
test('test', async ({ page }) => {
await test.step('Log in', async () => {
// ...
});
});
Arguments
Returns
Details
The method returns the value returned by the step callback.
import { test, expect } from '@playwright/test';
test('test', async ({ page }) => {
const user = await test.step('Log in', async () => {
// ...
return 'john';
});
expect(user).toBe('john');
});
test.use
Added in: v1.10Specifies options or fixtures to use in a single test file or a test.describe() group. Most useful to set an option, for example set locale
to configure context
fixture.
Usage
import { test, expect } from '@playwright/test';
test.use({ locale: 'en-US' });
test('test with locale', async ({ page }) => {
// Default context and page have locale as specified
});
Arguments
options
TestOptions#An object with local options.
Details
test.use
can be called either in the global scope or inside test.describe
. It is an error to call it within beforeEach
or beforeAll
.
It is also possible to override a fixture by providing a function.
import { test, expect } from '@playwright/test';
test.use({
locale: async ({}, use) => {
// Read locale from some configuration file.
const locale = await fs.promises.readFile('test-locale', 'utf-8');
await use(locale);
},
});
test('test with locale', async ({ page }) => {
// Default context and page have locale as specified
});
Properties
test.expect
Added in: v1.10expect
function can be used to create test assertions. Read more about test assertions.
Usage
test('example', async ({ page }) => {
await test.expect(page).toHaveTitle('Title');
});
Type
Deprecated
test.describe.parallel
Added in: v1.10See test.describe.configure() for the preferred way of configuring the execution mode.
Declares a group of tests that could be run in parallel. By default, tests in a single test file run one after another, but using test.describe.parallel() allows them to run in parallel.
Usage
test.describe.parallel('group', () => {
test('runs in parallel 1', async ({ page }) => {});
test('runs in parallel 2', async ({ page }) => {});
});
Note that parallel tests are executed in separate processes and cannot share any state or global variables. Each of the parallel tests executes all relevant hooks.
Arguments
Group title.
A callback that is run immediately when calling test.describe.parallel(). Any tests added in this callback will belong to the group.
test.describe.parallel.only
Added in: v1.10See test.describe.configure() for the preferred way of configuring the execution mode.
Declares a focused group of tests that could be run in parallel. This is similar to test.describe.parallel(), but focuses the group. If there are some focused tests or suites, all of them will be run but nothing else.
Usage
test.describe.parallel.only('group', () => {
test('runs in parallel 1', async ({ page }) => {});
test('runs in parallel 2', async ({ page }) => {});
});
Arguments
Group title.
A callback that is run immediately when calling test.describe.parallel.only(). Any tests added in this callback will belong to the group.
test.describe.serial
Added in: v1.10See test.describe.configure() for the preferred way of configuring the execution mode.
Declares a group of tests that should always be run serially. If one of the tests fails, all subsequent tests are skipped. All tests in a group are retried together.
Using serial is not recommended. It is usually better to make your tests isolated, so they can be run independently.
Usage
test.describe.serial('group', () => {
test('runs first', async ({ page }) => {});
test('runs second', async ({ page }) => {});
});
Arguments
Group title.
A callback that is run immediately when calling test.describe.serial(). Any tests added in this callback will belong to the group.
test.describe.serial.only
Added in: v1.10See test.describe.configure() for the preferred way of configuring the execution mode.
Declares a focused group of tests that should always be run serially. If one of the tests fails, all subsequent tests are skipped. All tests in a group are retried together. If there are some focused tests or suites, all of them will be run but nothing else.
Using serial is not recommended. It is usually better to make your tests isolated, so they can be run independently.
Usage
test.describe.serial.only('group', () => {
test('runs first', async ({ page }) => {
});
test('runs second', async ({ page }) => {
});
});
Arguments
Group title.
A callback that is run immediately when calling test.describe.serial.only(). Any tests added in this callback will belong to the group.