chore(e2e): add fixtures.ts, update playwright config and e2e skill

Author: sm17p

.cursor/skills/e2e-playwright-extension/SKILL.md

@@ -5,17 +5,19 @@ description: Adds or updates extension E2E tests using the project Playwright se
 
 # E2E with Playwright (extension)
 
+Aligned with [WXT’s Playwright E2E example](https://github.com/wxt-dev/examples/tree/main/examples/playwright-e2e-testing): Chromium only, extension loaded from `dist/chrome-mv3`.
+
 ## Layout
 
 - Tests in [e2e/tests/](e2e/tests/)
-- Shared fixture in [e2e/fixutes.ts](e2e/fixutes.ts) (note: filename typo in repo)
+- Shared fixture in [e2e/fixtures.ts](e2e/fixtures.ts)
 - Page helpers in [e2e/pages/](e2e/pages/) (e.g. [e2e/pages/popup.ts](e2e/pages/popup.ts))
 
 ## Fixture
 
 The fixture extends Playwright with:
 
-- **context:** Firefox persistent context that loads the unpacked extension from `dist/firefox-mv3`
+- **context:** Chromium persistent context that loads the unpacked extension from `dist/chrome-mv3`
 - **extensionId:** Resolved from the service worker (MV3) or background page otherwise
 
 Use `context` and `extensionId` in tests. Import the extended `test` and `expect` from the fixture.
@@ -26,9 +28,10 @@ Navigate to `chrome-extension://${extensionId}/popup.html`. Use helpers like `op
 
 ## Run
 
-- `pnpm test:e2e`
-- Build the extension first so `dist/` exists: `pnpm build:firefox` or `pnpm build`
+- First-time: `pnpm exec playwright install chromium` (installs Chromium and headless shell; do not use `--no-shell` or default tests will fail).
+- Build the extension: `pnpm build` so `dist/chrome-mv3` exists.
+- Run tests: `pnpm test:e2e`
 
 ## Note
 
-`playwright-webextext` is in devDependencies for potential future use; current tests use the custom fixture in `fixutes.ts`.
+`playwright-webextext` is in devDependencies for potential future use; current tests use the custom fixture in `fixtures.ts`.

.github/workflows/playwright.yml

@@ -16,9 +16,9 @@ jobs:
       - name: Install dependencies
         run: npm install -g pnpm && pnpm install
       - name: Install Playwright Browsers
-        run: pnpm exec playwright install --with-deps
+        run: pnpm exec playwright install chromium --with-deps
       - name: Run Playwright tests
-        run: pnpm exec playwright test
+        run: pnpm test:e2e
       - uses: actions/upload-artifact@v4
         if: ${{ !cancelled() }}
         with:

.nvimlog

@@ -0,0 +1,34 @@
+import {
+	test as base,
+	chromium,
+	type BrowserContext,
+} from "@playwright/test";
+import path from "path";
+
+const pathToExtension = path.resolve("dist/chrome-mv3");
+
+export const test = base.extend<{
+	context: BrowserContext;
+	extensionId: string;
+}>({
+	context: async ({}, use) => {
+		const context = await chromium.launchPersistentContext("", {
+			headless: !!process.env.CI,
+			args: [
+				`--disable-extensions-except=${pathToExtension}`,
+				`--load-extension=${pathToExtension}`,
+			],
+		});
+		await use(context);
+		await context.close();
+	},
+	extensionId: async ({ context }, use) => {
+		let [background] = context.serviceWorkers();
+		if (!background) {
+			background = await context.waitForEvent("serviceworker");
+		}
+		const extensionId = background.url().split("/")[2];
+		await use(extensionId);
+	},
+});
+export const expect = test.expect;

e2e/fixtures.ts

@@ -3,7 +3,7 @@ import { Page } from "@playwright/test";
 export async function openPopup(page: Page, extensionId: string) {
 	await page.goto(`chrome-extension://${extensionId}/popup.html`);
 
-	await page.waitForSelector("#counter");
+	await page.waitForSelector("#active");
 
 	const popup = {
 		getCounter: () => page.waitForSelector("#active"),

e2e/pages/popup.ts

@@ -1,23 +1,7 @@
-// import { createFixture, withExtension } from "playwright-webextext";
+import { test, expect } from "../fixtures";
+import { openPopup } from "../pages/popup";
 
-import path from "node:path";
-// import { firefox } from "playwright";
-// import { expect } from "playwright/test";
-
-let extensionPath = path.resolve("dist/firefox-mv3");
-console.log("🚀 ~ extensionPath:", extensionPath);
-
-// const browser = await withExtension(firefox, extensionPath).launch({
-// 	headless: false,
-// });
-
-// const { test, expect } = createFixture(extensionPath);
-
-// test("Popup counter increments when clicked", async ({ page, }) => {
-
-// });
-
-// (async () => {
-// 	const page = await browser.newPage();
-// 	await page.goto("https://example.com/");
-// })();
+test("popup opens and shows active element", async ({ page, extensionId }) => {
+	const popup = await openPopup(page, extensionId);
+	await expect(page.locator("#active")).toBeVisible();
+});

e2e/tests/popup-counter.spec.ts

@@ -18,7 +18,7 @@
 		"fmt:check": "oxfmt --check",
 		"lint": "oxlint",
 		"postinstall": "wxt prepare",
-		"test:e2e": "playwright test",
+		"test:e2e": "pnpm build && playwright test",
 		"wxt": "wxt",
 		"zip": "wxt zip",
 		"zip:all": "pnpm zip && pnpm zip:firefox",

package.json

@@ -31,17 +31,11 @@ export default defineConfig({
 		/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
 		trace: "on-first-retry",
 	},
-	/* Configure projects for major browsers */
 	projects: [
 		{
 			name: "chromium",
 			use: { ...devices["Desktop Chrome"] },
 		},
-
-		{
-			name: "firefox",
-			use: { ...devices["Desktop Firefox"] },
-		},
 		/* Test against mobile viewports. */
 		// {
 		//   name: 'Mobile Chrome',
@@ -62,10 +56,9 @@ export default defineConfig({
 		//   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
 		// },
 	],
-	timeout: 5 * 60 * 1000,
 	/* Run your local dev server before starting the tests */
 	// webServer: {
-	//   command: 'npm run start',
+	//   command: 'pnpm dev',
 	//   url: 'http://localhost:3000',
 	//   reuseExistingServer: !process.env.CI,
 	// },

playwright.config.ts

@@ -31,7 +31,7 @@
 				status: "complete",
 			});
 
-			if (tab.url) {
+			if (tab?.url) {
 				const url = new URL(tab.url);
 				domain = url.host;