Playwright Test Fixtures

Every playwright's tests are based on the concept of the test fixtures. Fixtures in playwright give the specific environment in which the tests will be performed. This offers the tests what it needs and nothing else.

The playwright analyses each Fixture and sets them up to the test needs, and prepares those fixtures for the test alone. They are merged into a single object available to the test, hooks, annotations, and other fixtures as a first parameter.

const { test, expect } = require('@playwright/test');

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

Here the fixtures test and expect are imported onto the test environment from the playwright/test.
The playwright test will set up the page fixture, which will be used to navigate to the browser and tear it down after the test has finished.
Page fixture provides a page object.

Here are some of the other fixtures besides the page.

1. Browser Fixture

This Fixture is used to share all browser instances between all tests in the same worker. This will make testing efficient and runs each test in an isolated browser context with a new environment.

type: <Browser>

2. browserName Fixture

It is used to mention the browser's name to run the test on. The default is 'chromium.'
Useful to annotate tests based on the browser.

type: <"chromium"|"firefox"|"webkit">

test('Skip Test In Webkit', async ({ page, browserName }) => {
  test.skip(browserName === 'webkit', 'Still working on it');
  // ...
});

3. page Fixture

This Fixture is an isolated page instance created for every test. Pages are isolated between tests due to context isolation.
The most common Fixture used in a test is a page.

type: <Page>

const { test, expect } = require('@playwright/test');

test('basic test', async ({ page }) => {
  await page.goto('https://www.programsbuzz.com');
  await page.fill('#username', 'User');
  await page.fill('#password', 'pwd');
  await page.click('text=Sign in');
  // ...
});

4. request Fixture

This Fixture has an isolated APIRequestContext instance for each test.

type: <APIRequestContext>

const { test, expect } = require('@playwright/test');

test('basic test', async ({ request }) => {
  await request.post('api.com/post', {
    data: {
      username: 'user',
      password: 'password'
    }
  });
});