Record Playwright tests with Replay

bvaughn · May 1, 2024 · fbfeae2 · fbfeae2
1 parent 8f89ea8
commit fbfeae2
Show file tree

Hide file tree

Showing 5 changed files with 813 additions and 14 deletions.
diff --git a/.github/workflows/e2e-ci.yml b/.github/workflows/e2e-ci.yml
@@ -16,4 +16,4 @@ jobs:
       - name: Build NPM package
         run: pnpm prerelease
       - name: Run Playwright tests
-        run: cd packages/react-resizable-panels-website && pnpm test:e2e
+        run: cd packages/react-resizable-panels-website && pnpm test:e2e --project replay-chromium
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
   "devDependencies": {
     "@babel/preset-typescript": "^7.22.5",
     "@playwright/test": "^1.37.0",
+    "@replayio/playwright": "3.0.0-alpha.4",
     "@types/jest": "^29.5.3",
     "@types/node": "^18.17.5",
     "@types/react": "latest",

diff --git a/packages/react-resizable-panels-website/playwright.config.ts b/packages/react-resizable-panels-website/playwright.config.ts
@@ -1,8 +1,24 @@
 import type { PlaywrightTestConfig } from "@playwright/test";
+import { devices as replayDevices } from "@replayio/playwright";
 
 const { DEBUG } = process.env;
 
 const config: PlaywrightTestConfig = {
+  projects: [
+    {
+      name: "replay-chromium",
+      use: { ...(replayDevices["Replay Chromium"] as any) },
+    },
+  ],
+  reporter: [
+    [
+      "@replayio/playwright/reporter",
+      {
+        apiKey: process.env.REPLAY_API_KEY,
+        upload: true,
+      },
+    ],
+  ],
   use: {
     browserName: "chromium",
     headless: true,

diff --git a/packages/react-resizable-panels-website/tests/Storage.spec.ts b/packages/react-resizable-panels-website/tests/Storage.spec.ts
@@ -27,7 +27,7 @@ const panelGroupABC = createElement(
 
 test.describe("Storage", () => {
   test.describe("localStorage (default)", () => {
-    test("should restore previous layout if autoSaveId prop has been provided", async ({
+    test.only("should restore previous layout if autoSaveId prop has been provided", async ({
       page,
     }) => {
       await goToUrl(page, panelGroupABC);