Custom Test Fixtures in Playwright

Playwright's custom fixtures offer a powerful way to create modular, reusable test configurations that can dramatically simplify complex testing scenarios. By understanding how to craft custom fixtures, you'll unlock more flexible and maintainable test suites that adapt seamlessly to diverse testing requirements.

Prerequisites#

• Playwright v1.35.0 or higher
• TypeScript 4.7+
• Node.js 16.x or newer
• Basic understanding of TypeScript and asynchronous programming
• Familiarity with Playwright's basic test structure
• Integrated Development Environment (VS Code recommended)
• Estimated setup time: 15-20 minutes

Understanding Playwright Fixtures#

What Are Custom Fixtures?#

Custom fixtures in Playwright are advanced test configuration mechanisms that allow you to create reusable, modular testing environments. Unlike standard test setups, custom fixtures provide a flexible way to inject dependencies, manage state, and create complex testing scenarios with minimal repetitive code.

Why Custom Fixtures Matter#

Traditional testing approaches often lead to:

• Repeated configuration code
• Tightly coupled test dependencies
• Complex setup and teardown processes

Custom fixtures solve these challenges by providing:

• Modular test configurations
• Dependency injection
• Automatic resource management
• Enhanced test isolation

Creating Your First Custom Fixture#

Let's explore a practical example of creating a custom fixture for an e-commerce testing scenario.

import { test as baseTest } from "@playwright/test";
import { AuthenticatedUserFixture } from "./fixtures/user-fixture";
import { ProductCatalogFixture } from "./fixtures/catalog-fixture";

// Extend the base test with custom fixtures
export const test = baseTest.extend<{
  authenticatedUser: AuthenticatedUserFixture;
  productCatalog: ProductCatalogFixture;
}>({
  // Define authentication fixture
  authenticatedUser: async ({ page }, use) => {
    const user = new AuthenticatedUserFixture(page);
    await user.login("[email protected]", "securePassword123");
    await use(user);
    await user.logout();
  },

  // Define product catalog fixture
  productCatalog: async ({ page }, use) => {
    const catalog = new ProductCatalogFixture(page);
    await catalog.initialize();
    await use(catalog);
  },
});

import { test as baseTest } from "@playwright/test";
import { AuthenticatedUserFixture } from "./fixtures/user-fixture";
import { ProductCatalogFixture } from "./fixtures/catalog-fixture";

// Extend the base test with custom fixtures
export const test = baseTest.extend<{
  authenticatedUser: AuthenticatedUserFixture;
  productCatalog: ProductCatalogFixture;
}>({
  // Define authentication fixture
  authenticatedUser: async ({ page }, use) => {
    const user = new AuthenticatedUserFixture(page);
    await user.login("[email protected]", "securePassword123");
    await use(user);
    await user.logout();
  },

  // Define product catalog fixture
  productCatalog: async ({ page }, use) => {
    const catalog = new ProductCatalogFixture(page);
    await catalog.initialize();
    await use(catalog);
  },
});

Advanced Fixture Composition#

Dependency Injection in Fixtures#

Custom fixtures can depend on other fixtures, creating powerful composition patterns:

export const test = baseTest.extend<{
  database: DatabaseConnection;
  userRepository: UserRepository;
}>({
  database: async ({}, use) => {
    const db = new DatabaseConnection();
    await db.connect();
    await use(db);
    await db.disconnect();
  },

  userRepository: async ({ database }, use) => {
    const repository = new UserRepository(database);
    await use(repository);
  },
});

export const test = baseTest.extend<{
  database: DatabaseConnection;
  userRepository: UserRepository;
}>({
  database: async ({}, use) => {
    const db = new DatabaseConnection();
    await db.connect();
    await use(db);
    await db.disconnect();
  },

  userRepository: async ({ database }, use) => {
    const repository = new UserRepository(database);
    await use(repository);
  },
});

Fixture Scoping and Lifecycle#

Playwright supports different fixture scopes:

• test: Recreated for each test
• worker: Shared across tests in the same worker process
• global: Created once for entire test run

Handling Asynchronous Fixtures#

export const test = baseTest.extend<{
  asyncResource: Promise<RemoteService>;
}>({
  asyncResource: async ({}, use) => {
    const service = await RemoteService.initialize();
    await use(service);
    await service.cleanup();
  },
});

export const test = baseTest.extend<{
  asyncResource: Promise<RemoteService>;
}>({
  asyncResource: async ({}, use) => {
    const service = await RemoteService.initialize();
    await use(service);
    await service.cleanup();
  },
});

Troubleshooting Custom Fixtures#

Best Practices#

• Keep fixtures focused and single-purpose
• Design with explicit lifecycle management
• Use TypeScript for type-safe fixture definitions
• Implement comprehensive error handling
• Prefer composition over complex inheritance
• Minimize side effects in fixture setup
• Document fixture behavior and expectations

Next Steps#

• Explore Playwright's worker-scoped fixtures
• Investigate advanced dependency injection techniques
• Build comprehensive test utilities
• Experiment with fixture composition patterns
• Review Playwright's official documentation on advanced fixture usage