Playwright Using NextJS Experimental Proxy

.github/workflows/e2e.yml

@@ -0,0 +1,115 @@
+name: E2E Tests
+
+on:
+    push:
+        branches: [main, e2e-tests]
+    pull_request:
+        branches: [main, e2e-tests]
+
+jobs:
+    playwright:
+        name: Playwright Tests
+        timeout-minutes: 60
+        runs-on: ubuntu-latest
+        container:
+            image: mcr.microsoft.com/playwright:v1.41.2-jammy
+
+        steps:
+            - uses: actions/checkout@v4
+
+            - name: Install dependencies
+              run: npm ci
+
+            - name: Build Next.js application
+              run: npm run build
+              env:
+                  NEXT_PUBLIC_WORKOS_REDIRECT_URI: ${{ vars.NEXT_PUBLIC_WORKOS_REDIRECT_URI }}
+
+            - name: Run Playwright tests
+              run: npx playwright test
+              env:
+                  # Test environment variables
+                  WORKOS_API_KEY: ${{ secrets.WORKOS_API_KEY }}
+                  WORKOS_CLIENT_ID: ${{ secrets.WORKOS_CLIENT_ID }}
+                  WORKOS_COOKIE_PASSWORD: ${{ secrets.WORKOS_COOKIE_PASSWORD }}
+                  TEST_BASE_URL: http://localhost:3000
+                  TEST_EMAIL: ${{ secrets.TEST_EMAIL }}
+                  TEST_PASSWORD: ${{ secrets.TEST_PASSWORD }}
+
+            - name: Upload Playwright Report
+              uses: actions/upload-artifact@v4
+              if: ${{ !cancelled() }}
+              with:
+                  name: playwright-report
+                  path: playwright-report/
+                  retention-days: 1
+
+            - name: Upload Test Results
+              uses: actions/upload-artifact@v4
+              if: ${{ !cancelled() }}
+              with:
+                  name: playwright-test-results
+                  path: test-results/
+                  retention-days: 1
+
+    cypress:
+        name: Cypress Tests
+        timeout-minutes: 60
+        runs-on: ubuntu-latest
+
+        steps:
+            - uses: actions/checkout@v4
+
+            - name: Setup Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 20
+                  cache: "npm"
+
+            - name: Install dependencies
+              run: npm ci
+
+            - name: Build Next.js application
+              run: npm run build
+              env:
+                  NEXT_PUBLIC_WORKOS_REDIRECT_URI: ${{ vars.NEXT_PUBLIC_WORKOS_REDIRECT_URI }}
+
+            - name: Start Next.js application
+              run: npm start &
+              env:
+                  # Runtime environment variables for server
+                  WORKOS_API_KEY: ${{ secrets.WORKOS_API_KEY }}
+                  WORKOS_CLIENT_ID: ${{ secrets.WORKOS_CLIENT_ID }}
+                  WORKOS_COOKIE_PASSWORD: ${{ secrets.WORKOS_COOKIE_PASSWORD }}
+                  PORT: 3000
+
+            - name: Wait for application to start
+              run: |
+                  timeout 30 bash -c 'until curl -s http://localhost:3000 > /dev/null; do sleep 1; done'
+
+            - name: Run Cypress tests
+              run: npm run test:cypress
+              env:
+                  # Test environment variables
+                  WORKOS_API_KEY: ${{ secrets.WORKOS_API_KEY }}
+                  WORKOS_CLIENT_ID: ${{ secrets.WORKOS_CLIENT_ID }}
+                  WORKOS_COOKIE_PASSWORD: ${{ secrets.WORKOS_COOKIE_PASSWORD }}
+                  TEST_BASE_URL: http://localhost:3000
+                  TEST_EMAIL: ${{ secrets.TEST_EMAIL }}
+                  TEST_PASSWORD: ${{ secrets.TEST_PASSWORD }}
+
+            - name: Upload Cypress Screenshots
+              uses: actions/upload-artifact@v4
+              if: failure()
+              with:
+                  name: cypress-screenshots
+                  path: cypress/screenshots
+                  retention-days: 1
+
+            - name: Upload Cypress Videos
+              uses: actions/upload-artifact@v4
+              if: failure()
+              with:
+                  name: cypress-videos
+                  path: cypress/videos
+                  retention-days: 1

next.config.js

@@ -1,4 +1,8 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  experimental: {
+    testProxy: process.env.NODE_ENV !== "production",
+  },
+};
 
 module.exports = nextConfig;