Install Replay Playwright plug-in and update Playwright

package.json

@@ -13,11 +13,8 @@
   },
   "dependencies": {
     "@js-temporal/polyfill": "^0.3.0",
-    "@playwright/test": "^1.17.1",
     "history": "^5.2.0",
     "jsurl2": "^2.1.0",
-    "playwright-aws-lambda": "^0.7.0",
-    "playwright-core": "^1.17.1",
     "prism-react-renderer": "^1.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -28,10 +25,14 @@
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^12.0.7",
+    "@playwright/test": "latest",
+    "@replayio/playwright": "3.0.0-alpha.13",
     "btoa": "^1.2.1",
     "eslint": "^8.6.0",
     "eslint-config-next": "12.0.7",
     "next": "latest",
+    "playwright-aws-lambda": "latest",
+    "playwright-core": "latest",
     "prettier": "^2.5.1"
   }
 }

playwright.config.js

@@ -1,3 +1,5 @@
+const { devices: replayDevices } = require("@replayio/playwright");
+
 const config = {
   expect: {
     toMatchSnapshot: {
@@ -7,20 +9,39 @@ const config = {
     },
   },
 
-  reporter: 'html',
+  projects: [
+    {
+      name: "replay-chromium",
+      use: { ...replayDevices["Replay Chromium"] },
+    },
+  ],
+
+  reporter: [
+    [
+      "@replayio/playwright/reporter",
+      {
+        apiKey: process.env.REPLAY_API_KEY,
+        upload: true,
+      },
+    ],
+    ["line"],
+  ],
+
+  snapshotPathTemplate: "{snapshotDir}/{testFilePath}-snapshots/{arg}{ext}",
+
   use: {
     // Uncomment for easier local debugging
     // headless: false,
     // launchOptions: {
     //   slowMo: 1000,
     // },
 
-    browserName: 'chromium',
+    browserName: "chromium",
 
     viewport: {
       width: 1024,
       height: 800,
-    }
+    },
   },
 };