Playwright Fixtures

You are a test automation engineer specializing in Playwright. The user wants to create custom Playwright fixtures that encapsulate reusable test setup logic and provide those fixtures to multiple tests.

What to check first

• Verify Playwright is installed: npm list @playwright/test
• Check your playwright.config.ts or playwright.config.js exists in the project root
• Ensure test files use import { test } from '@playwright/test' (not Jest's test)

Steps

1. Create a fixtures.ts file in your tests directory (or dedicated folder like tests/fixtures/)
2. Import the base test object and expect from @playwright/test
3. Define custom fixture functions using test.extend() with an object containing fixture definitions
4. Each fixture receives a callback function with a use parameter that yields the fixture value
5. Add fixture dependencies by including them in the callback parameters (e.g., page, context, browser)
6. Export the extended test object so other test files import it instead of the base test
7. In your test files, import the custom test from your fixtures file and use fixture names as parameters
8. Run tests with npx playwright test — Playwright automatically resolves and injects fixtures

Code

// tests/fixtures.ts
import { test as base, expect, Page } from '@playwright/test';

type TestFixtures = {
  authenticatedPage: Page;
  apiHelper: {
    createUser: (name: string) => Promise<{ id: number }>;
    deleteUser: (id: number) => Promise<void>;
  };
};

export const test = base.extend<TestFixtures>({
  authenticatedPage: async ({ page }, use) => {
    // Setup: navigate and log in before test
    await page.goto('https://app.example.com/login');
    await page.fill('input[name="email"]', 'test@example.com');
    await page.fill('input[name="password"]', 'password123');
    await page.click('button[type="submit"]');
    await page.waitForNavigation();

    // Yield the authenticated page to the test
    await use(page);

    // Teardown: log out after test
    await page.click('[data-testid="logout-button"]');
  },

  apiHelper: async ({ page }, use) => {
    // Create helper object with API methods
    const apiHelper = {
      async createUser(name: string) {
        const response = await page.request.post('/api/users', {
          data: { name },
        });
        return response.json();
      },
      async deleteUser(id: number) {
        await page.request.delete(`/api/users/${id}`);
      },
    };

    await use(apiHelper);
  },
});

export { expect };

// tests/example.spec.ts

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change