chore: add option to record tests with cypress to generate demo videos

cypress.config.ts

@@ -3,6 +3,7 @@
 import { defineConfig } from "cypress";
 
 //
+const RECORD = process.env["CYPRESS_RECORD"] === "true";
 
 export default defineConfig({
   chromeWebSecurity: false,
@@ -29,4 +30,5 @@ export default defineConfig({
     MAILDEV_SMTP_PORT: "1025",
     MAILDEV_API_PORT: "1080",
   },
+  video: RECORD,
 });

cypress/support/e2e.ts

@@ -1,19 +1,30 @@
-// ***********************************************************
-// This example support/index.js is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
 import "cypress-axe";
 import "cypress-maildev";
 
 import "./commands";
+
+const RECORD = Cypress.env("RECORD") === true;
+
+if (RECORD) {
+  ["visit", "click", "trigger", "type", "clear", "reload", "select"].forEach(
+    (command) => {
+      Cypress.Commands.overwrite(
+        command as unknown as keyof Cypress.Chainable<any>,
+        (originalFn, ...args) => {
+          const origVal = originalFn(...args);
+
+          return new Promise((resolve) => {
+            setTimeout(
+              () => {
+                resolve(origVal);
+              },
+              RECORD ? 2000 : 0,
+            );
+          });
+        },
+      );
+    },
+  );
+  Cypress.config("viewportWidth", 1920);
+  Cypress.config("viewportHeight", 1080);
+}