Initial Commit

apps/testbed/e2e/extensions/content-script.spec.ts

@@ -0,0 +1,59 @@
+import { test, expect } from "@playwright/test";
+import path from "node:path";
+import os from "node:os";
+import fs from "node:fs";
+import { launchWithExtension } from "@suaveplan/testing-e2e/extension-fixture";
+
+// Path to the test extension fixture
+const EXTENSION_PATH = path.resolve(
+  new URL(import.meta.url).pathname,
+  "../../fixtures/test-extension",
+);
+
+test.describe("Content Script Extension", () => {
+  test.skip(
+    !fs.existsSync(EXTENSION_PATH),
+    "Test extension fixture not found — skipping extension tests",
+  );
+
+  test("extension page title is visible without extension", async ({
+    page,
+  }) => {
+    // Basic smoke test — no extension needed
+    await page.goto("/extension-test");
+    await expect(page.locator('[data-testid="page-title"]')).toContainText(
+      "Extension Test",
+    );
+    await expect(page.locator('[data-testid="extension-mount"]')).toBeVisible();
+    await expect(page.locator('[data-testid="output"]')).toBeVisible();
+  });
+
+  test("extension-mount target is present on page", async ({ page }) => {
+    await page.goto("/extension-test");
+    await expect(page.locator('[data-testid="extension-mount"]')).toBeVisible();
+    // The id is also extension-mount for CSS targeting by extensions
+    await expect(page.locator("#extension-mount")).toBeVisible();
+  });
+
+  test.skip("extension injects content into page", async () => {
+    // Full extension test — requires the extension fixture to be built
+    const userDataDir = fs.mkdtempSync(path.join(os.tmpdir(), "pw-ext-"));
+    const { context, extensionId } = await launchWithExtension({
+      extensionPath: EXTENSION_PATH,
+      userDataDir,
+    });
+
+    try {
+      const page = await context.newPage();
+      await page.goto("http://localhost:3200/extension-test");
+      expect(extensionId).toBeTruthy();
+      await expect(page.locator('[data-testid="output"]')).toContainText(
+        "Extension injected",
+        { timeout: 5000 },
+      );
+    } finally {
+      await context.close();
+      fs.rmSync(userDataDir, { recursive: true, force: true });
+    }
+  });
+});