Testing Firefox Extensions with Playwright: End-to-End Te...

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.

推荐订阅源

DEV Community