Isolated BrowserContext instance, created for each test. Since contexts are isolated between each other, every test gets a fresh environment, even when multiple tests run in a single Browser for maximum efficiency.
Learn how to configure context and see [available options]TestOptions.
Default fixtures.page belongs to this context.
Usage
test('example test', async ({ page, context }) => {
await context.route('*external.com/*', route => route.abort());
// ...
});
Mounts a component story and returns a Locator pointing to the
root element the story was rendered into. Scope your queries from the returned locator:
component.getByRole('button'), not page.getByRole('button').
A story is a small wrapper component that embeds the component under test in one specific scenario: hard-coded
props, mock data, providers, recorded callbacks. Stories are rendered by a gallery page that you implement and
serve at testOptions.baseURL. The
gallery exposes window.mount(params) and window.unmount() functions that render a story into its root element.
Each call to fixtures.mount(storyId[, props])
navigates to testOptions.baseURL and
calls window.mount() with the story id and props, so tests are fully isolated from each other.
Usage
test('click should expand', async ({ mount }) => {
const component = await mount('components/Expandable/Stateful');
await component.getByRole('button').click();
await expect(component.getByTestId('expanded')).toHaveValue('true');
});
Pass the story type as a template argument to type-check the props:
import type { WithTitle } from './Button.story';
test('renders the title', async ({ mount }) => {
const component = await mount<typeof WithTitle>('Button/WithTitle', { title: 'Hello' });
await expect(component).toContainText('Hello');
});
The returned locator is augmented with two methods:
update(props) - re-renders the same story with new props without remounting, preserving component state;unmount() - unmounts the story.Identifier of the story to mount, as resolved by the gallery page. Conventionally, the story file path plus the
exported story name, for example 'components/Button/Primary'.
Optionalprops: StoryProps<Story>
Optional plain, serializable props passed to the story.
Isolated Page instance, created for each test. Pages are isolated between tests due to fixtures.context isolation.
This is the most common fixture used in a test.
Usage
import { test, expect } from '@playwright/test';
test('basic test', async ({ page }) => {
await page.goto('/signin');
await page.getByLabel('User Name').fill('user');
await page.getByLabel('Password').fill('password');
await page.getByText('Sign in').click();
// ...
});
Isolated APIRequestContext instance for each test.
Usage
import { test, expect } from '@playwright/test';
test('basic test', async ({ request }) => {
await request.post('/signin', {
data: {
username: 'user',
password: 'password'
}
});
// ...
});
Playwright Test is based on the concept of the test fixtures. Test fixtures are used to establish environment for each test, giving the test everything it needs and nothing else.
Playwright Test looks at each test declaration, analyses the set of fixtures the test needs and prepares those fixtures specifically for the test. Values prepared by the fixtures are merged into a single object that is available to the
test, hooks, annotations and other fixtures as a first parameter.Given the test above, Playwright Test will set up the
pagefixture before running the test, and tear it down after the test has finished.pagefixture provides a Page object that is available to the test.Playwright Test comes with builtin fixtures listed below, and you can add your own fixtures as well. Playwright Test also [provides options]TestOptions to configure fixtures.browser, fixtures.context and fixtures.page.