added visual regression testing

webclient/cypress.config.ts

@@ -1,5 +1,10 @@
 import { defineConfig } from "cypress";
+import { initPlugin } from "@frsource/cypress-plugin-visual-regression-diff/plugins";
 
 export default defineConfig({
-  e2e: {},
+  e2e: {
+    setupNodeEvents(on, config) {
+      initPlugin(on, config);
+    },
+  },
 });

webclient/cypress/e2e/visual.cy.ts

@@ -0,0 +1,53 @@
+describe("Visual change", () => {
+  it("main", () => {
+    cy.visit("http://localhost:3000/");
+    cy.contains("Standorte");
+    cy.matchImage();
+  });
+  it("search", () => {
+    cy.visit("http://localhost:3000/search?q=mw2001");
+    cy.contains("Räume");
+    cy.matchImage();
+  });
+  it("search-bar", () => {
+    cy.visit("http://localhost:3000/");
+    cy.get("input").type("fsmb");
+    cy.wait(500);
+    cy.matchImage();
+  });
+  it("about/privacy", () => {
+    cy.visit("http://localhost:3000/about/privacy");
+    cy.contains("Privacy");
+    cy.matchImage();
+  });
+  it("about/datenschutz", () => {
+    cy.visit("http://localhost:3000/about/datenschutz");
+    cy.contains("Datenschutz");
+    cy.matchImage();
+  });
+  it("about/ueber-uns", () => {
+    cy.visit("http://localhost:3000/about/ueber-uns");
+    cy.contains("Über Navigatum");
+    cy.matchImage();
+  });
+  it("about/about-us", () => {
+    cy.visit("http://localhost:3000/about/ueber-uns");
+    cy.contains("About us");
+    cy.matchImage();
+  });
+  it("about/impressum", () => {
+    cy.visit("http://localhost:3000/about/impressum");
+    cy.contains("Impressum");
+    cy.matchImage();
+  });
+  it("about/imprint", () => {
+    cy.visit("http://localhost:3000/about/imprint");
+    cy.contains("Imprint");
+    cy.matchImage();
+  });
+  it("api", () => {
+    cy.visit("http://localhost:3000/api");
+    cy.contains("Api");
+    cy.matchImage();
+  });
+});

webclient/cypress/support/e2e.ts

@@ -1,20 +1,2 @@
-// ***********************************************************
-// This example support/e2e.ts 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 commands.js using ES2015 syntax:
 import "./commands";
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
+import "@frsource/cypress-plugin-visual-regression-diff";

webclient/package.json

@@ -25,6 +25,7 @@
     "vue-router": "4.2.5"
   },
   "devDependencies": {
+    "@frsource/cypress-plugin-visual-regression-diff": "^3.3.10",
     "@intlify/unplugin-vue-i18n": "1.5.0",
     "@rushstack/eslint-patch": "1.5.1",
     "@types/swagger-ui-dist": "3.30.4",
@@ -33,7 +34,7 @@
     "@vue/eslint-config-typescript": "12.0.0",
     "@vue/tsconfig": "0.4.0",
     "@yankeeinlondon/link-builder": "1.2.1",
-    "cypress": "13.5.0",
+    "cypress": "13.5.1",
     "eslint": "8.53.0",
     "eslint-plugin-vue": "9.18.1",
     "isomorphic-fetch": "3.0.0",