Skip to main content

E2E Testing Guide

End-to-end tests load your built extension in a real browser and verify flows (auth, popup, storage). They catch runtime issues that unit tests miss: extension APIs, CSP, and cross-tab behavior.

Why E2E?​

  • Extension APIs – chrome.storage, chrome.tabs, and messaging behave differently in a real extension context
  • CSP – Content Security Policy can block scripts; E2E surfaces these failures
  • Integration – Auth, billing, and UI flows work together

Suggested Tools​

  • Playwright – Supports loading unpacked extensions; extension testing docs
  • Puppeteer – Chromium-focused; can launch with --load-extension flag

Basic Setup​

  1. Install Playwright (or Puppeteer):

    pnpm add -D playwright

  2. Build the extension:

    pnpm build:chrome

    Output is in apps/extension/dist.

  3. Launch the browser with the unpacked extension and run tests. Example (Playwright):

    import { chromium } from 'playwright';

    const pathToExtension = path.join(process.cwd(), 'apps/extension/dist');
    const context = await chromium.launchPersistentContext('', {
      headless: false,
      args: [`--disable-extensions-except=${pathToExtension}`, `--load-extension=${pathToExtension}`],
    });

Example Flow​

A minimal smoke test:

  1. Open the extension popup (via chrome-extension://<id>/popup.html)
  2. Check that the popup renders (e.g. login form or user email)
  3. Optionally trigger an auth flow and assert state changes

References​