Playwright Fixtures in Action : Create Reusable and Maintainable Tests

Setting up and tearing down test environments can be a repetitive and error-prone process in end-to-end testing. This is especially true when dealing with complex workflows or multiple test configurations. Enter Playwright Fixtures a built-in feature of Playwright Test that allows testers to define modular, reusable, and maintainable setup and teardown logic. Fixtures streamline your test code, eliminate redundancy, and ensure consistency across test runs. Whether you’re initializing browsers, setting up authentication states, or preparing test data, fixtures help you keep your test environment under control. In this blog, we’ll explore how Playwright Fixtures work, their built-in capabilities, how to create and override custom fixtures, automatic fixtures and fixture timeouts. You’ll leave with a comprehensive understanding of how to leverage fixtures to build robust and maintainable Playwright test suites.

What Are Playwright Fixtures?

Playwright Fixtures are reusable components in the @playwright/test framework used to define the setup and teardown logic of your test environment. Think of them as the building blocks that ensure your browser contexts, authentication sessions, and test data are ready to go before each test begins.

Fixtures help manage:

• Browser and context initialization
• Login sessions and cookies
• Data preparation and cleanup
• Consistent configuration across tests

By centralizing these operations, fixtures reduce boilerplate and boost code clarity. They prevent duplication of setup logic, reduce test flakiness, and make the tests more scalable and maintainable. To better illustrate the practical benefits of Playwright Fixtures, let’s dive into a realistic scenario that many testers frequently encounter validating the checkout flow in an e-commerce application.

Challenges in Repetitive Test Setup

Repeatedly preparing test conditions such as initializing browser contexts, logging in users, and setting up shopping carts for each test case can lead to redundant, bloated, and error-prone test scripts. This redundancy not only slows down the testing process but also increases maintenance efforts and potential for errors.

Streamlining Test Automation with Playwright Fixtures

Playwright Fixtures significantly improve this situation by allowing testers to define modular and reusable setup and teardown procedures. Let’s explore how you can use Playwright Fixtures to simplify and streamline your e-commerce checkout testing scenario.

Step 1: Define an Authenticated User Fixture

This fixture handles user authentication once, providing an authenticated browser session for subsequent tests.

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

const test = base.extend({
  authenticatedPage: async ({ browser }, use) => {
    const context = await browser.newContext();
    const page = await context.newPage();
    await page.goto('https://shop.example.com/login');
    await page.fill('#username', 'testuser');
    await page.fill('#password', 'password123');
    await page.click('#login');
    await page.waitForSelector('#user-profile'); // Confirm successful login
    await use(page);
    await context.close();
  },
});

Step 2: Define a Shopping Cart Setup Fixture

This fixture prepares a pre-filled shopping cart environment, eliminating repetitive product selection and cart preparation.

const testWithCart = test.extend({
  cartReadyPage: async ({ authenticatedPage }, use) => {
    await authenticatedPage.goto('https://shop.example.com/products/1');
    await authenticatedPage.click('#add-to-cart');
    await authenticatedPage.goto('https://shop.example.com/cart');
    await use(authenticatedPage);
  }
});

Step 3: Implementing the Checkout Test

Leverage the prepared fixtures to execute your checkout validation effectively.

testWithCart('Validate Checkout Flow', async ({ cartReadyPage }) => {
  await cartReadyPage.click('#checkout');
  await cartReadyPage.fill('#shipping-address', '123 Main St');
  await cartReadyPage.click('#confirm-order');
  await expect(cartReadyPage.locator('#confirmation-message'))
    .toHaveText('Thank you for your purchase!');
});

Using Playwright Fixtures, the previously cumbersome testing scenario now becomes straightforward and highly efficient:

• Reduced Redundancy: Setup logic defined clearly once, reused effortlessly.
• Enhanced Reliability: Consistent setup reduces flaky tests and ensures stability across test runs.
• Accelerated Execution: Dramatically reduced execution time, beneficial for continuous integration and delivery pipelines.
• Improved Maintainability: Modular approach simplifies updates and enhances readability.

By incorporating Playwright Fixtures in scenarios like this, testers and developers alike can achieve more reliable, maintainable, and scalable test suites, significantly boosting the quality and efficiency of software testing practices.

Built-in Fixtures in Playwright

Playwright provides several built-in fixtures when using the @playwright/test package. These are automatically available in your test function parameters:

Fixture – Description

• page – A single browser tab; most commonly used for UI interaction
• browser – A browser instance (Chromium, Firefox, or WebKit)
• context – An isolated browser context for separate sessions
• request – API RequestContext for making HTTP requests without a browser
• browserName – A string representing the current browser being tested
• baseURL – The base URL used in page.goto() or request.get()

Playwright comes packed with a variety of built-in fixtures that simplify common testing tasks right out of the box. These fixtures help manage browser instances, contexts, pages, and even API requests, allowing testers to write cleaner, more maintainable tests without redundant setup logic. Below are some commonly used built-in fixtures show how they enhance the efficiency and reliability of test scripts.

