Setup Replay recording on CI

replayio · Apr 16, 2024 · dc5416c · dc5416c
1 parent d656db4
commit dc5416c
Show file tree

Hide file tree

Showing 4 changed files with 268 additions and 26 deletions.
diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
@@ -3,9 +3,6 @@ on:
   push:
     branches: main
   pull_request:
-env:
-  RECORD_REPLAY_API_KEY: rwk_yaEG8jo6gcisGHHoMj8SNoOMIHSbT7REuU5E1QnKCiL
-  RECORD_REPLAY_METADATA_TEST_RUN_TITLE: E2E Tests
 jobs:
   wait-for-vercel:
     name: Wait for vercel
@@ -78,17 +75,20 @@ jobs:
           path: |
             ~/.cache/ms-playwright
           key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
-      - run: npx playwright install --with-deps
-        if: steps.playwright-cache.outputs.cache-hit != 'true'
-      - run: npx playwright install-deps
+      - run: npx playwright install-deps chromium
         if: steps.playwright-cache.outputs.cache-hit != 'true'
 
+      - name: Get Replay Chromium
+        run: npx replayio update
+
       - name: Run Playwright tests
-        run: pnpm test:e2e
+        run: pnpm test:e2e:record
         env:
           APP_URL: ${{ needs.wait-for-vercel.outputs.preview_url }}
           AUTH0_BASE_URL: ${{ needs.wait-for-vercel.outputs.preview_url }}
+          RECORD_REPLAY_METADATA_TEST_RUN_TITLE: E2E Tests
           RECORD_REPLAY_TEST_RUN_ID: ${{ needs.generate-test-run-id.outputs.testRunId }}
+          REPLAY_API_KEY: ${{ secrets.REPLAY_API_KEY }}
           TEST_USER_API_KEY: ${{ secrets.TEST_USER_API_KEY }}
       - uses: actions/upload-artifact@v4
         if: always()

diff --git a/package.json b/package.json
@@ -12,8 +12,9 @@
     "start": "next start",
     "test": "jest",
     "test:watch": "jest --watch",
-    "test:e2e": "playwright test",
+    "test:e2e": "playwright test --project chromium",
     "test:e2e:debug": "playwright test --project chromium --workers 1 --headed",
+    "test:e2e:record": "REPLAY_PLAYWRIGHT_FIXTURE=1 playwright test --project replay-chromium",
     "typescript": "tsc --noEmit",
     "typescript:watch": "tsc --noEmit --watch"
   },
@@ -42,7 +43,8 @@
     "@graphql-codegen/client-preset": "4.2.4",
     "@graphql-typed-document-node/core": "^3.2.0",
     "@jest/globals": "^29.7.0",
-    "@playwright/test": "^1.42.1",
+    "@playwright/test": "1.38.1",
+    "@replayio/playwright": "3.0.0-alpha.3",
     "@testing-library/jest-dom": "^6.4.1",
     "@testing-library/react": "^14.2.1",
     "@types/cookie": "^0.6.0",
@@ -60,7 +62,7 @@
     "graphqurl": "^1.0.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "playwright": "^1.42.1",
+    "playwright": "1.38.1",
     "postcss": "^8.4.33",
     "strip-ansi": "^6",
     "tailwindcss": "^3.4.1",

diff --git a/playwright.config.ts b/playwright.config.ts
@@ -1,9 +1,14 @@
-import { resolve } from "path";
 import { defineConfig, devices } from "@playwright/test";
+import {
+  createReplayReporterConfig,
+  devices as replayDevices,
+} from "@replayio/playwright";
+import dotenv from "dotenv";
+import { resolve } from "path";
 
 // Read environment variables from file.
 // https://github.com/motdotla/dotenv
-require("dotenv").config({ path: resolve(__dirname, ".env.local") });
+dotenv.config({ path: resolve(__dirname, ".env.local") });
 
 // See https://playwright.dev/docs/test-configuration.
 export default defineConfig({
@@ -12,7 +17,15 @@ export default defineConfig({
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
   workers: 1,
-  reporter: "line",
+  reporter: process.env.CI
+    ? [
+        ["line"],
+        createReplayReporterConfig({
+          apiKey: process.env.REPLAY_API_KEY,
+          upload: true,
+        }) as [string, unknown],
+      ]
+    : "line",
   use: {
     launchOptions: {
       // ...
@@ -27,5 +40,9 @@ export default defineConfig({
       name: "chromium",
       use: { ...devices["Desktop Chrome"] },
     },
+    {
+      name: "replay-chromium",
+      use: { ...replayDevices["Replay Chromium"] },
+    },
   ],
 });