feat(test): replace cloudflare open-next build test with playwright tests (#7782)

* feat(test): replace cloudflare open-next build test with playwright tests

* fixup! feat(test): replace cloudflare open-next build test with playwright tests

simplify logic as suggested

* fixup! feat(test): replace cloudflare open-next build test with playwright tests

update forgotten env variable name in playwright.yml

* fixup! feat(test): replace cloudflare open-next build test with playwright tests

still accept VERCEL_PREVIEW_URL to make PR go green

* fixup! feat(test): replace cloudflare open-next build test with playwright tests

remove VERCEL_PREVIEW_URL

* fixup! feat(test): replace cloudflare open-next build test with playwright tests

avoid running a script taken from process.env

* fixup! feat(test): replace cloudflare open-next build test with playwright tests

add new getWebServerConfig function instead of using a ternary

* assert that the cloudflare:preview script is defined

Author: dario-piotrowicz

.github/workflows/cloudflare-open-next-build.yml renamed to .github/workflows/playwright-cloudflare-open-next.yml

@@ -4,7 +4,7 @@
 # REVIEWERS, please always double-check security practices before merging a PR that contains Workflow changes!!
 # AUTHORS, please only use actions with explicit SHA references, and avoid using `@master` or `@main` references or `@version` tags.
 
-name: Cloudflare OpenNext Build
+name: Playwright Tests on Cloudflare Open-Next
 
 on:
   push:
@@ -14,24 +14,17 @@ on:
     branches:
       - main
 
-defaults:
-  run:
-    # This ensures that the working directory is the root of the repository
-    working-directory: ./
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
 
 permissions:
   contents: read
   actions: read
 
-env:
-  # See https://turbo.build/repo/docs/reference/command-line-reference/run#--cache-dir
-  TURBO_ARGS: --cache-dir=.turbo/cache
-  # See https://turbo.build/repo/docs/reference/command-line-reference/run#--force
-  TURBO_FORCE: true
-
 jobs:
-  build-cloudflare-worker:
-    name: Build Cloudflare Worker
+  playwright:
+    name: Playwright Tests
     runs-on: ubuntu-latest
 
     steps:
@@ -58,5 +51,32 @@ jobs:
       - name: Install packages
         run: pnpm install --frozen-lockfile
 
-      - name: Build Cloudflare Worker
-        run: pnpm exec turbo run cloudflare:build:worker ${{ env.TURBO_ARGS }}
+      - name: Get Playwright version
+        id: playwright-version
+        working-directory: apps/site
+        run: echo "version=$(pnpm exec playwright --version | awk '{print $2}')" >> $GITHUB_OUTPUT
+
+      - name: Cache Playwright browsers
+        id: playwright-cache
+        uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.2.3
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-${{ runner.os }}-${{ steps.playwright-version.outputs.version }}
+
+      - name: Install Playwright Browsers
+        working-directory: apps/site
+        run: pnpm exec playwright install --with-deps
+
+      - name: Run Playwright tests
+        working-directory: apps/site
+        run: pnpm playwright
+        env:
+          PLAYWRIGHT_RUN_CLOUDFLARE_PREVIEW: true
+          PLAYWRIGHT_BASE_URL: http://127.0.0.1:8787
+
+      - name: Upload Playwright test results
+        if: always()
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        with:
+          name: playwright-report
+          path: apps/site/playwright-report/

.github/workflows/playwright.yml

@@ -97,7 +97,7 @@ jobs:
         working-directory: apps/site
         run: pnpm playwright
         env:
-          VERCEL_PREVIEW_URL: ${{ needs.get-vercel-preview.outputs.url }}
+          PLAYWRIGHT_BASE_URL: ${{ needs.get-vercel-preview.outputs.url }}
 
       - name: Upload Playwright test results
         if: always()

apps/site/playwright.config.ts

@@ -1,4 +1,6 @@
-import { defineConfig, devices } from '@playwright/test';
+import { defineConfig, devices, type Config } from '@playwright/test';
+
+import json from './package.json' with { type: 'json' };
 
 const isCI = !!process.env.CI;
 
@@ -10,11 +12,11 @@ export default defineConfig({
   retries: isCI ? 2 : 0,
   workers: isCI ? 1 : undefined,
   reporter: isCI ? [['html'], ['github']] : [['html']],
+  ...getWebServerConfig(),
   use: {
-    baseURL: process.env.VERCEL_PREVIEW_URL || 'http://127.0.0.1:3000',
+    baseURL: process.env.PLAYWRIGHT_BASE_URL || 'http://127.0.0.1:3000',
     trace: 'on-first-retry',
   },
-
   projects: [
     {
       name: 'chromium',
@@ -30,3 +32,21 @@ export default defineConfig({
     },
   ],
 });
+
+function getWebServerConfig(): Pick<Config, 'webServer'> {
+  if (!json.scripts['cloudflare:preview']) {
+    throw new Error('cloudflare:preview script not defined');
+  }
+
+  if (process.env.PLAYWRIGHT_RUN_CLOUDFLARE_PREVIEW) {
+    return {
+      webServer: {
+        command: 'pnpm turbo run cloudflare:preview',
+        url: process.env.PLAYWRIGHT_BASE_URL || 'http://127.0.0.1:3000',
+        timeout: 60_000 * 3,
+      },
+    };
+  }
+
+  return {};
+}