enable Cypress video recording with Chrome browser

Author: kstekovi

.github/workflows/manual-test-matrix-workflow.yaml

@@ -11,34 +11,34 @@ jobs:
       matrix:
         specs:
           [
-            "datasource",
-            "interface",
-            "path",
             "batch-jberet",
             "core-management",
+            "datasource",
             "deployment-scanner",
             "distributable-web",
             "ee",
             "ejb",
             "elytron",
             "elytron-oidc-client",
             "health",
+            "homepage",
+            "interface",
             "io",
             "jmx",
             "jpa",
             "jsf",
             "mail",
-            "microprofile",
             "metrics",
+            "microprofile",
+            "path",
             "runtime",
             "security-manager",
+            "smoke",
             "system-property",
             "transaction",
-            "weld",
-            "homepage",
-            "smoke",
-            "update-manager",
             "undertow",
+            "update-manager",
+            "weld",
           ]
         exclude:
           - specs: "update-manager"
@@ -71,15 +71,15 @@ jobs:
       - name: "Run compile"
         run: "npm run compile"
       - name: "Run test(s)"
-        run: "npm run test:compiled -- --browser=firefox --specs=packages/testsuite/cypress/e2e/${{ matrix.specs }}"
+        run: "npm run test:compiled -- --browser=chrome --specs=packages/testsuite/cypress/e2e/${{ matrix.specs }}"
       - name: "Archive test report(s) and video(s)"
         if: ${{ !cancelled() }}
         uses: actions/upload-artifact@v4
         with:
           name: "${{ github.run_id}}-${{ strategy.job-index }}-artifacts"
           path: |
-            packages/testsuite/results
-            packages/testsuite/cypress/videos
+            results
+            cypress/videos
   process_report:
     name: "Collect results & deploy GH pages"
     needs: test_matrix
@@ -97,7 +97,7 @@ jobs:
       - name: "Generate Mochawesome Report"
         run: mochawesome-merge "./*-artifacts/results/packages/testsuite/cypress/e2e/*.json" > mochawesome.json
       - name: "Copy video assets"
-        run: copyfiles -u 3 "./*-artifacts/packages/testsuite/cypress/videos/*.mp4" mochawesome-report/assets/videos
+        run: copyfiles -u 2 "./*-artifacts/cypress/videos/*.mp4" mochawesome-report/assets/videos
       - name: "Create GH Pages content"
         run: marge mochawesome.json -f index.html
       - name: "Get time info"

.github/workflows/scheduled-run-all-tests-workflow.yaml

@@ -12,33 +12,34 @@ jobs:
       matrix:
         specs:
           [
-            "datasource",
-            "interface",
-            "path",
             "batch-jberet",
             "core-management",
+            "datasource",
             "deployment-scanner",
             "distributable-web",
             "ee",
             "ejb",
             "elytron",
             "elytron-oidc-client",
             "health",
+            "homepage",
+            "interface",
             "io",
             "jmx",
             "jpa",
             "jsf",
             "mail",
             "metrics",
+            "microprofile",
+            "path",
             "runtime",
             "security-manager",
+            "smoke",
             "system-property",
             "transaction",
-            "weld",
-            "homepage",
-            "smoke",
-            "update-manager",
             "undertow",
+            "update-manager",
+            "weld",
           ]
         exclude:
           - specs: "update-manager"
@@ -78,8 +79,8 @@ jobs:
         with:
           name: "${{ github.run_id}}-${{ strategy.job-index }}-artifacts"
           path: |
-            packages/testsuite/results
-            packages/testsuite/cypress/videos
+            results
+            cypress/videos
   process_report:
     name: "Collect results & deploy GH pages"
     if: ${{ !cancelled() }}
@@ -97,7 +98,7 @@ jobs:
       - name: "Generate Mochawesome Report"
         run: mochawesome-merge "./*-artifacts/results/packages/testsuite/cypress/e2e/*.json" > mochawesome.json
       - name: "Copy video assets"
-        run: copyfiles -u 3 "./*-artifacts/packages/testsuite/cypress/videos/*.mp4" mochawesome-report/assets/videos
+        run: copyfiles -u 2 "./*-artifacts/cypress/videos/*.mp4" mochawesome-report/assets/videos
       - name: "Create GH Pages content"
         run: marge mochawesome.json -f index.html
       - name: "Get time info"

README.md

@@ -54,11 +54,14 @@ npm run develop
 ```
 
 - If you want to execute whole testsuite execute `npm test`
-
 - It is also possible to run on specific browser by supplying `--browser` argument, e.g
+- Chrome is the default browser and is recommended for video recording. Firefox may produce black videos.
+- For debugging purposes, you can run tests in headed mode (visible browser window) by adding `--headed` flag:
 
 ```
-npm test -- --browser=chrome
+npm test -- --browser=firefox --headed
+or
+npm test -- --browser=chrome --headed --specs="packages/testsuite/cypress/e2e/homepage/test-homepage.cy.ts"
 ```
 
 - It is possible to reduce the amount of specs executed by passing `--specs` flag. It also supports glob patterns, e.g to execute only `homepage` related tests, run
@@ -81,7 +84,7 @@ npm run test:compiled -- --specs="packages/testsuite/cypress/e2e/homepage/test-h
 HAL_IMAGE=quay.io/myorg/hal WILDFLY_IMAGE=quay.io/myorg/wildfly npm test ...
 ```
 
-- For debugging purposes videos (and screenshots) of failed tests are stored after the test run (works only with chrome).
+- For debugging purposes, videos and screenshots of failed tests are stored after the test run in `cypress/videos` and `cypress/screenshots` directories. Video recording works best with Chrome browser.
 
 ## Available environment properties
 

cypress.config.ts

@@ -67,7 +67,8 @@ export default defineConfig({
     configFile: "reporter-config.json",
   },
   video: true,
-  videoCompression: false,
+  videoCompression: 32,
+  screenshotOnRunFailure: true,
   e2e: {
     supportFile: "packages/testsuite/cypress/support/e2e.ts",
     specPattern: "packages/testsuite/cypress/e2e/**/*.cy.ts",

package.json

@@ -30,7 +30,6 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@cypress/xvfb": "1.2.4",
     "@types/command-line-args": "5.2.3",
     "@types/mochawesome": "6.2.4",
     "@types/portscanner": "2.1.4",

packages/testsuite/run-e2e-tests.ts

@@ -5,12 +5,13 @@ import { OptionDefinition } from "command-line-args";
 import path from "path";
 
 const optionDefinitions: OptionDefinition[] = [
-  { name: "browser", type: String, defaultValue: "firefox" },
+  { name: "browser", type: String, defaultValue: "chrome" },
   {
     name: "specs",
     type: String,
     defaultValue: "packages/testsuite/cypress/e2e/**/*.cy.ts",
   },
+  { name: "headed", type: Boolean, defaultValue: false },
 ];
 
 (async () => {
@@ -20,6 +21,7 @@ const optionDefinitions: OptionDefinition[] = [
   const projectRoot = path.resolve(__dirname, "..", "..", "..");
   const testRunResult = await cypress.run({
     browser: options.browser as string,
+    headed: options.headed as boolean,
     project: projectRoot,
     configFile: path.join(projectRoot, "cypress.config.ts"),
     env: {