Merge pull request #1410 from firebase/e2e-build-before-playwright

fix(e2e): build packages before Playwright starts dev servers

Author: russellwheatley

LOCAL_DEVELOPMENT.md

@@ -6,7 +6,7 @@ This guide walks you through running FirebaseUI Web locally so you can test feat
 
 Make sure you have these installed:
 
-- [Node.js](https://nodejs.org/) v18+ locally; **CI uses v24** — use Node 24 for pre-push verification to match CI ([change-authoring-verification.md](developer-docs/playbooks/change-authoring-verification.md))
+- [Node.js](https://nodejs.org/) v24.15+ locally; **CI uses v24.18** — match CI for pre-push verification ([change-authoring-verification.md](developer-docs/playbooks/change-authoring-verification.md))
 - [pnpm](https://pnpm.io/) — if you have Node.js 18+, [corepack](https://nodejs.org/api/corepack.html) can install pnpm on demand when you run it
 - [Firebase CLI](https://firebase.google.com/docs/cli):
   ```bash

developer-docs/decisions.md

@@ -30,7 +30,7 @@ Example apps are verified with **Playwright smoke tests**, not full user-flow e2
 
 ## AD-4: Playwright-managed dev servers, serial, shared emulator
 
-Each example has a **unique e2e port** — see [examples-inventory.md](architecture/examples-inventory.md). Playwright's **top-level** `webServer` (one at a time, selected via `E2E_PROJECT`) starts each UI example's dev server, waits for its URL, and stops it — replacing hand-rolled preflight/postflight/PID scripts. Execution is **serial** (`workers: 1`) for resource predictability and clean logs; because ports are unique, parallelization is possible later but deferred ([Deferred](work-queues/playwright-e2e-smoke.md#deferred)). **`globalSetup`** builds packages (`build:packages`, asserting `dist/` exists — examples consume built `@firebase-oss/ui-*`), ensures a single Auth emulator on `:9099` for the whole run (reuse-aware), and starts it when not already running; **`globalTeardown`** stops what globalSetup started unless the serial runner is mid-suite (`E2E_KEEP_EMULATOR=1`). Angular reuses its package `start` semantics (`pnpm clean && ng serve`) rather than duplicating the `.angular/cache` clean.
+Each example has a **unique e2e port** — see [examples-inventory.md](architecture/examples-inventory.md). Playwright's **top-level** `webServer` (one at a time, selected via `E2E_PROJECT`) starts each UI example's dev server, waits for its URL, and stops it — replacing hand-rolled preflight/postflight/PID scripts. Execution is **serial** (`workers: 1`) for resource predictability and clean logs; because ports are unique, parallelization is possible later but deferred ([Deferred](work-queues/playwright-e2e-smoke.md#deferred)). Supported root entrypoints build packages **before Playwright starts the dev server** (`test:e2e` once for the suite; `test:e2e:<example>` once for that project), preventing Vite/Angular from observing partially rebuilt `dist/` files. **`globalSetup`** asserts the required package artifacts exist, ensures a single Auth emulator on `:9099` for the whole run (reuse-aware), and starts it when not already running; **`globalTeardown`** stops what globalSetup started unless the serial runner is mid-suite (`E2E_KEEP_EMULATOR=1`). Angular reuses its package `start` semantics (`pnpm clean && ng serve`) rather than duplicating the `.angular/cache` clean.
 
 ---
 

developer-docs/work-queues/playwright-e2e-smoke.md

@@ -59,7 +59,7 @@ scripts/e2e-run.mjs (pnpm test:e2e)
 
 - **Serial:** `workers: 1`; `E2E_PROJECT` selects both the single Playwright project and the top-level `webServer`, so one dev server is up at a time.
 - **Emulator:** `globalSetup` ensures `:9099` is reachable (starts via `npx firebase-tools` when not already running); serial runner sets `E2E_KEEP_EMULATOR=1` so teardown does not stop it between examples; `pnpm emulators` remains the first-class manual target ([LOCAL_DEVELOPMENT.md](../../LOCAL_DEVELOPMENT.md)).
-- **Per-example debug:** `pnpm test:e2e:react` runs one project; `globalSetup` starts the emulator with reuse if not already running.
+- **Per-example debug:** `pnpm test:e2e:react` builds packages before Playwright starts Vite, then runs one project; `globalSetup` asserts `dist/` and starts the emulator with reuse if not already running.
 
 # Example ports, commands, and root scripts
 

e2e/global-setup.ts

@@ -97,24 +97,11 @@ function assertPackagesBuilt(): void {
 
   if (missing.length > 0) {
     throw new Error(
-      `Expected built package artifacts are missing after build:packages:\n${missing.map((entry) => `  - ${entry}`).join("\n")}`
+      `Expected built package artifacts are missing. Run pnpm build:packages before Playwright:\n${missing.map((entry) => `  - ${entry}`).join("\n")}`
     );
   }
 }
 
-function runBuildPackages(): void {
-  try {
-    execSync("pnpm build:packages", {
-      cwd: REPO_ROOT,
-      stdio: "inherit",
-    });
-  } catch {
-    throw new Error("pnpm build:packages failed — examples require built @firebase-oss/ui-* packages");
-  }
-
-  assertPackagesBuilt();
-}
-
 function writeEmulatorState(state: EmulatorState): void {
   mkdirSync(STATE_DIR, { recursive: true });
   writeFileSync(STATE_FILE, JSON.stringify(state, null, 2));
@@ -161,11 +148,7 @@ function startAuthEmulator(version: string): ChildProcess {
 }
 
 export default async function globalSetup(): Promise<void> {
-  if (process.env.E2E_SKIP_BUILD_PACKAGES === "1") {
-    assertPackagesBuilt();
-  } else {
-    runBuildPackages();
-  }
+  assertPackagesBuilt();
 
   if (await isAuthEmulatorReachable()) {
     const existing = readEmulatorState();

package.json

@@ -14,12 +14,12 @@
     "format:write": "prettier --write **/{src,tests}/**/*.{ts,tsx}",
     "test": "pnpm --filter=@firebase-oss/ui-core run test && pnpm --filter=@firebase-oss/ui-translations run test && pnpm --filter=@firebase-oss/ui-styles run test && pnpm --filter=@firebase-oss/ui-react run test && pnpm --filter=@firebase-oss/ui-shadcn run test && pnpm --filter=@firebase-oss/ui-angular run test",
     "test:e2e": "node scripts/e2e-run.mjs",
-    "test:e2e:react": "E2E_PROJECT=react pnpm --filter=e2e exec playwright test --project=react",
-    "test:e2e:shadcn": "E2E_PROJECT=shadcn pnpm --filter=e2e exec playwright test --project=shadcn",
-    "test:e2e:nextjs": "E2E_PROJECT=nextjs pnpm --filter=e2e exec playwright test --project=nextjs",
-    "test:e2e:nextjs-ssr": "E2E_PROJECT=nextjs-ssr pnpm --filter=e2e exec playwright test --project=nextjs-ssr",
-    "test:e2e:angular": "E2E_PROJECT=angular-example pnpm --filter=e2e exec playwright test --project=angular-example",
-    "test:e2e:custom-auth-server": "E2E_PROJECT=custom-auth-server pnpm --filter=e2e exec playwright test --project=custom-auth-server",
+    "test:e2e:react": "pnpm --filter=@firebase-oss/ui-react... build && E2E_PROJECT=react pnpm --filter=e2e exec playwright test --project=react",
+    "test:e2e:shadcn": "pnpm --filter=@firebase-oss/ui-shadcn... build && E2E_PROJECT=shadcn pnpm --filter=e2e exec playwright test --project=shadcn",
+    "test:e2e:nextjs": "pnpm --filter=@firebase-oss/ui-react... build && E2E_PROJECT=nextjs pnpm --filter=e2e exec playwright test --project=nextjs",
+    "test:e2e:nextjs-ssr": "pnpm --filter=@firebase-oss/ui-react... build && E2E_PROJECT=nextjs-ssr pnpm --filter=e2e exec playwright test --project=nextjs-ssr",
+    "test:e2e:angular": "pnpm --filter=@firebase-oss/ui-angular... build && E2E_PROJECT=angular-example pnpm --filter=e2e exec playwright test --project=angular-example",
+    "test:e2e:custom-auth-server": "pnpm build:packages && E2E_PROJECT=custom-auth-server pnpm --filter=e2e exec playwright test --project=custom-auth-server",
     "test:watch": "pnpm --filter=@firebase-oss/ui-core run test:unit:watch & pnpm --filter=@firebase-oss/ui-react run test:unit:watch & pnpm --filter=@firebase-oss/ui-angular run test:watch",
     "version:bump:all": "pnpm --filter=@firebase-oss/ui-core run version:bump && pnpm --filter=@firebase-oss/ui-translations run version:bump && pnpm --filter=@firebase-oss/ui-react run version:bump && pnpm --filter=@firebase-oss/ui-styles run version:bump && pnpm --filter=@firebase-oss/ui-angular run version:bump",
     "publish:tags:all": "pnpm i && pnpm --filter=@firebase-oss/ui-core run publish:tags && pnpm --filter=@firebase-oss/ui-translations run publish:tags && pnpm --filter=@firebase-oss/ui-react run publish:tags && pnpm --filter=@firebase-oss/ui-styles run publish:tags && pnpm --filter=@firebase-oss/ui-angular run publish:tags",

scripts/e2e-run.mjs

@@ -48,7 +48,6 @@ function runExample(example) {
     env: {
       ...process.env,
       E2E_PROJECT: example,
-      E2E_SKIP_BUILD_PACKAGES: "1",
       E2E_KEEP_EMULATOR: "1",
     },
   });