Playwright Testing for Browser Extension Development and Testing

This guide provides complete, production-ready Playwright patterns for playwright testing for browser extension development and testing.

Introduction

Robust test automation requires domain-specific patterns. This article covers playwright testing for browser extension development and testing with practical code examples you can use immediately in your test suite.

Architecture Overview

graph TD
    Test["Playwright Test"] --> App["Application Under Test"]
    App --> API["Backend API / Mock"]
    API --> Assert["Test Assertions Pass"]

Implementation

import { chromium } from '@playwright/test';

test('Chrome extension popup opens correctly', async () => {
  const pathToExtension = './dist/extension';
  const context = await chromium.launchPersistentContext('', {
    headless: false,
    args: [
      --disable-extensions-except=${pathToExtension},
      --load-extension=${pathToExtension}
    ]
  });
  const page = await context.newPage();
  const extensionId = 'your-extension-id';
  await page.goto(chrome-extension://${extensionId}/popup.html);
  await expect(page.getByRole('heading')).toBeVisible();
  await context.close();
});

Run Tests

npx playwright test --grep "Playwright Testing for"
npx playwright test --ui

Reference Table

Best Practices

Common Mistakes

Frequently Asked Questions

How to load a Chrome extension in Playwright?

Use launchPersistentContext with --load-extension and --disable-extensions-except flags.

How to get the extension ID dynamically?

After loading, evaluate chrome.runtime.id in the extension context to get the dynamic ID.

Can Playwright test Firefox extensions?

Yes, use launchPersistentContext with firefox-specific extension loading options.

How to test extension content scripts?

Navigate to a target page and verify that the content script has modified the DOM as expected.

How to test extension background service worker?

Use app.evaluate() to call chrome.runtime APIs and verify background worker responses.

Summary

This guide covered playwright testing for browser extension development and testing. Apply these patterns to build reliable, fast, and maintainable automation for this specific scenario.

Related Articles