ExtensionTestPage

(no submodules)

## Purpose

The ExtensionTestPage provides a dedicated landing zone for testing browser extension content scripts. It detects whether an extension has injected a DOM element (id="extension-injected") either at load time or via a MutationObserver watching for subsequent DOM mutations. It is used with the launchWithExtension Playwright fixture from @suaveplan/testing-e2e/extension-fixture.

Features

Checks document.getElementById("extension-injected") on mount for immediate detection
MutationObserver watches document.body for late-injected extension elements
Visual injection target zone (id="extension-mount") as a styled dashed box
Detection status shown with ✓ / ○ prefix in the output panel
All required data-testid attributes for Playwright E2E testing
MutationObserver is disconnected on component unmount to prevent leaks

Usage: Basic Example

import React from "react";
import { ExtensionTestPage } from "./extension-test-page.js";

export function App() {
  return <ExtensionTestPage />;
}

Usage: Advanced Example

In extension Playwright tests, launch with launchWithExtension from @suaveplan/testing-e2e/extension-fixture:

import { launchWithExtension } from "@suaveplan/testing-e2e/extension-fixture";
import { chromium } from "@playwright/test";

const { context, extensionId } = await launchWithExtension({
  chromium,
  extensionPath: "./e2e/fixtures/test-extension",
  userDataDir: "/tmp/pw-user-data",
});

const page = await context.newPage();
await page.goto("http://localhost:3200/extension-test");
await expect(page.locator('[data-testid="output"]')).toContainText("Extension injected");
await context.close();

The test extension should inject <div id="extension-injected">Extension injected content</div> into the page body or extension-mount div.

API Reference