Merge pull request #552 from patilatharv/feat/wdio-video-login-533

test(bdd): add WDIO video recording for “Wrong login” scenario (#533)

Author: dadiorchen

.gitignore

@@ -28,4 +28,7 @@ web-build/
 .env
 
 #asdf
-.tool-versions
+.tool-versions
+
+# Test videos
+apps/bdd/test-videos/

apps/bdd/features/iteration3/send-token-by-email.feature

@@ -10,6 +10,5 @@ Feature: send token to someone by email address
     And I input the email address and click 'submit'
     Then I should see a confirmation message that the token has been sent
     And I should receive an email with the token details
-      Email content:
-        | subject                     | Greenstand Token sent to you! |
-        | body                        | You have received a token from wallet-1. Please click link below to claim it. |
+      | subject | Greenstand Token sent to you! |
+      | body    | You have received a token from wallet-1. Please click link below to claim it. |

apps/bdd/package.json

@@ -5,30 +5,33 @@
   "description": "WebdriverIO End-to-End Tests for Treetracker Wallet App",
   "main": "index.js",
   "scripts": {
-    "wdio": "wdio run ./wdio.conf.js",
-    "wdio:watch": "wdio run ./wdio.conf.js --watch",
+    "wdio": "wdio run ./wdio.conf.ts",
+    "wdio:watch": "wdio run ./wdio.conf.ts --watch",
     "type-check": "tsc --noEmit",
     "build": "tsc",
-    "test": "wdio run ./wdio.conf.js",
-    "test:local": "wdio run ./wdio.conf.js --baseUrl http://localhost:3000",
-    "test:headless": "wdio run ./wdio.conf.js --headless",
-    "test:login": "wdio run ./wdio.conf.js --spec ./features/login.feature",
-    "test:debug": "wdio run ./wdio.conf.js --logLevel debug",
+    "test": "wdio run ./wdio.conf.ts",
+    "test:local": "wdio run ./wdio.conf.ts --baseUrl http://localhost:3000",
+    "test:headless": "wdio run ./wdio.conf.ts --headless",
+    "test:login": "wdio run ./wdio.conf.ts --spec ./features/login.feature",
+    "test:debug": "wdio run ./wdio.conf.ts --logLevel debug",
     "test:update-driver": "yarn add -D chromedriver@latest"
   },
   "devDependencies": {
     "@badisi/wdio-harness": "^4.2.0",
     "@testing-library/webdriverio": "^3.2.1",
     "@types/jasmine": "^5.1.8",
-    "@types/node": "^24.2.1",
+    "@types/node": "^24.5.0",
     "@wdio/cli": "^9.18.4",
     "@wdio/cucumber-framework": "^9.18.0",
     "@wdio/globals": "^9.17.0",
     "@wdio/jasmine-framework": "^9.18.0",
     "@wdio/local-runner": "^9.18.4",
     "@wdio/spec-reporter": "^9.18.0",
-    "chromedriver": "136.0.0",
+    "chromedriver": "^140.0.2",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.9.2",
     "wdio-chromedriver-service": "^8.1.1",
+    "wdio-video-reporter": "^6.1.1",
     "wdio-wait-for": "^3.1.0"
   }
 }

apps/bdd/wdio.conf.ts

@@ -1,4 +1,7 @@
 import type { Options } from "@wdio/types";
+import path from "node:path";
+// Video reporter for recording test execution - useful for debugging and demos
+import Video from "wdio-video-reporter";
 
 export const config: Options.Testrunner = {
   //
@@ -140,7 +143,20 @@ export const config: Options.Testrunner = {
   // Test reporter for stdout.
   // The only one supported by default is 'dot'
   // see also: https://webdriver.io/docs/dot-reporter
-  reporters: ["spec"],
+  reporters: [
+    "spec",
+    // Video reporter: Records test execution for debugging and analysis
+    // Videos are saved to apps/bdd/test-videos/ directory
+    [
+      Video as any,
+      {
+        saveAllVideos: true, // record all test runs including passing tests
+        outputDir: path.resolve(__dirname, "test-videos"), // output directory for video files
+        videoSlowdownMultiplier: 1,
+        videoFormat: "mp4", // MP4 format for better compatibility
+      },
+    ],
+  ],
 
   // If you are using Cucumber you need to specify the location of your step definitions.
   cucumberOpts: {