Merge pull request #108 from replayio-public/feature/PRO-697-reapply-…

…replay-setup

Set up Replay again

.github/workflows/main.yml

@@ -87,6 +87,7 @@ jobs:
           # determine the unique run id necessary to re-run the checks
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           DEBUG: "cypress:server:args"
+          REPLAY_API_KEY: ${{ secrets.REPLAY_API_KEY }}
 
   # ui-chrome-mobile-tests:
   #   timeout-minutes: 15

cypress.config.ts

@@ -7,6 +7,7 @@ import codeCoverageTask from "@cypress/code-coverage/task";
 import { devServer } from "@cypress/vite-dev-server";
 import { defineConfig } from "cypress";
 import { mergeConfig, loadEnv } from "vite";
+import { plugin as replayPlugin, wrapOn } from "@replayio/cypress";
 
 dotenv.config({ path: ".env.local" });
 dotenv.config();
@@ -97,9 +98,17 @@ module.exports = defineConfig({
     viewportHeight: 1000,
     viewportWidth: 1280,
     experimentalRunAllSpecs: true,
-    setupNodeEvents(on, config) {
+    setupNodeEvents(cyOn, config) {
       const testDataApiEndpoint = `${config.env.apiUrl}/testData`;
 
+      const on = wrapOn(cyOn);
+
+      replayPlugin(on, config, {
+        upload: true, // automatically upload your replays to DevTools
+
+        apiKey: process.env.REPLAY_API_KEY,
+      });
+
       const queryDatabase = ({ entity, query }, callback) => {
         const fetchData = async (attrs) => {
           const { data } = await axios.get(`${testDataApiEndpoint}/${entity}`);

cypress/support/e2e.ts

@@ -1,5 +1,6 @@
 // @ts-check
 import "@cypress/code-coverage/support";
+import "@replayio/cypress/support";
 import "./commands";
 import { isMobile } from "./utils";
 

package.json

@@ -57,6 +57,7 @@
     "@faker-js/faker": "6.1.2",
     "@percy/cli": "^1.27.4",
     "@percy/cypress": "3.1.2",
+    "@replayio/cypress": "^3.0.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@types/bcryptjs": "2.4.2",