chore: Cypress HTML report

build/mocha-reporter.js

@@ -1,6 +1,5 @@
 const BaseReporter = require('mocha/lib/reporters/base');
 const SpecReporter = require('mocha/lib/reporters/spec');
-const JsonReporter = require('mocha/lib/reporters/json');
 const path = require('path');
 const fs = require('fs');
 
@@ -11,19 +10,31 @@ module.exports = class MultiReporter extends BaseReporter {
         new SpecReporter(runner, {});
 
         if (options.reporterOptions?.cypress) {
+            const MochawesomeReporter = require('cypress-mochawesome-reporter/lib/reporter');
+            this.mochawesome = new MochawesomeReporter(runner, {});
+
             new CypressJsonReporter(runner, {
                 reporterOption: {
                     output: 'cypress/reports/e2e.json',
                 },
             });
         } else {
+            const JsonReporter = require('mocha/lib/reporters/json');
             new JsonReporter(runner, {
                 reporterOption: {
                     output: 'reports/mocha.json',
                 },
             });
         }
     }
+
+    done(failures, exit) {
+        if (this.mochawesome) {
+            this.mochawesome.done(failures, exit);
+        } else {
+            exit(failures);
+        }
+    }
 };
 
 // custom json reporter for cypress (for some reason, calling JsonReporter does not work)

cypress.config.ts

@@ -1,5 +1,7 @@
 import { defineConfig } from 'cypress';
 import { configureVisualRegression } from 'cypress-visual-regression';
+// @ts-ignore
+import  cypressMochawesomeReporterPlugin from 'cypress-mochawesome-reporter/plugin';
 
 export default defineConfig({
     e2e: {
@@ -13,6 +15,7 @@ export default defineConfig({
         },
         setupNodeEvents(on) {
             configureVisualRegression(on);
+            cypressMochawesomeReporterPlugin(on);
 
             on('before:browser:launch', (browser, launchOptions) => {
                 // should be bigger than the largest viewport used + browser UI elements

cypress/support/e2e.ts

@@ -1,5 +1,26 @@
 import 'cypress-real-events';
+import 'cypress-mochawesome-reporter/register';
 import { addCompareSnapshotCommand } from 'cypress-visual-regression/dist/command';
+
 addCompareSnapshotCommand({
     errorThreshold: 0.1,
+    failSilently: !Cypress.config('isInteractive'),
 });
+
+if (!Cypress.config('isInteractive')) {
+    Cypress.Commands.overwrite('compareSnapshot', (originalFn, name, options = {}) => {
+        return originalFn(name, options)
+            .then(result => {
+                if (result.images.diff) {
+                    // @ts-ignore
+                    Cypress.Mochawesome.context.push({ title: 'Visual regression diff', value: 'data:image/png;base64,' + result.images.diff });
+                }
+
+                if (result.error) {
+                    throw new Error(result.error);
+                }
+
+                return result;
+            });
+    });
+}

cypress/tsconfig.json

@@ -3,7 +3,8 @@
         "types": [
             "cypress",
             "node",
-            "cypress-real-events"
+            "cypress-real-events",
+            "cypress-mochawesome-reporter"
         ]
     }
 }

package.json

@@ -37,6 +37,7 @@
     "@typescript-eslint/parser": "^7.16.0",
     "alive-server": "^1.3.0",
     "cypress": "^13.15.0",
+    "cypress-mochawesome-reporter": "^3.8.2",
     "cypress-real-events": "^1.13.0",
     "cypress-visual-regression": "^5.2.2",
     "esbuild-sass-plugin": "^3.3.0",
@@ -59,5 +60,8 @@
     "typedoc": "^0.26.7",
     "typedoc-plugin-extras": "^3.1.0",
     "typescript": "^5.6.2"
+  },
+  "resolutions": {
+    "yargs": "^16.2.0"
   }
 }