BrowserName Fixture

Detects the current browser being used and adjusts logic accordingly, allowing for cross-browser support and conditional test behavior.

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

test('Test for Built-in browserName fixture', async ({ page, browserName }) => {
  await page.goto('https://www.google.co.in/');
  if (browserName === 'firefox') {
    console.log('Running test in Firefox Browser');
  }
  await expect(page).toHaveTitle('Google');
});

Browser and page Fixtures

Launches a browser in non-headless mode and opens a new page to verify the title of a website. Useful for visual debugging and testing in full UI mode.

const base = require('@playwright/test');

const test = base.test.extend({
  browser: async ({}, use) => {
    const browser = await base.chromium.launch({ headless: false });
    await use(browser);
    await browser.close();
  },
});

test('Open Facebook and check title', async ({ browser }) => {
  const page = await browser.newPage();
  await page.goto('https://www.facebook.com/');
  const fbTitle = await page.title();
  console.log(fbTitle);
});

Context Fixture

Creates a new isolated browser context for each test to avoid shared cookies or storage, which ensures better test isolation and prevents data leakage.

const base = require('@playwright/test');

const test = base.test.extend({
  context: async ({ browser }, use) => {
    const context = await browser.newContext();
    await use(context);
    await context.close();
  },
});

test('Open Facebook in isolated context', async ({ context }) => {
  const page = await context.newPage();
  await page.goto('https://www.facebook.com/');
  await base.expect(page).toHaveTitle('Facebook - log in or sign up');
  await page.close();
});

Request Fixture

Makes direct HTTP requests using Playwright’s request context, useful for API testing without launching a browser.

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

test('Make a GET request to ReqRes API', async ({ request }) => {
  const response = await request.get('https://reqres.in/api/users/2');
  expect(response.ok()).toBeTruthy();
  const body = await response.json();

  console.log(body);
  expect(body.data).toHaveProperty('id', 2);
});

Creating Custom Fixtures

Custom fixtures are created using test.extend(). These are useful when:

• You need reusable data (e.g., user credentials).
• You want to inject logic like pre-login.
• You want test-specific environment setup.

Custom testUser Fixture

Injects reusable test data like user credentials into the test. This promotes reusability and clean code.

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

const test = base.extend({
  testUser: async ({}, use) => {
    const user = {
      email: '123@gmail.com',
      password: 'securepassword123'
    };
    await use(user);
  }
});

test('Facebook login test using custom fixture', async ({ page, testUser }) => {
  await page.goto('https://www.facebook.com/');
  await page.fill("input[name='email']", testUser.email);
  await page.fill("input[id='pass']", testUser.password);
  await page.click("button[name='login']");
});

Custom Fixture Naming and Titles

Assigns a descriptive title to the fixture for better traceability in test reports.

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

export const test = base.extend({
  innerFixture: [
    async ({}, use, testInfo) => {
      await use();
    },
    { title: 'my fixture' }
  ]
});

Overriding Fixtures

Overrides the default behavior of the page fixture to automatically navigate to a base URL before each test.

const test = base.extend({
  page: async ({ baseURL, page }, use) => {
    await page.goto(baseURL);
    await use(page);
  }
});

test.use({ baseURL: 'https://www.demo.com' });

Automatic Fixtures

Runs shared setup and teardown logic for all tests automatically, such as authentication or data seeding.

const base = require('@playwright/test');

const test = base.test.extend({
  authStateLogger: [
    async ({}, use) => {
      console.log('[Fixture] Logging in...');
      await new Promise(res => setTimeout(res, 1000));
      await use();
      console.log('[Fixture] Logging out...');
    },
    { auto: true }
  ]
});

Fixture Timeouts

Ensures that long-running fixtures do not cause the test suite to hang by defining maximum allowable time.

const base = require('@playwright/test');

const test = base.test.extend({
  authStateLogger: [
    async ({}, use) => {
      console.log('[Fixture] Logging in...');
      await new Promise(res => setTimeout(res, 3000));
      await use();
      console.log('[Fixture] Logging out...');
    },
    { auto: true, timeout: 5000 }
  ]
});

Benefits of Using Playwright Fixtures

Benefit – Description

• Modularity – Reuse logic across test files and suites
• Maintainability – Centralized configuration means easier updates
• Test Isolation – Prevents cross-test interference
• Scalability – Clean, extensible structure for large suites
• Performance – Reduces redundant setup

Conclusion

Playwright Fixtures are more than just setup helpers they’re the backbone of a scalable, clean, and maintainable test architecture. By modularizing your environment configuration, they reduce flakiness, improve performance, and keep your tests DRY (Don’t Repeat Yourself). Start simple, think modular, and scale with confidence. Mastering fixtures today will pay dividends in your team’s productivity and test reliability.

Frequently Asked Questions

The post Playwright Fixtures in Action : Create Reusable and Maintainable Tests appeared first on Codoid.

Source: Read More