Writing tests

Import test from playwright-webext and request the extension fixture in your test callback.

test/extension.spec.ts

import { test } from 'playwright-webext';

test('my extension test', async ({ extension }) => {
  // ...your extension test
});

The extension fixture gives your test access to the installed extension's worker, pages, and storage. See the Extension API for all available methods. If you have set up custom or merged fixtures, import test from your fixture module instead.

Test the worker

Use extension.evaluate() to run code in your extension's service worker. You can call Chrome APIs, read worker state, and trigger background behavior from your test.

In this example, the test checks that the extension registers an alarm that runs every 30 minutes.

test/background.spec.ts

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

test('check alarm', async ({ extension }) => {
  const alarm = await extension.evaluate(() => chrome.alarms.get('my-alarm'));
  expect(alarm).toMatchObject({
    name: 'my-alarm',
    periodInMinutes: 30,
  });
});

The evaluated function runs in the worker, not in the test process. Pass values as the optional argument rather than referring to variables from the test's scope. See extension.evaluate().

Test the popup

Extensions can show a popup when users click their toolbar icon. This example assumes an action.default_popup declaration in your manifest and a heading containing “popup”.

test/popup.spec.ts

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

test('shows the popup', async ({ extension }) => {
  const popupPage = await extension.openPopup();
  await expect(popupPage.getByRole('heading')).toContainText('My popup');
});

The popup document runs in a regular tab; see Popup for its differences from the native toolbar surface. For tests of websites affected by your extension, use its browser context.