build playground on playwright global setup instead of building before every test group

Author: aehnh

packages/tests-e2e/src/complete/utils/playground.ts

@@ -21,14 +21,27 @@ function getPlaygroundDir(): string {
   }
 }
 
-function getPlaygroundArgs(port: number): string[] {
+function getPlaygroundBuildArgs(): string[] | null {
   switch (PLAYGROUND_TYPE) {
     case 'react':
-      return ['run', 'build-and-preview', '--', '--port', port.toString()];
+      return ['run', 'build'];
     case 'web-js':
-      return ['run', 'build-and-preview', '--', '-l', port.toString()];
+      return ['run', 'build'];
     case 'web-js-script':
-      return ['run', 'build-and-preview', '--', '-l', port.toString()];
+      return null;
+    default:
+      throw new Error(`Unknown PLAYGROUND_TYPE: ${PLAYGROUND_TYPE}`);
+  }
+}
+
+function getPlaygroundStartArgs(port: number): string[] {
+  switch (PLAYGROUND_TYPE) {
+    case 'react':
+      return ['run', 'preview', '--', '--port', port.toString()];
+    case 'web-js':
+      return ['run', 'serve', '--', '-l', port.toString()];
+    case 'web-js-script':
+      return ['run', 'serve', '--', '-l', port.toString()];
     default:
       throw new Error(`Unknown PLAYGROUND_TYPE: ${PLAYGROUND_TYPE}`);
   }
@@ -41,7 +54,7 @@ export async function spawnPlaygroundNew(projectId: string): Promise<{
   const port = await getPort();
 
   const playgroundDir = getPlaygroundDir();
-  const server = spawn('npm', getPlaygroundArgs(port), {
+  const server = spawn('npm', getPlaygroundStartArgs(port), {
     cwd: playgroundDir,
     env: {
       ...process.env,
@@ -76,7 +89,29 @@ export default async function installPlaygroundDeps() {
     installProcess.on('close', (code: number) => {
       if (code === 0) {
         console.log(`[Global Setup] Dependencies installed successfully in ${playgroundDir}.`);
-        resolve();
+        const buildCommand = getPlaygroundBuildArgs();
+        if (!buildCommand) {
+          console.log(`[Global Setup] No build step required for ${PLAYGROUND_TYPE}.`);
+          return resolve();
+        }
+        const buildProcess = spawn('npm', buildCommand, {
+          cwd: playgroundDir,
+          stdio: 'inherit',
+          shell: true,
+        });
+        buildProcess.on('close', (buildCode: number) => {
+          if (buildCode === 0) {
+            console.log(`[Global Setup] Playground built successfully in ${playgroundDir}.`);
+            resolve();
+          } else {
+            reject(
+              new Error(`[Global Setup] npm run build failed in ${playgroundDir} with code ${buildCode}`),
+            );
+          }
+        });
+        buildProcess.on('error', (err: Error) => {
+          reject(new Error(`[Global Setup] Failed to start build process: ${err.message}`));
+        });
       } else {
         reject(new Error(`[Global Setup] npm install failed in ${playgroundDir} with code ${code}`));
       }

packages/tests-e2e/src/connect/utils/Playground.ts

@@ -84,7 +84,7 @@ export default async function installPlaygroundDeps() {
             resolve();
           } else {
             reject(
-              new Error(`[Global Setup] npm run build-and-preview failed in ${playgroundDir} with code ${buildCode}`),
+              new Error(`[Global Setup] npm run build failed in ${playgroundDir} with code ${buildCode}`),
             );
           }
         });

playground/react/package.json

@@ -8,7 +8,6 @@
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
-    "build-and-preview": "tsc && vite build && vite preview",
     "test": "vitest",
     "test:coverage": "vitest run --coverage"
   },

playground/web-js-script/package.json

@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "build-and-preview": "npx serve --single"
+    "serve": "npx serve --single"
   },
   "keywords": [],
   "author": "",

playground/web-js/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "start": "cross-env NODE_ENV=local webpack-dev-server --open --mode development",
     "build": "cross-env NODE_ENV=vercel webpack --mode production",
-    "build-and-preview": "cross-env NODE_ENV=vercel webpack --mode production && npx serve dist --single"
+    "serve": "npx serve dist --single"
   },
   "keywords": [],
   "author": "",