test: Überprüfung der Kartenladung, Kontextmenü und Geräte-URL-Erreichbarkeit

- Stellt sicher, dass die Karte erfolgreich geladen wird und sichtbar ist.
- Simuliert Rechtsklick auf Marker und überprüft, ob das Kontextmenü erscheint.
- Validiert die Sichtbarkeit des Menüeintrags "Station öffnen (Tab)" im Kontextmenü.
- Testet, ob ein Klick auf den Menüeintrag "Station öffnen (Tab)" , dass das  Gerät in einem Tab öffnet.
- Überprüft, ob die URL des geöffneten Geräts den HTTP-Status 200 zurückgibt (erreichbar).
- Fügt Logs und Screenshots zur Fehlerbehebung hinzu.

cypress/e2e/contextmenuDeviceInNewTab.cy.js

@@ -0,0 +1,62 @@
+describe("contextmenuTest", () => {
+  it("tests contextmenuTest", () => {
+    cy.log("Test startet jetzt");
+
+    // 1. Viewport einstellen
+    cy.viewport(1920, 1080);
+    cy.log("Viewport eingestellt auf 1920x1080");
+
+    // 2. Seite besuchen
+    cy.visit("http://10.10.0.70:3000/?m=12&u=484");
+    cy.log("Seite geöffnet");
+
+    // 3. Sicherstellen, dass die Karte geladen ist
+    cy.get("#map", { timeout: 15000 }).should("be.visible");
+    cy.log("Karte geladen");
+
+    // 4. Wartezeit zum Stabilisieren der Karte
+    cy.wait(2000);
+
+    // 5. Marker suchen und Rechtsklick simulieren
+    cy.get('img[src*="img/icons/marker-icon-20.svg"]') // Marker suchen
+      .filter(":visible") // Nur sichtbare Marker
+      .first() // Ersten Marker auswählen
+      .scrollIntoView() // Marker in den sichtbaren Bereich scrollen
+      .should("be.visible") // Sicherstellen, dass Marker sichtbar ist
+      .trigger("mouseover") // Mouseover simulieren
+      .wait(500) // Wartezeit nach Mouseover
+      .rightclick({ force: true }); // Rechtsklick auf den Marker
+    cy.log("Rechtsklick auf Marker ausgeführt");
+
+    // Screenshot nach Rechtsklick zum Debugging
+    cy.screenshot("nach-rechtsklick");
+
+    // 6. Kontextmenü prüfen mit explizitem Selektor
+    cy.get(".leaflet-contextmenu-item") // Suche alle Menüeinträge mit der Klasse
+      .contains("Station öffnen (Tab)", { timeout: 5000 }) // Prüfe Text innerhalb des Eintrags
+      .should("be.visible"); // Sichtbarkeit sicherstellen
+    cy.log("Menüeintrag gefunden");
+
+    // 7. URL abfangen und testen, bevor der Tab geöffnet wird
+    const targetUrl = "http://10.10.0.70/talas5/devices/cpl.aspx?ver=35&kue=24&id=50922";
+
+    // HTTP-Anfrage zur Überprüfung des Status
+    cy.request(targetUrl).then((response) => {
+      expect(response.status).to.eq(200); // Erwartet HTTP 200 OK
+      cy.log("URL ist erreichbar, Status 200");
+    });
+
+    // 8. Menüeintrag auswählen (öffnet den neuen Tab)
+    cy.get(".leaflet-contextmenu-item") // Explizit Menüeintrag mit Klasse auswählen
+      .contains("Station öffnen (Tab)")
+      .click(); // Menüeintrag anklicken
+    cy.log("Menüeintrag ausgewählt");
+
+    // 9. Klick auf die Karte, um Kontextmenü zu schließen
+    cy.get("#map").click(100, 100); // Klick auf eine leere Stelle
+    cy.log("Kontextmenü geschlossen");
+
+    // 10. Optionaler Screenshot nach Abschluss
+    cy.screenshot("test-abgeschlossen");
+  });
+});

cypress/support/e2e.js

@@ -14,7 +14,14 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import "./commands";
 
 // Alternatively you can use CommonJS syntax:
-// require('./commands')
+// require('./commands')
+const app = window.top;
+if (!app.document.head.querySelector("[data-hide-command-log-request]")) {
+  const style = app.document.createElement("style");
+  style.innerHTML = ".command-name-request, .command-name-xhr { display: none }";
+  style.setAttribute("data-hide-command-log-request", "");
+  app.document.head.appendChild(style);
+}