fix: add comprehensive port cleanup before test runs

- Create kill-all-ports.cjs script for both federated-css projects
- Run port cleanup before both legacy:e2e:ci and e2e:ci tests
- Increase delay to 2s when cleaning ports before Next.js servers
- Add logging to track port cleanup operations
- Add kill-port dependency to federated-css-react-ssr

This ensures all ports are properly cleaned up between webpack and rspack test runs in CI

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: ScriptedAlchemy

federated-css-react-ssr/package.json

@@ -8,11 +8,13 @@
     "build": "pnpm --parallel --filter federated-css-react-ssr_* build",
     "start": "pnpm --parallel --filter federated-css-react-ssr_* start",
     "e2e": "playwright test",
-    "e2e:ci": "playwright test --reporter=list",
+    "e2e:ci": "node scripts/kill-all-ports.cjs && playwright test --reporter=list",
+    "legacy:e2e:ci": "node scripts/kill-all-ports.cjs && playwright test --reporter=list",
     "e2e:headed": "playwright test --headed"
   },
   "devDependencies": {
     "@playwright/test": "^1.54.2",
+    "kill-port": "2.0.1",
     "react-jss": "10.10.0",
     "wait-on": "7.2.0"
   }

federated-css-react-ssr/scripts/kill-all-ports.cjs

@@ -0,0 +1,26 @@
+const kill = require('kill-port');
+
+async function killAllPorts() {
+  const exposePorts = [3001, 3002, 3003, 3004, 3005, 3006, 3007];
+  const shellPorts = [4000, 4001, 4002, 4003, 4004, 4005];
+  
+  const allPorts = [...exposePorts, ...shellPorts];
+  
+  console.log('[kill-all-ports] Killing all ports...');
+  
+  for (const port of allPorts) {
+    try {
+      await kill(port, 'tcp');
+      console.log(`[kill-all-ports] Killed port ${port}`);
+    } catch (e) {
+      // Port might not be in use, ignore
+    }
+  }
+  
+  console.log('[kill-all-ports] All ports killed.');
+}
+
+killAllPorts().catch(err => {
+  console.error('[kill-all-ports] Error:', err);
+  process.exit(1);
+});

federated-css/package.json

@@ -7,7 +7,8 @@
     "build": "pnpm --filter federated-css-mono_* --parallel build",
     "clean": "pnpm --filter federated-css-mono_* --parallel clean",
     "start:all": "pnpm --filter federated-css-mono_* --parallel start",
-    "e2e:ci": "playwright test --reporter=list",
+    "e2e:ci": "node scripts/kill-all-ports.cjs && playwright test --reporter=list",
+    "legacy:e2e:ci": "node scripts/kill-all-ports.cjs && playwright test --reporter=list",
     "start:expose-all": "pnpm --filter federated-css-mono_expose-* --parallel start",
     "start:react:css-styled-component": "pnpm --filter federated-css-mono_expose-* --filter @federated-css/css-and-styled-component --parallel start",
     "start:react:less-scss": "pnpm --filter federated-css-mono_expose-* --filter @federated-css/less-and-scss --parallel start",

federated-css/scripts/kill-all-ports.cjs

@@ -0,0 +1,27 @@
+const kill = require('kill-port');
+
+async function killAllPorts() {
+  const reactConsumerPorts = [3001, 3002, 3003, 3004, 3005, 3006, 3007];
+  const exposePorts = [4000, 4001, 4002, 4003, 4004, 4005, 4006, 4007];
+  const nextConsumerPorts = [8081, 8082, 8083, 8084];
+  
+  const allPorts = [...reactConsumerPorts, ...exposePorts, ...nextConsumerPorts];
+  
+  console.log('[kill-all-ports] Killing all ports...');
+  
+  for (const port of allPorts) {
+    try {
+      await kill(port, 'tcp');
+      console.log(`[kill-all-ports] Killed port ${port}`);
+    } catch (e) {
+      // Port might not be in use, ignore
+    }
+  }
+  
+  console.log('[kill-all-ports] All ports killed.');
+}
+
+killAllPorts().catch(err => {
+  console.error('[kill-all-ports] Error:', err);
+  process.exit(1);
+});

federated-css/scripts/start-all.cjs

@@ -120,8 +120,9 @@ async function main() {
   console.log('[federated-css] starting Next consumers (sequential dev servers)...');
   for (const { dir, port } of nextConsumers) {
     // Extra cleanup for each Next.js port in case previous one didn't clean up properly
+    console.log(`[federated-css] cleaning up port ${port} before starting ${dir}...`);
     await killPort(port);
-    await new Promise(resolve => setTimeout(resolve, 500)); // Small delay to ensure port is released
+    await new Promise(resolve => setTimeout(resolve, 2000)); // Longer delay to ensure port is released
     const cwd = path.join('consumers-nextjs', dir);
     const p = run('pnpm', ['-C', cwd, 'run', 'start']);
     procs.push(p);