test: run e2e tests with both webpack and turbopack (#1018)

Author: vicb

.github/workflows/playwright.yml

@@ -19,15 +19,18 @@ jobs:
       - name: Install Playwright
         uses: ./.github/actions/setup-playwright
 
-      - name: Build the tool
-        run: pnpm build
-
-      - name: Build all workers
+      - name: Build workers (webpack)
         run: pnpm -r build:worker
 
-      - name: Run playwright tests
+      - name: Run playwright tests (webpack)
         run: pnpm e2e
 
+      - name: Build workers (turbopack)
+        run: pnpm -r build:worker-turbopack
+
+      - name: Run playwright tests (turbopack)
+        run: pnpm e2e-turbopack
+
       - name: Run playwright dev tests
         run: pnpm e2e:dev
 

examples/common/config-e2e.ts

@@ -1,5 +1,5 @@
 import { defineConfig, devices } from "@playwright/test";
-import type nodeProcess from "node:process";
+import { execSync } from "node:child_process";
 import { getAppPort, getInspectorPort, type AppName } from "./apps";
 
 declare const process: typeof nodeProcess;
@@ -15,6 +15,8 @@ export function configurePlaywright(
 		multipleBrowsers = false,
 		// Whether to run tests in single file in parallel
 		parallel = true,
+		// Use the turbopack runtime
+		useTurbopack = false,
 	} = {}
 ) {
 	const port = getAppPort(app, { isWorker });
@@ -23,15 +25,12 @@ export function configurePlaywright(
 	let command: string;
 	let timeout: number;
 	if (isWorker) {
+		// Do not build on CI - there is a preceding build step
+		command = isCI ? "" : `pnpm ${useTurbopack ? "build:worker-turbopack" : "build:worker"} && `;
+
 		const env = app === "r2-incremental-cache" ? "--env e2e" : "";
-		if (isCI) {
-			// Do not build on CI - there is a preceding build step
-			command = `pnpm preview:worker -- --port ${port} --inspector-port ${inspectorPort} ${env}`;
-			timeout = 800_000;
-		} else {
-			timeout = 800_000;
-			command = `pnpm preview -- --port ${port} --inspector-port ${inspectorPort} ${env}`;
-		}
+		command += `pnpm preview:worker -- --port ${port} --inspector-port ${inspectorPort} ${env}`;
+		timeout = 800_000;
 	} else {
 		timeout = 100_000;
 		command = `pnpm dev --port ${port}`;

examples/e2e/app-pages-router/e2e/playwright.config.ts

@@ -1,3 +1,3 @@
 import { configurePlaywright } from "../../../common/config-e2e";
 
-export default configurePlaywright("app-pages-router");
+export default configurePlaywright("app-pages-router", { useTurbopack: false });

examples/e2e/app-pages-router/e2e/playwright.turbopack.config.ts

@@ -0,0 +1,3 @@
+import { configurePlaywright } from "../../../common/config-e2e";
+
+export default configurePlaywright("app-pages-router", { useTurbopack: true });

examples/e2e/app-pages-router/open-next.turbopack.config.ts

@@ -0,0 +1,7 @@
+import config from "./open-next.config.js";
+
+export default {
+	...config,
+	// Override the build command to use Turbopack
+	buildCommand: "next build --turbopack",
+};

examples/e2e/app-pages-router/package.json

@@ -12,7 +12,9 @@
 		"build:worker": "pnpm opennextjs-cloudflare build",
 		"preview:worker": "pnpm opennextjs-cloudflare preview",
 		"preview": "pnpm build:worker && pnpm preview:worker",
-		"e2e": "playwright test -c e2e/playwright.config.ts"
+		"e2e": "playwright test -c e2e/playwright.config.ts",
+		"build:worker-turbopack": "pnpm opennextjs-cloudflare build --openNextConfigPath open-next.turbopack.config.ts",
+		"e2e-turbopack": "playwright test -c e2e/playwright.turbopack.config.ts"
 	},
 	"dependencies": {
 		"@opennextjs/cloudflare": "workspace:*",

examples/e2e/app-router/e2e/playwright.config.ts

@@ -1,3 +1,3 @@
 import { configurePlaywright } from "../../../common/config-e2e";
 
-export default configurePlaywright("app-router");
+export default configurePlaywright("app-router", { useTurbopack: false });

examples/e2e/app-router/e2e/playwright.turbopack.config.ts

@@ -0,0 +1,3 @@
+import { configurePlaywright } from "../../../common/config-e2e";
+
+export default configurePlaywright("app-router", { useTurbopack: true });

examples/e2e/app-router/open-next.turbopack.config.ts

@@ -0,0 +1,7 @@
+import config from "./open-next.config.js";
+
+export default {
+	...config,
+	// Override the build command to use Turbopack
+	buildCommand: "next build --turbopack",
+};

examples/e2e/app-router/package.json

@@ -12,7 +12,9 @@
 		"build:worker": "pnpm opennextjs-cloudflare build",
 		"preview:worker": "pnpm opennextjs-cloudflare preview",
 		"preview": "pnpm build:worker && pnpm preview:worker",
-		"e2e": "playwright test -c e2e/playwright.config.ts"
+		"e2e": "playwright test -c e2e/playwright.config.ts",
+		"build:worker-turbopack": "pnpm build:worker --openNextConfigPath open-next.turbopack.config.ts",
+		"e2e-turbopack": "playwright test -c e2e/playwright.turbopack.config.ts"
 	},
 	"dependencies": {
 		"@opennextjs/cloudflare": "workspace:*",