Testing Firefox Extensions with Playwright: End-to-End Testing Guide

Extension testing is one of those things everyone knows they should do but few actually do. I've been using Playwright for end-to-end tests on the Weather & Clock Dashboard extension and it's changed how I think about extension quality.

Why E2E Testing for Extensions?

Unit tests don't cover the biggest failure modes:

• Does the extension actually load in Firefox?
• Does the new tab override work?
• Does dark mode actually change the theme?
• Does the weather display when location is set?

E2E tests catch all of these.

Setup: Playwright with Firefox Extensions

npm install --save-dev @playwright/test
npx playwright install firefox

playwright.config.ts:

import { defineConfig, devices } from '@playwright/test';
import path from 'path';

const EXTENSION_PATH = path.resolve(__dirname, '.');

export default defineConfig({
  testDir: './tests',
  use: {
    browserName: 'firefox',
  },
  projects: [
    {
      name: 'firefox-extension',
      use: {
        ...devices['Desktop Firefox'],
        launchOptions: {
          args: [
            `-load-extension=${EXTENSION_PATH}`,
            '-extension-arg',
          ]
        }
      }
    }
  ]
});

Note: Firefox extension loading in Playwright uses a different API than Chrome. Here's the Firefox-specific approach:

import { chromium, firefox } from 'playwright';

async function launchFirefoxWithExtension(extensionPath: string) {
  const browser = await firefox.launch({
    headless: false, // Firefox requires headful for extensions in dev mode
    firefoxUserPrefs: {
      'extensions.autoDisableScopes': 0,
      'extensions.enabledScopes': 15,
    }
  });

  const context = await browser.newContext();

  // Load extension
  await context.addInitScript(() => {
    // Extension-specific initialization
  });

  return { browser, context };
}

Simpler Approach: Test the HTML Directly

For new tab extensions, the most reliable approach is to load the HTML file directly in tests:

import { test, expect } from '@playwright/test';
import path from 'path';

const NEWTAB_URL = `file://${path.resolve(__dirname, '../newtab.html')}`;

test('renders weather widget', async ({ page }) => {
  // Mock the weather API
  await page.route('**/api.openweathermap.org/**', route => {
    route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify({
        name: 'San Francisco',
        sys: { country: 'US' },
        weather: [{ main: 'Clear', description: 'clear sky', icon: '01d' }],
        main: { temp: 72, feels_like: 70, humidity: 45 },
      })
    });
  });

  // Set city in localStorage
  await page.addInitScript(() => {
    localStorage.setItem('city', 'San Francisco');
  });

  await page.goto(NEWTAB_URL);
  await page.waitForTimeout(1500);

  // Assertions
  await expect(page.locator('#weather-temp')).toContainText('72');
  await expect(page.locator('#weather-city')).toContainText('San Francisco');
  await expect(page.locator('#weather-description')).toContainText('clear sky');
});

Testing Dark Mode

test('dark mode toggle persists', async ({ page }) => {
  await page.goto(NEWTAB_URL);

  // Initially light mode
  await expect(page.locator('body')).not.toHaveClass(/dark/);

  // Toggle dark mode
  await page.click('#theme-toggle');
  await page.waitForTimeout(300);

  // Should be dark
  await expect(page.locator('body')).toHaveClass(/dark/);

  // Reload — should persist
  await page.reload();
  await page.waitForTimeout(500);
  await expect(page.locator('body')).toHaveClass(/dark/);
});

Testing the World Clock

test('world clock shows correct city', async ({ page }) => {
  await page.addInitScript(() => {
    localStorage.setItem('worldClocks', JSON.stringify([
      { label: 'Tokyo', timezone: 'Asia/Tokyo' },
      { label: 'London', timezone: 'Europe/London' }
    ]));
  });

  await page.goto(NEWTAB_URL);
  await page.waitForTimeout(1000);

  const clocks = await page.locator('.world-clock').all();
  expect(clocks).toHaveLength(2);

  await expect(clocks[0]).toContainText('Tokyo');
  await expect(clocks[1]).toContainText('London');

  // Both should show a valid time (HH:MM format)
  const tokyoTime = await clocks[0].locator('.clock-time').textContent();
  expect(tokyoTime).toMatch(/\d{1,2}:\d{2}/);
});

Testing Offline Behavior

test('shows cached data when offline', async ({ page }) => {
  // First, cache some data
  await page.addInitScript(() => {
    const cachedWeather = {
      data: { name: 'Cached City', main: { temp: 65 } },
      timestamp: Date.now() - 1000 // 1 second ago
    };
    localStorage.setItem('cache_weather', JSON.stringify(cachedWeather));
  });

  // Simulate offline by blocking API requests
  await page.route('**/api.openweathermap.org/**', route => {
    route.abort('failed');
  });

  await page.goto(NEWTAB_URL);
  await page.waitForTimeout(2000);

  // Should show cached data
  await expect(page.locator('#weather-city')).toContainText('Cached City');
  await expect(page.locator('#weather-temp')).toContainText('65');

  // Should show offline indicator
  const status = await page.locator('#weather-status').textContent();
  expect(status?.toLowerCase()).toContain('offline');
});

Running Tests

// package.json
{
  "scripts": {
    "test": "playwright test",
    "test:ui": "playwright test --ui",
    "test:headed": "playwright test --headed"
  }
}

npm test                    # Run all tests headlessly
npm run test:headed         # Run with visible browser
npm run test:ui             # Interactive UI mode
npx playwright test --debug # Step through tests

CI Integration

# .github/workflows/test.yml
- name: Run E2E tests
  run: |
    npx playwright install firefox
    npm test

For the Weather & Clock Dashboard, these tests run on every PR before merging.

Install the extension: Weather & Clock Dashboard on AMO

---

Part of a series on building Firefox browser extensions.

firefox #testing #playwright #webdev #browserextension