Switch E2E fixture hosting to Vite preview

Author: sm17p

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

@@ -12,10 +12,10 @@ Aligned with [WXT’s Playwright E2E example](https://github.com/wxt-dev/example
 - Tests in [e2e/tests/](e2e/tests/) — main suite [e2e/tests/extension.spec.ts](e2e/tests/extension.spec.ts) with describe blocks: **Popup**, **Content injection**, **Per-domain activation**
 - 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 page served locally via Playwright `webServer`:
-  - `e2e/serve-fixtures.mjs`
-  - `e2e/constants.ts` (`STABLE_TEST_PAGE_URL` + derived host keying)
-  - `playwright.config.ts` (points `webServer.url` at `inspector-playground.html`)
+- Fixture page served via Playwright `webServer` + Vite preview:
+  - `playwright.config.ts` uses `pnpm exec vite preview --host localhost --port 51234 --strictPort`
+  - `use.baseURL` is `http://localhost:51234`
+  - Tests navigate with relative paths like `/inspector-playground.html`
 
 ## Fixture
 
@@ -38,6 +38,6 @@ Navigate to `chrome-extension://${extensionId}/popup.html`. Use helpers like `op
 
 ## Note
 
-`playwright-webextext` is in devDependencies for potential future use; current tests use the custom fixture in `fixtures.ts`.
+`playwright-webextext` is in devDependencies for potential future use; current tests use the custom extension fixture in `fixtures.ts`.
 
 When a test needs deterministic inspector target setup (distances/side panel), prefer triggering the inspector via a synthetic `mouseover` on a known element (see `toolbar-distances.spec.ts`) rather than relying on hit-testing/hover in the presence of the overlay.

e2e/pages/web.ts

@@ -33,7 +33,7 @@ export async function enableDomainInStorage(context: BrowserContext, domain: str
 }
 
 export async function enableStableDomainInStorage(context: BrowserContext) {
-	const domain = "127.0.0.1:51234";
+	const domain = "localhost:51234";
 	await enableDomainInStorage(context, domain);
 }
 

e2e/serve-fixtures.mjs

@@ -27,7 +27,7 @@ export default defineConfig({
 	/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
 	use: {
 		/* Base URL to use in actions like `await page.goto('/')`. */
-		baseURL: "http://127.0.0.1:51234",
+		baseURL: "http://localhost:51234",
 
 		/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
 		trace: "on-first-retry",
@@ -63,8 +63,8 @@ export default defineConfig({
 	],
 	timeout: process.env.CI ? 30_000 : 5_000,
 	webServer: {
-		command: "node e2e/serve-fixtures.mjs 51234",
-		url: "http://127.0.0.1:51234/inspector-playground.html",
+		command: "pnpm exec vite preview --host localhost --port 51234 --strictPort",
+		url: "http://localhost:51234/inspector-playground.html",
 		reuseExistingServer: true,
 		timeout: 60_000,
 	},