Using context

By default, the extension fixture creates a separate browser context from Playwright's built-in page and context fixtures. Use the extension context to create and test pages that interact with your extension.

Create a page in the extension context

Use extension.context.newPage() when a website needs your extension loaded:

test/website.spec.ts

import { expect } from '@playwright/test';
import { test } from 'playwright-webext';

test('opens a website with the extension loaded', async ({ extension }) => {
  const websitePage = await extension.context.newPage();
  await websitePage.goto('https://example.com');
  // The extension can interact with this page.
});

The extension fixture closes the context and its pages during teardown.

Map to the default context

If you want tests to use the familiar context and page fixtures with the extension loaded, override context in your own fixture module:

test/fixtures.ts

import { test as base } from 'playwright-webext';

export const test = base.extend({
  context: async ({ extension }, use) => use(extension.context),
});

Import this test in your test files. The built-in page fixture and any pages you create with context.newPage() will use the extension context, so you can test pages that interact with your extension.

test/website.spec.ts

import { test } from './fixtures';

test('opens a website with the extension loaded', async ({ page }) => {
  await page.goto('https://example.com');
  // The extension can interact with this page.
});

With this override, requesting page or context also initializes extension. Leave context cleanup to the extension fixture; do not close its context inside the override. If you already extend test with custom fixtures, add this context override to the same extend() call.

The extension context uses the configured Playwright options, including baseURL, with or without this override. The native browser fixture does not represent the extension's browser.

See overriding Playwright fixtures for more on fixture overrides.