fix: playwright Test bugs beheben

.env.development

@@ -6,6 +6,6 @@ NEXT_PUBLIC_USE_MOCK_BACKEND_LOOP_START=false
 NEXT_PUBLIC_EXPORT_STATIC=false
 NEXT_PUBLIC_USE_CGI=false
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.805
+NEXT_PUBLIC_APP_VERSION=1.6.813
 NEXT_PUBLIC_CPL_MODE=json   # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)
 

.env.production

@@ -5,5 +5,5 @@ NEXT_PUBLIC_CPL_API_PATH=/CPL
 NEXT_PUBLIC_EXPORT_STATIC=true
 NEXT_PUBLIC_USE_CGI=true
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.805
+NEXT_PUBLIC_APP_VERSION=1.6.813
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,43 @@
+## [1.6.813] – 2025-09-02
+
+- WIP: Test fehlgeschlagen
+
+---
+## [1.6.812] – 2025-09-02
+
+- test: extracted navigation tests to separate file
+
+---
+## [1.6.811] – 2025-09-02
+
+- Test: nav ausgelagert
+
+---
+## [1.6.810] – 2025-09-02
+
+- Test: done
+
+---
+## [1.6.809] – 2025-09-02
+
+- chore: remove jsconfig.json, project uses only tsconfig.json for path aliases
+
+---
+## [1.6.808] – 2025-09-02
+
+- Test: playwright done
+
+---
+## [1.6.807] – 2025-09-02
+
+- test: refactoring playwright test structure
+
+---
+## [1.6.806] – 2025-09-02
+
+- fix: Detailansicht Modal sichtbar beim klicken
+
+---
 ## [1.6.805] – 2025-09-02
 
 - fix: ohne E-Mail

jsconfig.json

@@ -1,23 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["*"],
-      "@/redux/*": ["redux/*"],
-      "@/utils/*": ["utils/*"],
-      "@/components/*": ["components/*"]
-    }
-  },
-  "include": [
-    "src/**/*",
-    "components/**/*",
-    "redux/**/*",
-    "utils/**/*",
-    "*.js",
-    "*.ts",
-    "*.jsx",
-    "*.tsx"
-  ],
-
-  "extends": "./tsconfig.json"
-}

mocks/api/SERVICE/digitalOutputsMockData.json

@@ -0,0 +1,14 @@
+{
+  "win_da_state": [
+    1,
+    0,
+    1,
+    1
+  ],
+  "win_da_bezeichnung": [
+    "Ausgang2",
+    "Ausgang2",
+    "Ausgang3",
+    "Ausgang4"
+  ]
+}

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.805",
+  "version": "1.6.813",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cpl-v4",
-      "version": "1.6.805",
+      "version": "1.6.813",
       "dependencies": {
         "@fontsource/roboto": "^5.1.0",
         "@headlessui/react": "^2.2.4",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.805",
+  "version": "1.6.813",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3000",

playwright.config.ts

@@ -21,7 +21,7 @@ export default defineConfig({
 
   use: {
     baseURL: "http://localhost:3000",
-    headless: true,
+    headless: false,
     launchOptions: { args: ["--no-sandbox", "--disable-dev-shm-usage"] },
     viewport: { width: 1920, height: 1080 },
     video: "on",

playwright/components/footerTest.ts

@@ -0,0 +1,56 @@
+import type { Page } from "@playwright/test";
+import { highlightAndExpectVisible } from "@playwright/utils/highlight";
+
+export async function footerTest(page: Page) {
+  await highlightAndExpectVisible(
+    page,
+    page
+      .locator("div")
+      .filter({ hasText: /^Littwin Systemtechnik GmbH & Co\. KG$/ })
+      .locator("svg")
+  );
+  await highlightAndExpectVisible(
+    page,
+    page.getByText("Littwin Systemtechnik GmbH &")
+  );
+  await highlightAndExpectVisible(
+    page,
+    page
+      .locator("div")
+      .filter({ hasText: /^Telefon: 04402 972577-0$/ })
+      .locator("svg")
+  );
+  await highlightAndExpectVisible(
+    page,
+    page.getByText("Telefon: 04402 972577-")
+  );
+  await highlightAndExpectVisible(
+    page,
+    page
+      .locator("div")
+      .filter({ hasText: /^kontakt@littwin-systemtechnik\.de$/ })
+      .locator("svg")
+  );
+  await highlightAndExpectVisible(
+    page,
+    page.getByText("kontakt@littwin-systemtechnik")
+  );
+  await highlightAndExpectVisible(
+    page,
+    page
+      .locator("div")
+      .filter({ hasText: /^Handbücher$/ })
+      .locator("svg")
+  );
+  await highlightAndExpectVisible(
+    page,
+    page.getByText("Handbücher", { exact: true })
+  );
+  await page.getByText("Handbücher", { exact: true }).click();
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("heading", { name: "PDF Handbücher" })
+  );
+  await highlightAndExpectVisible(page, page.getByText("KUE705FO.PDF"));
+  await page.getByRole("contentinfo").getByRole("button").click();
+}

playwright/components/headerTest.ts

@@ -0,0 +1,14 @@
+import type { Page } from "@playwright/test";
+import { highlightAndExpectVisible } from "@playwright/utils/highlight";
+
+export async function headerTest(page: Page) {
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("heading", { name: "Meldestation" })
+  );
+  await highlightAndExpectVisible(page, page.getByRole("banner"));
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("img", { name: "Logo", exact: true })
+  );
+}

playwright/components/navTest.ts

@@ -0,0 +1,57 @@
+import type { Page } from "@playwright/test";
+import { highlightAndExpectVisible } from "@playwright/utils/highlight";
+
+export async function navTest(page: Page) {
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("link", { name: "Übersicht" })
+  );
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("link", { name: "Kabelüberwachung" })
+  );
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("link", { name: "Meldungseingänge" })
+  );
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("link", { name: "Schaltausgänge" })
+  );
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("link", { name: "Messwerteingänge" })
+  );
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("link", { name: "Berichte" })
+  );
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("link", { name: "System" })
+  );
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("link", { name: "Einstellungen" })
+  );
+}
+
+/*
+  // Sidebar Links sichtbar
+  const sidebarLinks2 = [
+    { role: "link", name: "Übersicht" },
+    { role: "link", name: "Kabelüberwachung" },
+    { role: "link", name: "Meldungseingänge" },
+    { role: "link", name: "Schaltausgänge" },
+    { role: "link", name: "Messwerteingänge" },
+    { role: "link", name: "Berichte" },
+    { role: "link", name: "System" },
+    { role: "link", name: "Einstellungen" },
+  ];
+  for (const link of sidebarLinks2) {
+    const locator = page.getByRole(link.role as any, { name: link.name });
+    await highlightAndExpectVisible(page, locator);
+    await expect(locator).toBeVisible();
+    await page.waitForTimeout(50);
+  }
+*/

playwright/tests/all.test.ts

@@ -1,12 +1,12 @@
 import { test } from "../fixtures";
-import { runDashboardTest } from "./pages/dashboardTest";
-import { runCableMonitoringTest } from "./pages/kabelueberwachungTest";
-import { runDigitalInputsTest } from "./pages/digitalInputsTest";
-import { runDigitalOutputsTest } from "./pages/digitalOutputsTest";
-import { runAnalogInputsTest } from "./pages/analogInputsTest";
-import { runMeldungenTest } from "./pages/meldungenTest";
-import { runSystemTest } from "./pages/systemTest";
-import { runSettingsPageTest } from "./pages/settingsPageTest";
+import { runDashboardTest } from "./pages/dashboard/dashboardTest";
+import { runCableMonitoringTest } from "./pages/kabelueberwachung/kabelueberwachungTest";
+import { runDigitalInputsTest } from "./pages/digitalInputs/digitalInputsTest";
+import { runDigitalOutputsTest } from "./pages/digitalOutputs/digitalOutputsTest";
+import { runAnalogInputsTest } from "./pages/analogInputs/analogInputsTest";
+import { runMeldungenTest } from "./pages/meldungen/meldungenTest";
+import { runSystemTest } from "./pages/system/systemTest";
+import { runSettingsPageTest } from "./pages/settingsPage/settingsPageTest";
 
 test("Dashboard, AnalogInputs und SettingsPage", async ({ page }) => {
   await runDashboardTest(page);

playwright/tests/pages/analogInputs/analogInputsTest.ts

@@ -1,10 +1,20 @@
 import type { Page } from "@playwright/test";
 import { expect } from "@playwright/test";
-import { highlightAndExpectVisible } from "../utils/highlight";
+import { highlightAndExpectVisible } from "@playwright/utils/highlight";
+import { navTest } from "@playwright/components/navTest";
+import { headerTest } from "@playwright/components/headerTest";
+import { footerTest } from "@playwright/components/footerTest";
+
 // Kombinierte Helper-Funktion: injiziert CSS (nur einmal), hebt hervor und prüft Sichtbarkeit
 
 export async function runAnalogInputsTest(page: Page) {
   await page.goto("/analogInputs");
+  //----------------------
+  await headerTest(page);
+  await navTest(page);
+  await footerTest(page);
+  await page.waitForTimeout(400);
+  //----------------------
   await highlightAndExpectVisible(
     page,
     page.getByRole("heading", { name: "Messwerteingänge" }).nth(1)
@@ -118,24 +128,29 @@ export async function runAnalogInputsTest(page: Page) {
       .getByLabel("Messkurve anzeigen")
   );
 
-  await page.getByRole("cell", { name: "1", exact: true }).click();
-  await expect(page.locator(".border.p-2.text-center").first()).toBeVisible();
-
-  await page.locator(".border.p-2.text-center").first().click();
+  // Einstellungen-Button in der ersten Datenzeile klicken und auf Modal warten
+  const firstRow = page.getByRole("row", { name: /1\s+.*AE\s*1/i });
+  const settingsButtonInRow = firstRow.getByRole("button").first();
+  await settingsButtonInRow.waitFor({ state: "visible", timeout: 10000 });
+  await settingsButtonInRow.click();
   await expect(
-    page.getByRole("heading", { name: "Einstellungen Messwerteingang" })
-  ).toBeVisible();
+    page.getByRole("heading", { name: /Einstellungen Messwerteingang/ })
+  ).toBeVisible({ timeout: 15000 });
 
   await highlightAndExpectVisible(
     page,
-    page.getByRole("heading", { name: "Einstellungen Messwerteingang" })
+    page.getByRole("heading", { name: /Einstellungen Messwerteingang/ })
   );
 
   await highlightAndExpectVisible(page, page.getByText("Bezeichnung:"));
-  await highlightAndExpectVisible(page, page.getByText("Offset:"));
-  await highlightAndExpectVisible(page, page.getByText("Faktor:"));
-  await highlightAndExpectVisible(page, page.getByText("Einheit:"));
-  await highlightAndExpectVisible(page, page.getByText("Speicherintervall:"));
+  await highlightAndExpectVisible(page, page.getByText("Offset:"), 5000);
+  await highlightAndExpectVisible(page, page.getByText("Faktor:"), 5000);
+  await highlightAndExpectVisible(page, page.getByText("Einheit:"), 5000);
+  await highlightAndExpectVisible(
+    page,
+    page.getByText("Speicherintervall:"),
+    5000
+  );
 
   await highlightAndExpectVisible(
     page,
@@ -236,6 +251,4 @@ export async function runAnalogInputsTest(page: Page) {
     await expect(modalCloseBtn).toBeVisible();
     await modalCloseBtn.click();
   }
-
-  // ...dein AnalogInputs-Testcode...
 }

playwright/tests/pages/dashboard/dashboardTest.ts

@@ -0,0 +1,90 @@
+import type { Page } from "@playwright/test";
+import { highlightAndExpectVisible } from "@playwright/utils/highlight";
+import { navTest } from "@playwright/components/navTest";
+import { headerTest } from "@playwright/components/headerTest";
+import { footerTest } from "@playwright/components/footerTest";
+
+export async function runDashboardTest(page: Page) {
+  await page.goto("/dashboard");
+  //----------------------
+  await headerTest(page);
+  await navTest(page);
+  await footerTest(page);
+  await page.waitForTimeout(400);
+  //----------------------
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("heading", { name: "Letzten 20 Meldungen" })
+  );
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("cell", { name: "Prio" })
+  );
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("cell", { name: "Zeitstempel" })
+  );
+  // ...existing code...
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("cell", { name: "Quelle" })
+  );
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("cell", { name: "Meldung" })
+  );
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("cell", { name: "Status" })
+  );
+
+  await highlightAndExpectVisible(
+    page,
+    page
+      .locator("div")
+      .filter({ hasText: /^2KÜ705FO$/ })
+      .first()
+  );
+  await highlightAndExpectVisible(
+    page,
+    page
+      .locator("div")
+      .filter({ hasText: /^3KÜ705FO$/ })
+      .first()
+  );
+  await highlightAndExpectVisible(
+    page,
+    page
+      .locator("div")
+      .filter({ hasText: /^32KÜ705FO$/ })
+      .first()
+  );
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("img", { name: "IP Address" })
+  );
+  await highlightAndExpectVisible(page, page.getByText("IP-Adresse"));
+  await highlightAndExpectVisible(page, page.getByRole("main"));
+  await highlightAndExpectVisible(page, page.getByText("10.10.0.243"));
+  await highlightAndExpectVisible(page, page.getByText("Subnet-Maske"));
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("img", { name: "subnet mask" })
+  );
+  await highlightAndExpectVisible(page, page.getByText("255.255.255.0"));
+  await highlightAndExpectVisible(page, page.getByText("Gateway"));
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("img", { name: "gateway" })
+  );
+  await highlightAndExpectVisible(page, page.getByText("10.10.0.1"));
+  await highlightAndExpectVisible(page, page.getByText("OPC-UA"));
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("paragraph").filter({ hasText: "Status" })
+  );
+  await highlightAndExpectVisible(
+    page,
+    page.getByText("Server betriebsbereit")
+  );
+}

playwright/tests/pages/dashboardTest.ts

@@ -1,202 +0,0 @@
-import type { Page } from "@playwright/test";
-import { highlightAndExpectVisible } from "../utils/highlight";
-
-export async function runDashboardTest(page: Page) {
-  await page.goto("http://localhost:3000/dashboard");
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("heading", { name: "Meldestation" })
-  );
-  await highlightAndExpectVisible(page, page.getByRole("banner"));
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("img", { name: "Logo", exact: true })
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("main").locator("svg").first()
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("heading", { name: "Letzten 20 Meldungen" })
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("cell", { name: "Prio" })
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("cell", { name: "Zeitstempel" })
-  );
-  // ...existing code...
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("cell", { name: "Quelle" })
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("cell", { name: "Meldung" })
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("cell", { name: "Status" })
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("link", { name: "Übersicht" })
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("link", { name: "Kabelüberwachung" })
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("link", { name: "Meldungseingänge" })
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("link", { name: "Schaltausgänge" })
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("link", { name: "Messwerteingänge" })
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("link", { name: "Berichte" })
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("link", { name: "System" })
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("link", { name: "Einstellungen" })
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("heading", { name: "Versionsinformationen" })
-  );
-  await highlightAndExpectVisible(
-    page,
-    page
-      .locator("div")
-      .filter({ hasText: /^Applikationsversion: 0\.02$/ })
-      .locator("svg")
-  );
-  await highlightAndExpectVisible(
-    page,
-    page
-      .locator("div")
-      .filter({ hasText: /^Webversion: 1\.6/ })
-      .locator("path")
-  );
-  await highlightAndExpectVisible(
-    page,
-    page
-      .locator("div")
-      .filter({ hasText: /^1KÜ705FO$/ })
-      .first()
-  );
-  await highlightAndExpectVisible(
-    page,
-    page
-      .locator("div")
-      .filter({ hasText: /^2KÜ705FO$/ })
-      .first()
-  );
-  await highlightAndExpectVisible(
-    page,
-    page
-      .locator("div")
-      .filter({ hasText: /^3KÜ705FO$/ })
-      .first()
-  );
-  await highlightAndExpectVisible(
-    page,
-    page
-      .locator("div")
-      .filter({ hasText: /^32KÜ705FO$/ })
-      .first()
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("img", { name: "IP Address" })
-  );
-  await highlightAndExpectVisible(page, page.getByText("IP-Adresse"));
-  await highlightAndExpectVisible(page, page.getByRole("main"));
-  await highlightAndExpectVisible(page, page.getByText("10.10.0.243"));
-  await highlightAndExpectVisible(page, page.getByText("Subnet-Maske"));
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("img", { name: "subnet mask" })
-  );
-  await highlightAndExpectVisible(page, page.getByText("255.255.255.0"));
-  await highlightAndExpectVisible(page, page.getByText("Gateway"));
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("img", { name: "gateway" })
-  );
-  await highlightAndExpectVisible(page, page.getByText("10.10.0.1"));
-  await highlightAndExpectVisible(page, page.getByText("OPC-UA"));
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("paragraph").filter({ hasText: "Status" })
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByText("Server betriebsbereit")
-  );
-  await highlightAndExpectVisible(
-    page,
-    page
-      .locator("div")
-      .filter({ hasText: /^Littwin Systemtechnik GmbH & Co\. KG$/ })
-      .locator("svg")
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByText("Littwin Systemtechnik GmbH &")
-  );
-  await highlightAndExpectVisible(
-    page,
-    page
-      .locator("div")
-      .filter({ hasText: /^Telefon: 04402 972577-0$/ })
-      .locator("svg")
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByText("Telefon: 04402 972577-")
-  );
-  await highlightAndExpectVisible(
-    page,
-    page
-      .locator("div")
-      .filter({ hasText: /^kontakt@littwin-systemtechnik\.de$/ })
-      .locator("svg")
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByText("kontakt@littwin-systemtechnik")
-  );
-  await highlightAndExpectVisible(
-    page,
-    page
-      .locator("div")
-      .filter({ hasText: /^Handbücher$/ })
-      .locator("svg")
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByText("Handbücher", { exact: true })
-  );
-  await page.getByText("Handbücher", { exact: true }).click();
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("heading", { name: "PDF Handbücher" })
-  );
-  await highlightAndExpectVisible(page, page.getByText("KUE705FO.PDF"));
-  //await highlightAndExpectVisible(page, page.getByRole("button"));
-  //await page.getByRole("button").click();
-}

playwright/tests/pages/digitalInputs/digitalInputsTest.ts

@@ -0,0 +1,106 @@
+import type { Page } from "@playwright/test";
+import { highlightAndExpectVisible } from "@playwright/utils/highlight";
+import { navTest } from "@playwright/components/navTest";
+import { headerTest } from "@playwright/components/headerTest";
+import { footerTest } from "@playwright/components/footerTest";
+
+export async function runDigitalInputsTest(page: Page) {
+  await page.goto("/digitalInputs");
+  //----------------------
+  await headerTest(page);
+  await navTest(page);
+  await footerTest(page);
+  await page.waitForTimeout(400);
+  //--------------------
+
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("heading", { name: "Meldungseingänge", exact: true })
+  );
+  await page.waitForTimeout(400);
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("heading", { name: "Meldungseingänge 1 –" }).locator("svg")
+  );
+  await page.waitForTimeout(400);
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("heading", { name: "Meldungseingänge 1 –" })
+  );
+  await page.waitForTimeout(400);
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("cell", { name: "Eingang" }).first()
+  );
+  await page.waitForTimeout(400);
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("cell", { name: "Zustand" }).first()
+  );
+  await page.waitForTimeout(400);
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("cell", { name: "Bezeichnung" }).first()
+  );
+  await page.waitForTimeout(400);
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("cell", { name: "Aktion" }).first()
+  );
+  await page.waitForTimeout(400);
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("cell", { name: "1", exact: true }).locator("svg")
+  );
+  await page.waitForTimeout(400);
+  await highlightAndExpectVisible(page, page.getByText("1", { exact: true }));
+  await page.waitForTimeout(400);
+  await highlightAndExpectVisible(
+    page,
+    page
+      .getByRole("row", { name: "1 ● DE 1", exact: true })
+      .getByRole("cell")
+      .nth(1)
+  );
+  await page.waitForTimeout(400);
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("row", { name: "1 ● DE 1", exact: true }).locator("span")
+  );
+  await page.waitForTimeout(400);
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("cell", { name: "DE 1", exact: true })
+  );
+  await page.waitForTimeout(400);
+  await highlightAndExpectVisible(
+    page,
+    page
+      .getByRole("row", { name: "1 ● DE 1", exact: true })
+      .locator("svg")
+      .nth(1)
+  );
+  await page.waitForTimeout(400);
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("cell", { name: "13", exact: true }).locator("svg")
+  );
+  await page.waitForTimeout(400);
+  await highlightAndExpectVisible(page, page.getByText("13", { exact: true }));
+  await page.waitForTimeout(400);
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("row", { name: "● DE 13" }).getByRole("cell").nth(1)
+  );
+  await page.waitForTimeout(400);
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("row", { name: "● DE 13" }).locator("span")
+  );
+  await page.waitForTimeout(400);
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("cell", { name: "DE 13" })
+  );
+  await page.waitForTimeout(1000);
+}

playwright/tests/pages/digitalInputsTest.ts

@@ -1,214 +0,0 @@
-import type { Page } from "@playwright/test";
-import { highlightAndExpectVisible } from "../utils/highlight";
-
-export async function runDigitalInputsTest(page: Page) {
-  await page.goto("/digitalInputs");
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("img", { name: "Logo", exact: true })
-  );
-  await page.waitForTimeout(400);
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("img", { name: "TALAS Logo" })
-  );
-  await page.waitForTimeout(400);
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("heading", { name: "Meldestation" })
-  );
-  await page.waitForTimeout(400);
-  await highlightAndExpectVisible(page, page.getByText("CPLV4 Ismail Rastede"));
-  await page.waitForTimeout(400);
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("link", { name: "Übersicht" })
-  );
-  await page.waitForTimeout(400);
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("link", { name: "Kabelüberwachung" })
-  );
-  await page.waitForTimeout(400);
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("link", { name: "Meldungseingänge" })
-  );
-  await page.waitForTimeout(400);
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("link", { name: "Schaltausgänge" })
-  );
-  await page.waitForTimeout(400);
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("link", { name: "Messwerteingänge" })
-  );
-  await page.waitForTimeout(400);
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("link", { name: "Berichte" })
-  );
-  await page.waitForTimeout(400);
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("link", { name: "System" })
-  );
-  await page.waitForTimeout(400);
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("link", { name: "Einstellungen" })
-  );
-  await page.waitForTimeout(400);
-  await highlightAndExpectVisible(
-    page,
-    page
-      .locator("div")
-      .filter({ hasText: /^Littwin Systemtechnik GmbH & Co\. KG$/ })
-      .locator("svg")
-  );
-  await page.waitForTimeout(400);
-  await highlightAndExpectVisible(
-    page,
-    page.getByText("Littwin Systemtechnik GmbH &")
-  );
-  await page.waitForTimeout(400);
-  await highlightAndExpectVisible(
-    page,
-    page
-      .locator("div")
-      .filter({ hasText: /^Telefon: 04402 972577-0$/ })
-      .locator("svg")
-  );
-  await page.waitForTimeout(400);
-  await highlightAndExpectVisible(
-    page,
-    page.getByText("Telefon: 04402 972577-")
-  );
-  await page.waitForTimeout(400);
-  await highlightAndExpectVisible(
-    page,
-    page
-      .locator("div")
-      .filter({ hasText: /^kontakt@littwin-systemtechnik\.de$/ })
-      .locator("svg")
-  );
-  await page.waitForTimeout(400);
-  await highlightAndExpectVisible(
-    page,
-    page.getByText("kontakt@littwin-systemtechnik")
-  );
-  await page.waitForTimeout(400);
-  await highlightAndExpectVisible(
-    page,
-    page
-      .locator("div")
-      .filter({ hasText: /^Handbücher$/ })
-      .locator("path")
-  );
-  await page.waitForTimeout(400);
-  await highlightAndExpectVisible(
-    page,
-    page.getByText("Handbücher", { exact: true })
-  );
-  await page.waitForTimeout(400);
-  await page.getByText("Handbücher", { exact: true }).click();
-  await page.waitForTimeout(400);
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("heading", { name: "PDF Handbücher" })
-  );
-  await page.waitForTimeout(400);
-  await highlightAndExpectVisible(page, page.getByText("KUE705FO.PDF"));
-  await page.waitForTimeout(400);
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("heading", { name: "Meldungseingänge", exact: true })
-  );
-  await page.waitForTimeout(400);
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("heading", { name: "Meldungseingänge 1 –" }).locator("svg")
-  );
-  await page.waitForTimeout(400);
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("heading", { name: "Meldungseingänge 1 –" })
-  );
-  await page.waitForTimeout(400);
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("cell", { name: "Eingang" }).first()
-  );
-  await page.waitForTimeout(400);
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("cell", { name: "Zustand" }).first()
-  );
-  await page.waitForTimeout(400);
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("cell", { name: "Bezeichnung" }).first()
-  );
-  await page.waitForTimeout(400);
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("cell", { name: "Aktion" }).first()
-  );
-  await page.waitForTimeout(400);
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("cell", { name: "1", exact: true }).locator("svg")
-  );
-  await page.waitForTimeout(400);
-  await highlightAndExpectVisible(page, page.getByText("1", { exact: true }));
-  await page.waitForTimeout(400);
-  await highlightAndExpectVisible(
-    page,
-    page
-      .getByRole("row", { name: "1 ● DE 1", exact: true })
-      .getByRole("cell")
-      .nth(1)
-  );
-  await page.waitForTimeout(400);
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("row", { name: "1 ● DE 1", exact: true }).locator("span")
-  );
-  await page.waitForTimeout(400);
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("cell", { name: "DE 1", exact: true })
-  );
-  await page.waitForTimeout(400);
-  await highlightAndExpectVisible(
-    page,
-    page
-      .getByRole("row", { name: "1 ● DE 1", exact: true })
-      .locator("svg")
-      .nth(1)
-  );
-  await page.waitForTimeout(400);
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("cell", { name: "13", exact: true }).locator("svg")
-  );
-  await page.waitForTimeout(400);
-  await highlightAndExpectVisible(page, page.getByText("13", { exact: true }));
-  await page.waitForTimeout(400);
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("row", { name: "● DE 13" }).getByRole("cell").nth(1)
-  );
-  await page.waitForTimeout(400);
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("row", { name: "● DE 13" }).locator("span")
-  );
-  await page.waitForTimeout(400);
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("cell", { name: "DE 13" })
-  );
-  await page.waitForTimeout(1000);
-}

playwright/tests/pages/digitalOutputs/digitalOutputsTest.ts

@@ -0,0 +1,56 @@
+import type { Page } from "@playwright/test";
+import { expect } from "@playwright/test";
+import { highlightAndExpectVisible } from "@playwright/utils/highlight";
+import { navTest } from "@playwright/components/navTest";
+import { headerTest } from "@playwright/components/headerTest";
+import { footerTest } from "@playwright/components/footerTest";
+
+export async function runDigitalOutputsTest(page: Page) {
+  await page.goto("/digitalOutputs");
+  //----------------------
+  await headerTest(page);
+  await navTest(page);
+  await footerTest(page);
+  await page.waitForTimeout(400);
+  //----------------------
+  await highlightAndExpectVisible(page, page.locator("h1"));
+  page.locator("h1").click();
+  await highlightAndExpectVisible(
+    page,
+    page.locator("h2").filter({ hasText: "Schaltausgänge" })
+  );
+
+  page
+    .locator("h2")
+    .filter({ hasText: "Schaltausgänge" })
+    .locator("svg")
+    .click();
+  page.locator("h2").filter({ hasText: "Schaltausgänge" }).click();
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("cell", { name: "Ausgang", exact: true })
+  );
+  const ausgang2Cell = page.getByRole("cell", { name: "Ausgang2" }).nth(1);
+  await ausgang2Cell.waitFor({ state: "visible", timeout: 15000 }); // bis zu 15 Sekunden warten
+  await ausgang2Cell.click();
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("cell", { name: "Schalter" })
+  );
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("cell", { name: "Schalter" })
+  );
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("cell", { name: "Aktion" })
+  );
+  page.getByRole("cell", { name: "1" }).locator("svg").click();
+  //page.getByRole("cell", { name: "1" }).click();
+  page.getByRole("cell", { name: "2", exact: true }).locator("svg").click();
+  page.getByRole("cell", { name: "2", exact: true }).click();
+  page.getByRole("cell", { name: "3", exact: true }).locator("svg").click();
+  page.getByRole("cell", { name: "3", exact: true }).click();
+  page.getByRole("cell", { name: "4", exact: true }).locator("svg").click();
+  page.getByRole("cell", { name: "4", exact: true }).click();
+}

playwright/tests/pages/digitalOutputsTest.ts

@@ -1,250 +0,0 @@
-// gigityOutputsTest.ts
-import type { Locator, Page } from "@playwright/test";
-import { expect } from "@playwright/test";
-
-export async function runDigitalOutputsTest(page: Page) {
-  await page.goto("/digitalOutputs");
-
-  // Logo
-  const logo = page.getByRole("img", { name: "Logo", exact: true });
-  await highlightAndExpectVisible(page, logo);
-  await logo.click();
-  await page.waitForTimeout(200);
-
-  // TALAS Logo
-  const talasLogo = page.getByRole("img", { name: "TALAS Logo" });
-  await highlightAndExpectVisible(page, talasLogo);
-  await talasLogo.click();
-  await page.waitForTimeout(200);
-
-  // Meldestation Heading
-  const meldestation = page.getByRole("heading", { name: "Meldestation" });
-  await highlightAndExpectVisible(page, meldestation);
-  await meldestation.click();
-  await page.waitForTimeout(200);
-
-  // CPLV4 Ismail Rastede
-  const cplv4Text = page.getByText("CPLV4 Ismail Rastede");
-  await highlightAndExpectVisible(page, cplv4Text);
-  await cplv4Text.click();
-  await page.waitForTimeout(200);
-
-  // h1
-  const h1 = page.locator("h1");
-  await highlightAndExpectVisible(page, h1);
-  await h1.click();
-  await page.waitForTimeout(200);
-
-  // Sidebar Links
-  const sidebarLinks = [
-    { role: "link", name: "Übersicht" },
-    { role: "link", name: "Kabelüberwachung" },
-    { role: "link", name: "Meldungseingänge" },
-    { role: "link", name: "Schaltausgänge" },
-    { role: "link", name: "Messwerteingänge" },
-    { role: "link", name: "Berichte" },
-    { role: "link", name: "System" },
-    { role: "link", name: "Einstellungen" },
-  ];
-  for (const link of sidebarLinks) {
-    const locator = page.getByRole(link.role as any, { name: link.name });
-    await highlightAndExpectVisible(page, locator);
-    await expect(locator).toBeVisible();
-    await page.waitForTimeout(100);
-  }
-
-  // Footer/Info
-  const footerSvgs = [
-    page
-      .locator("div")
-      .filter({ hasText: /^Littwin Systemtechnik GmbH & Co\. KG$/ })
-      .locator("svg"),
-    page
-      .locator("div")
-      .filter({ hasText: /^Telefon: 04402 972577-0$/ })
-      .locator("path"),
-    page
-      .locator("div")
-      .filter({ hasText: /^kontakt@littwin-systemtechnik\.de$/ })
-      .locator("svg"),
-    page
-      .locator("div")
-      .filter({ hasText: /^Handbücher$/ })
-      .locator("svg"),
-  ];
-  for (const svg of footerSvgs) {
-    await highlightAndExpectVisible(page, svg);
-    await expect(svg).toBeVisible();
-    await page.waitForTimeout(100);
-  }
-  const footerTexts = [
-    page.getByText("Littwin Systemtechnik GmbH &"),
-    page.getByText("Telefon: 04402 972577-"),
-    page.getByText("kontakt@littwin-systemtechnik"),
-    page.getByText("Handbücher", { exact: true }),
-  ];
-  for (const txt of footerTexts) {
-    await highlightAndExpectVisible(page, txt);
-    await expect(txt).toBeVisible();
-    await page.waitForTimeout(100);
-  }
-
-  // Handbücher öffnen
-  const handbuecher = page.getByText("Handbücher", { exact: true });
-  await highlightAndExpectVisible(page, handbuecher);
-  await handbuecher.click();
-  await page.waitForTimeout(200);
-
-  // PDF Handbücher Heading
-  const pdfHandbuecher = page.getByRole("heading", { name: "PDF Handbücher" });
-  await highlightAndExpectVisible(page, pdfHandbuecher);
-  await pdfHandbuecher.click();
-  await page.waitForTimeout(200);
-
-  // KUE705FO.PDF sichtbar
-  const kuePdf = page.getByText("KUE705FO.PDF");
-  await highlightAndExpectVisible(page, kuePdf);
-  await expect(kuePdf).toBeVisible();
-  await page.waitForTimeout(100);
-
-  // Footer Button
-  const footerButton = page.getByRole("contentinfo").getByRole("button");
-  await highlightAndExpectVisible(page, footerButton);
-  await expect(footerButton).toBeVisible();
-  await footerButton.click();
-  await page.waitForTimeout(200);
-
-  // Schaltausgänge Überschrift
-  const schaltausgaengeH2 = page
-    .locator("h2")
-    .filter({ hasText: "Schaltausgänge" });
-  await highlightAndExpectVisible(page, schaltausgaengeH2);
-  await schaltausgaengeH2.click();
-  await page.waitForTimeout(200);
-
-  // Tabellenzellen
-  const tableCells = [
-    page.getByRole("cell", { name: "Ausgang", exact: true }),
-    page.getByRole("cell", { name: "Bezeichnung" }),
-    page.getByRole("cell", { name: "Schalter" }),
-    page.getByRole("cell", { name: "Aktion" }),
-    page.getByRole("cell", { name: "1" }),
-    page.getByRole("cell", { name: "2", exact: true }),
-    page.getByRole("cell", { name: "3", exact: true }),
-    page.getByRole("cell", { name: "4", exact: true }),
-    page.getByRole("cell", { name: "Ausgang2" }).first(),
-    page.getByRole("cell", { name: "Ausgang2" }).nth(1),
-    page.getByRole("cell", { name: "Ausgang3" }),
-    page.getByRole("cell", { name: "Ausgang4" }),
-  ];
-  for (const cell of tableCells) {
-    await highlightAndExpectVisible(page, cell);
-    await cell.click();
-    await page.waitForTimeout(100);
-  }
-
-  // Sichtbarkeit von Zellen in Zeilen prüfen
-  const rowChecks = [
-    { row: "1 Ausgang2", idx: 2 },
-    { row: "2 Ausgang2", idx: 2 },
-    { row: "Ausgang3", idx: 2 },
-    { row: "Ausgang4", idx: 2 },
-    { row: "1 Ausgang2", idx: 3 },
-    { row: "2 Ausgang2", idx: 3 },
-    { row: "Ausgang3", idx: 3 },
-    { row: "Ausgang4", idx: 3 },
-  ];
-  for (const { row, idx } of rowChecks) {
-    const cell = page
-      .getByRole("row", { name: row })
-      .getByRole("cell")
-      .nth(idx);
-    await highlightAndExpectVisible(page, cell);
-    await expect(cell).toBeVisible();
-    await page.waitForTimeout(100);
-  }
-
-  // SVG-Buttons in Zeilen
-  const rowSvgClicks = [
-    { row: "1 Ausgang2", nth: 2 },
-    { row: "2 Ausgang2", nth: 2 },
-    { row: "Ausgang3", nth: 2 },
-    { row: "Ausgang4", nth: 2 },
-  ];
-  for (const { row, nth } of rowSvgClicks) {
-    const svg = page.getByRole("row", { name: row }).locator("svg").nth(nth);
-    await highlightAndExpectVisible(page, svg);
-    await svg.click();
-    await page.waitForTimeout(200);
-
-    // Modal: Einstellungen Schaltausgang
-    const heading = page.getByRole("heading", {
-      name: "Einstellungen Schaltausgang",
-    });
-    await highlightAndExpectVisible(page, heading);
-    await heading.click();
-    await page.waitForTimeout(100);
-
-    const bezeichnung = page.getByText("Bezeichnung:");
-    await highlightAndExpectVisible(page, bezeichnung);
-    await bezeichnung.click();
-    await page.waitForTimeout(100);
-
-    const textbox = page.getByRole("textbox", { name: "z. B. Licht Relais" });
-    await highlightAndExpectVisible(page, textbox);
-    await textbox.click();
-    await page.waitForTimeout(100);
-
-    const speichern = page.getByRole("button", { name: "Speichern" });
-    await highlightAndExpectVisible(page, speichern);
-    await expect(speichern).toBeVisible();
-    await page.waitForTimeout(100);
-
-    const modalSchliessen = page.getByRole("button", {
-      name: "Modal schließen",
-    });
-    await highlightAndExpectVisible(page, modalSchliessen);
-    await expect(modalSchliessen).toBeVisible();
-    await modalSchliessen.click();
-    await page.waitForTimeout(200);
-  }
-}
-
-//---------------------------------------------------------------------
-
-export async function highlightAndExpectVisible(
-  page: Page,
-  locator: Locator,
-  durationMs = 800
-) {
-  // CSS nur einmal pro Page injizieren
-  const alreadyInjected = await page.evaluate(
-    () => (window as any).__pwForceCssInjected === true
-  );
-
-  if (!alreadyInjected) {
-    await page.addStyleTag({
-      content: `
-        .pw-force-outline {
-          outline: 3px solid #ff1744 !important;
-          outline-offset: 2px !important;
-          box-shadow: 0 0 0 3px rgba(224,0,43,.35) !important;
-        }
-      `,
-    });
-    await page.evaluate(() => {
-      (window as any).__pwForceCssInjected = true;
-    });
-  }
-
-  const els = await locator.elementHandles();
-  for (const el of els) {
-    await el.evaluate((node: unknown, ms: number) => {
-      const n = node as HTMLElement;
-      n.classList.add("pw-force-outline");
-      window.setTimeout(() => n.classList.remove("pw-force-outline"), ms);
-    }, durationMs);
-  }
-
-  await expect(locator).toBeVisible();
-}

playwright/tests/pages/kabelueberwachung/kabelueberwachungTest.ts

@@ -0,0 +1,360 @@
+import type { Page } from "@playwright/test";
+import { highlightAndExpectVisible } from "@playwright/utils/highlight";
+import { navTest } from "@playwright/components/navTest";
+import { headerTest } from "@playwright/components/headerTest";
+import { footerTest } from "@playwright/components/footerTest";
+
+export async function runCableMonitoringTest(page: Page) {
+  await page.goto("/kabelueberwachung");
+  //----------------------
+  await headerTest(page);
+  await navTest(page);
+  await footerTest(page);
+  await page.waitForTimeout(400);
+  //----------------------
+
+  // Rack Buttons
+  for (const rack of [1, 2, 3, 4, 1]) {
+    await highlightAndExpectVisible(
+      page,
+      page.getByRole("button", { name: `Rack ${rack}` })
+    );
+    await page.waitForTimeout(400);
+  }
+
+  // Kabel 1
+  await highlightAndExpectVisible(page, page.getByText("1", { exact: true }));
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(
+    page,
+    page.locator("div").filter({ hasText: /^8$/ })
+  );
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(
+    page,
+    page
+      .locator("div")
+      .filter({ hasText: /^1KÜ705-FO⚙$/ })
+      .getByRole("heading")
+  );
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(page, page.getByText("1", { exact: true }));
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(
+    page,
+    page
+      .locator("div")
+      .filter({ hasText: /^1KÜ705-FO⚙$/ })
+      .getByRole("button")
+  );
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(
+    page,
+    page.locator(".flex.flex-col > span").first()
+  );
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(
+    page,
+    page.locator(".w-\\[0\\.625rem\\]").first()
+  );
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(
+    page,
+    page.locator("span:nth-child(2)").first()
+  );
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(
+    page,
+    page
+      .locator(".w-\\[0\\.625rem\\].h-\\[0\\.625rem\\].rounded-full.bg-red-500")
+      .first()
+  );
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(page, page.getByText("Erdschluss").first());
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(
+    page,
+    page.locator(".text-center > span:nth-child(2)").first()
+  );
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(
+    page,
+    page.getByText(/^RSL: \d+,\d{3} kOhm$/).first()
+  );
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(page, page.getByText("Kabel 1"));
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(
+    page,
+    page.locator(".text-black.text-\\[0\\.625rem\\].font-semibold").first()
+  );
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(
+    page,
+    page.locator(".bg-littwin-blue.text-white.text-\\[0\\.625rem\\]").first()
+  );
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(
+    page,
+    page.locator(".flex > button:nth-child(2)").first()
+  );
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(
+    page,
+    page.locator(".bg-littwin-blue.text-white.cursor-pointer").first()
+  );
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(page, page.getByText("V4.20"));
+  await page.waitForTimeout(400);
+
+  // Kabel 8
+  await highlightAndExpectVisible(page, page.getByText("8", { exact: true }));
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(
+    page,
+    page
+      .locator("div")
+      .filter({ hasText: /^8KÜ705-FO⚙$/ })
+      .getByRole("heading")
+  );
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(
+    page,
+    page
+      .locator("div")
+      .filter({ hasText: /^8KÜ705-FO⚙$/ })
+      .getByRole("button")
+  );
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(
+    page,
+    page
+      .locator(
+        "div:nth-child(8) > .relative.bg-gray-300 > .relative.w-\\[7\\.075rem\\] > .flex.flex-col.mt-\\[0\\.625rem\\] > .flex.items-center.space-x-\\[0\\.25rem\\] > .flex.flex-col.items-start > span"
+      )
+      .first()
+  );
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(
+    page,
+    page.locator(
+      "div:nth-child(8) > .relative.bg-gray-300 > .relative.w-\\[7\\.075rem\\] > .flex.flex-col.mt-\\[0\\.625rem\\] > .flex.items-center.space-x-\\[0\\.25rem\\] > .flex.flex-col.items-start > span:nth-child(2)"
+    )
+  );
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(
+    page,
+    page.locator(
+      "div:nth-child(8) > .relative.bg-gray-300 > .relative.w-\\[7\\.075rem\\] > .flex.flex-col.mt-\\[0\\.625rem\\] > .flex.items-center.space-x-\\[0\\.25rem\\] > .flex.flex-col.items-center > .w-\\[0\\.625rem\\].h-\\[0\\.625rem\\].bg-green-500"
+    )
+  );
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(
+    page,
+    page.locator(
+      "div:nth-child(8) > .relative.bg-gray-300 > .relative.w-\\[7\\.075rem\\] > .flex.flex-col.mt-\\[0\\.625rem\\] > .flex.items-center.space-x-\\[0\\.25rem\\] > .flex.flex-col.items-center > .w-\\[0\\.625rem\\].h-\\[0\\.625rem\\].rounded-full.bg-red-500"
+    )
+  );
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(page, page.getByText("Isolationsfehler"));
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(
+    page,
+    page.locator(
+      "div:nth-child(8) > .relative.bg-gray-300 > .relative.w-\\[7\\.075rem\\] > .relative.mt-\\[3\\.125rem\\] > .text-center > span:nth-child(2)"
+    )
+  );
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(
+    page,
+    page.getByText(/^RSL: \d+,\d{3} kOhm$/).nth(3)
+  );
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(page, page.getByText("Kabel 8"));
+  await page.waitForTimeout(400);
+
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(
+    page,
+    page.locator(".bg-littwin-blue.text-white.text-\\[0\\.625rem\\]").first()
+  );
+  await page.waitForTimeout(400);
+
+  // ... (weitere Schritte können nach diesem Muster ergänzt werden)
+
+  // Beispiel für weitere Schritte aus dem Kommentar:
+  await highlightAndExpectVisible(
+    page,
+    page.locator(".bg-littwin-blue.text-white.text-\\[0\\.625rem\\]").first()
+  );
+  await page.waitForTimeout(400);
+  await page
+    .locator(".bg-littwin-blue.text-white.text-\\[0\\.625rem\\]")
+    .first()
+    .click();
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("heading", { name: "Isolationswiderstand" })
+  );
+  await page.waitForTimeout(400);
+  await page.getByRole("heading", { name: "Isolationswiderstand" }).click();
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(page, page.getByText("KÜ 1"));
+  await page.waitForTimeout(400);
+  await page.getByText("KÜ 1").click();
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(page, page.getByText("Von"));
+  await page.waitForTimeout(400);
+  await page.getByText("Von").click();
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(
+    page,
+    page.locator("div").filter({ hasText: /^Von$/ }).getByRole("textbox")
+  );
+  await page.waitForTimeout(400);
+  await page
+    .locator("div")
+    .filter({ hasText: /^Von$/ })
+    .getByRole("textbox")
+    .click();
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(page, page.getByText("Bis"));
+  await page.waitForTimeout(400);
+  await page.getByText("Bis").click();
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(
+    page,
+    page.locator("div").filter({ hasText: /^Bis$/ }).getByRole("textbox")
+  );
+  await page.waitForTimeout(400);
+  await page
+    .locator("div")
+    .filter({ hasText: /^Bis$/ })
+    .getByRole("textbox")
+    .click();
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("button", { name: "Alle Messwerte" })
+  );
+  await page.waitForTimeout(400);
+  await page.getByRole("button", { name: "Alle Messwerte" }).click();
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("option", { name: "Stündliche Werte" })
+  );
+  await page.waitForTimeout(400);
+  await page.getByRole("option", { name: "Stündliche Werte" }).click();
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("button", { name: "Stündliche Werte" })
+  );
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("button", { name: "Daten laden" })
+  );
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(page, page.locator("canvas"));
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("button", { name: "" })
+  );
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("button", { name: "" })
+  );
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("button", { name: "Messkurve" })
+  );
+  await page.waitForTimeout(400);
+  await page.getByRole("button", { name: "Messkurve" }).click();
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("option", { name: "Meldungen" })
+  );
+  await page.waitForTimeout(400);
+  await page.getByRole("option", { name: "Meldungen" }).click();
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("cell", { name: "Prio" })
+  );
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("cell", { name: "Zeitstempel" })
+  );
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("cell", { name: "Quelle" })
+  );
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("cell", { name: "Meldung" })
+  );
+  await page.waitForTimeout(400);
+
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("cell", { name: "Status" })
+  );
+  await page.waitForTimeout(400);
+}

playwright/tests/pages/kabelueberwachungTest.ts

@@ -1,704 +0,0 @@
-import type { Page } from "@playwright/test";
-import { highlightAndExpectVisible } from "../utils/highlight";
-
-export async function runCableMonitoringTest(page: Page) {
-  await page.goto("/kabelueberwachung");
-
-  // Logo
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("img", { name: "Logo", exact: true })
-  );
-  await page.waitForTimeout(400);
-
-  // TALAS Logo
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("img", { name: "TALAS Logo" })
-  );
-  await page.waitForTimeout(400);
-
-  // Meldestation
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("heading", { name: "Meldestation" })
-  );
-  await page.waitForTimeout(400);
-
-  // CPLV4 Ismail Rastede
-  await highlightAndExpectVisible(page, page.getByText("CPLV4 Ismail Rastede"));
-  await page.waitForTimeout(400);
-
-  // Rack Buttons
-  for (const rack of [1, 2, 3, 4, 1]) {
-    await highlightAndExpectVisible(
-      page,
-      page.getByRole("button", { name: `Rack ${rack}` })
-    );
-    await page.waitForTimeout(400);
-  }
-
-  // Kabel 1
-  await highlightAndExpectVisible(page, page.getByText("1", { exact: true }));
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(
-    page,
-    page.locator("div").filter({ hasText: /^8$/ })
-  );
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(
-    page,
-    page
-      .locator("div")
-      .filter({ hasText: /^1KÜ705-FO⚙$/ })
-      .getByRole("heading")
-  );
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(page, page.getByText("1", { exact: true }));
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(
-    page,
-    page
-      .locator("div")
-      .filter({ hasText: /^1KÜ705-FO⚙$/ })
-      .getByRole("button")
-  );
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(
-    page,
-    page.locator(".flex.flex-col > span").first()
-  );
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(
-    page,
-    page.locator(".w-\\[0\\.625rem\\]").first()
-  );
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(
-    page,
-    page.locator("span:nth-child(2)").first()
-  );
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(
-    page,
-    page
-      .locator(".w-\\[0\\.625rem\\].h-\\[0\\.625rem\\].rounded-full.bg-red-500")
-      .first()
-  );
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(page, page.getByText("Erdschluss").first());
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(
-    page,
-    page.locator(".text-center > span:nth-child(2)").first()
-  );
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(
-    page,
-    page.getByText(/^RSL: \d+,\d{3} kOhm$/).first()
-  );
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(page, page.getByText("Kabel 1"));
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(
-    page,
-    page.locator(".text-black.text-\\[0\\.625rem\\].font-semibold").first()
-  );
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(
-    page,
-    page.locator(".bg-littwin-blue.text-white.text-\\[0\\.625rem\\]").first()
-  );
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(
-    page,
-    page.locator(".flex > button:nth-child(2)").first()
-  );
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(
-    page,
-    page.locator(".bg-littwin-blue.text-white.cursor-pointer").first()
-  );
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(page, page.getByText("V4.20"));
-  await page.waitForTimeout(400);
-
-  // Kabel 8
-  await highlightAndExpectVisible(page, page.getByText("8", { exact: true }));
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(
-    page,
-    page
-      .locator("div")
-      .filter({ hasText: /^8KÜ705-FO⚙$/ })
-      .getByRole("heading")
-  );
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(
-    page,
-    page
-      .locator("div")
-      .filter({ hasText: /^8KÜ705-FO⚙$/ })
-      .getByRole("button")
-  );
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(
-    page,
-    page
-      .locator(
-        "div:nth-child(8) > .relative.bg-gray-300 > .relative.w-\\[7\\.075rem\\] > .flex.flex-col.mt-\\[0\\.625rem\\] > .flex.items-center.space-x-\\[0\\.25rem\\] > .flex.flex-col.items-start > span"
-      )
-      .first()
-  );
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(
-    page,
-    page.locator(
-      "div:nth-child(8) > .relative.bg-gray-300 > .relative.w-\\[7\\.075rem\\] > .flex.flex-col.mt-\\[0\\.625rem\\] > .flex.items-center.space-x-\\[0\\.25rem\\] > .flex.flex-col.items-start > span:nth-child(2)"
-    )
-  );
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(
-    page,
-    page.locator(
-      "div:nth-child(8) > .relative.bg-gray-300 > .relative.w-\\[7\\.075rem\\] > .flex.flex-col.mt-\\[0\\.625rem\\] > .flex.items-center.space-x-\\[0\\.25rem\\] > .flex.flex-col.items-center > .w-\\[0\\.625rem\\].h-\\[0\\.625rem\\].bg-green-500"
-    )
-  );
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(
-    page,
-    page.locator(
-      "div:nth-child(8) > .relative.bg-gray-300 > .relative.w-\\[7\\.075rem\\] > .flex.flex-col.mt-\\[0\\.625rem\\] > .flex.items-center.space-x-\\[0\\.25rem\\] > .flex.flex-col.items-center > .w-\\[0\\.625rem\\].h-\\[0\\.625rem\\].rounded-full.bg-red-500"
-    )
-  );
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(page, page.getByText("Isolationsfehler"));
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(
-    page,
-    page.locator(
-      "div:nth-child(8) > .relative.bg-gray-300 > .relative.w-\\[7\\.075rem\\] > .relative.mt-\\[3\\.125rem\\] > .text-center > span:nth-child(2)"
-    )
-  );
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(
-    page,
-    page.getByText(/^RSL: \d+,\d{3} kOhm$/).nth(3)
-  );
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(page, page.getByText("Kabel 8"));
-  await page.waitForTimeout(400);
-
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(
-    page,
-    page.locator(".bg-littwin-blue.text-white.text-\\[0\\.625rem\\]").first()
-  );
-  await page.waitForTimeout(400);
-
-  // ... (weitere Schritte können nach diesem Muster ergänzt werden)
-
-  // Beispiel für weitere Schritte aus dem Kommentar:
-  await highlightAndExpectVisible(
-    page,
-    page.locator(".bg-littwin-blue.text-white.text-\\[0\\.625rem\\]").first()
-  );
-  await page.waitForTimeout(400);
-  await page
-    .locator(".bg-littwin-blue.text-white.text-\\[0\\.625rem\\]")
-    .first()
-    .click();
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("heading", { name: "Isolationswiderstand" })
-  );
-  await page.waitForTimeout(400);
-  await page.getByRole("heading", { name: "Isolationswiderstand" }).click();
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(page, page.getByText("KÜ 1"));
-  await page.waitForTimeout(400);
-  await page.getByText("KÜ 1").click();
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(page, page.getByText("Von"));
-  await page.waitForTimeout(400);
-  await page.getByText("Von").click();
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(
-    page,
-    page.locator("div").filter({ hasText: /^Von$/ }).getByRole("textbox")
-  );
-  await page.waitForTimeout(400);
-  await page
-    .locator("div")
-    .filter({ hasText: /^Von$/ })
-    .getByRole("textbox")
-    .click();
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(page, page.getByText("Bis"));
-  await page.waitForTimeout(400);
-  await page.getByText("Bis").click();
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(
-    page,
-    page.locator("div").filter({ hasText: /^Bis$/ }).getByRole("textbox")
-  );
-  await page.waitForTimeout(400);
-  await page
-    .locator("div")
-    .filter({ hasText: /^Bis$/ })
-    .getByRole("textbox")
-    .click();
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("button", { name: "Alle Messwerte" })
-  );
-  await page.waitForTimeout(400);
-  await page.getByRole("button", { name: "Alle Messwerte" }).click();
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("option", { name: "Stündliche Werte" })
-  );
-  await page.waitForTimeout(400);
-  await page.getByRole("option", { name: "Stündliche Werte" }).click();
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("button", { name: "Stündliche Werte" })
-  );
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("button", { name: "Daten laden" })
-  );
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(page, page.locator("canvas"));
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("button", { name: "" })
-  );
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("button", { name: "" })
-  );
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("button", { name: "Messkurve" })
-  );
-  await page.waitForTimeout(400);
-  await page.getByRole("button", { name: "Messkurve" }).click();
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("option", { name: "Meldungen" })
-  );
-  await page.waitForTimeout(400);
-  await page.getByRole("option", { name: "Meldungen" }).click();
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("cell", { name: "Prio" })
-  );
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("cell", { name: "Zeitstempel" })
-  );
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("cell", { name: "Quelle" })
-  );
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("cell", { name: "Meldung" })
-  );
-  await page.waitForTimeout(400);
-
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("cell", { name: "Status" })
-  );
-  await page.waitForTimeout(400);
-
-  // ...weitere Schritte können nach diesem Muster ergänzt werden
-}
-
-/*
-import { test, expect } from '@playwright/test';
-
-test('test', async ({ page }) => {
-  await page.goto('http://localhost:3000/kabelueberwachung');
-  await page.getByRole('img', { name: 'Logo', exact: true }).click();
-  await page.getByRole('img', { name: 'TALAS Logo' }).click();
-  await page.getByRole('heading', { name: 'Meldestation' }).click();
-  await page.getByText('CPLV4 Ismail Rastede').click();
-  await page.getByRole('button', { name: 'Rack 1' }).click();
-  await page.getByRole('button', { name: 'Rack 2' }).click();
-  await page.getByRole('button', { name: 'Rack 3' }).click();
-  await page.getByRole('button', { name: 'Rack 4' }).click();
-  await page.getByRole('button', { name: 'Rack 1' }).click();
-  await expect(page.getByText('1', { exact: true })).toBeVisible();
-  await expect(page.locator('div').filter({ hasText: /^8$/ })).toBeVisible();
-  await expect(page.locator('div').filter({ hasText: /^1KÜ705-FO⚙$/ }).getByRole('heading')).toBeVisible();
-  await expect(page.getByText('1', { exact: true })).toBeVisible();
-  await expect(page.locator('div').filter({ hasText: /^1KÜ705-FO⚙$/ }).getByRole('button')).toBeVisible();
-  await expect(page.locator('.flex.flex-col > span').first()).toBeVisible();
-  await expect(page.locator('.w-\\[0\\.625rem\\]').first()).toBeVisible();
-  await expect(page.locator('span:nth-child(2)').first()).toBeVisible();
-  await expect(page.locator('.w-\\[0\\.625rem\\].h-\\[0\\.625rem\\].rounded-full.bg-red-500').first()).toBeVisible();
-  await expect(page.getByText('Erdschluss').first()).toBeVisible();
-  await expect(page.locator('.text-center > span:nth-child(2)').first()).toBeVisible();
-  await expect(page.getByText('RSL: 0 kOhm').first()).toBeVisible();
-  await expect(page.getByText('Kabel 1')).toBeVisible();
-  await expect(page.locator('.text-black.text-\\[0\\.625rem\\].font-semibold').first()).toBeVisible();
-  await expect(page.locator('.bg-littwin-blue.text-white.text-\\[0\\.625rem\\]').first()).toBeVisible();
-  await expect(page.locator('.flex > button:nth-child(2)').first()).toBeVisible();
-  await expect(page.locator('.bg-littwin-blue.text-white.cursor-pointer').first()).toBeVisible();
-  await expect(page.getByText('V4.20')).toBeVisible();
-  await expect(page.getByText('8', { exact: true })).toBeVisible();
-  await expect(page.locator('div').filter({ hasText: /^8KÜ705-FO⚙$/ }).getByRole('heading')).toBeVisible();
-  await expect(page.locator('div').filter({ hasText: /^8KÜ705-FO⚙$/ }).getByRole('button')).toBeVisible();
-  await expect(page.locator('div:nth-child(8) > .relative.bg-gray-300 > .relative.w-\\[7\\.075rem\\] > .flex.flex-col.mt-\\[0\\.625rem\\] > .flex.items-center.space-x-\\[0\\.25rem\\] > .flex.flex-col.items-start > span').first()).toBeVisible();
-  await expect(page.locator('div:nth-child(8) > .relative.bg-gray-300 > .relative.w-\\[7\\.075rem\\] > .flex.flex-col.mt-\\[0\\.625rem\\] > .flex.items-center.space-x-\\[0\\.25rem\\] > .flex.flex-col.items-start > span:nth-child(2)')).toBeVisible();
-  await expect(page.locator('div:nth-child(8) > .relative.bg-gray-300 > .relative.w-\\[7\\.075rem\\] > .flex.flex-col.mt-\\[0\\.625rem\\] > .flex.items-center.space-x-\\[0\\.25rem\\] > .flex.flex-col.items-center > .w-\\[0\\.625rem\\].h-\\[0\\.625rem\\].bg-green-500')).toBeVisible();
-  await expect(page.locator('div:nth-child(8) > .relative.bg-gray-300 > .relative.w-\\[7\\.075rem\\] > .flex.flex-col.mt-\\[0\\.625rem\\] > .flex.items-center.space-x-\\[0\\.25rem\\] > .flex.flex-col.items-center > .w-\\[0\\.625rem\\].h-\\[0\\.625rem\\].rounded-full.bg-red-500')).toBeVisible();
-  await expect(page.getByText('Isolationsfehler')).toBeVisible();
-  await expect(page.locator('div:nth-child(8) > .relative.bg-gray-300 > .relative.w-\\[7\\.075rem\\] > .relative.mt-\\[3\\.125rem\\] > .text-center > span:nth-child(2)')).toBeVisible();
-  await expect(page.getByText('RSL: 0 kOhm').nth(3)).toBeVisible();
-  await expect(page.getByText('Kabel 8')).toBeVisible();
-  await expect(page.locator('div:nth-child(8) > .relative.bg-gray-300 > .relative.w-\\[7\\.075rem\\] > .absolute.bottom-\\[0\\.063rem\\]')).toBeVisible();
-  await expect(page.locator('div:nth-child(8) > .relative.bg-gray-300 > .flex.flex-col.items-center.w-full.px-2 > .text-black')).toBeVisible();
-  await expect(page.locator('div:nth-child(8) > .relative.bg-gray-300 > .flex.flex-col.items-center.w-full.px-2 > div > button').first()).toBeVisible();
-  await expect(page.locator('div:nth-child(8) > .relative.bg-gray-300 > .flex.flex-col.items-center.w-full.px-2 > div > button:nth-child(2)').first()).toBeVisible();
-  await expect(page.locator('div:nth-child(8) > .relative.bg-gray-300 > .flex.flex-col.items-center.w-full.px-2 > .flex.space-x-2.p-1 > .bg-littwin-blue')).toBeVisible();
-  await expect(page.getByRole('main').locator('div').filter({ hasText: '8KÜ705-FO⚙BetriebAlarmIsolationsfehler ISO: 10 MOhmRSL: 0 kOhmKabel 8V4.' }).nth(2)).toBeVisible();
-  await expect(page.locator('.bg-littwin-blue.text-white.text-\\[0\\.625rem\\]').first()).toBeVisible();
-  await page.locator('.bg-littwin-blue.text-white.text-\\[0\\.625rem\\]').first().click();
-  await page.getByRole('heading', { name: 'Isolationswiderstand' }).click();
-  await page.getByText('KÜ 1').click();
-  await page.getByText('Von').click();
-  await page.locator('div').filter({ hasText: /^Von$/ }).getByRole('textbox').click();
-  await page.getByText('Bis').click();
-  await page.locator('div').filter({ hasText: /^Von$/ }).getByRole('textbox').click();
-  await expect(page.getByLabel('Choose Date').locator('div').filter({ hasText: 'July' }).first()).toBeVisible();
-  await page.getByRole('textbox').first().click();
-  await page.locator('div').filter({ hasText: /^Bis$/ }).getByRole('textbox').click();
-  await page.getByLabel('Choose Date').locator('div').filter({ hasText: 'August' }).first().click();
-  await page.getByText('Bis').click();
-  await expect(page.getByRole('button', { name: 'Alle Messwerte' })).toBeVisible();
-  await page.getByRole('button', { name: 'Alle Messwerte' }).click();
-  await expect(page.getByRole('button', { name: 'Alle Messwerte' })).toBeVisible();
-  await page.getByRole('button', { name: 'Alle Messwerte' }).click();
-  await page.getByRole('option', { name: 'Stündliche Werte' }).click();
-  await expect(page.getByRole('button', { name: 'Stündliche Werte' })).toBeVisible();
-  await page.getByRole('button', { name: 'Stündliche Werte' }).click();
-  await page.getByRole('option', { name: 'Tägliche Werte' }).click();
-  await expect(page.getByRole('button', { name: 'Tägliche Werte' })).toBeVisible();
-  await expect(page.getByRole('button', { name: 'Daten laden' })).toBeVisible();
-  await expect(page.locator('canvas')).toBeVisible();
-  await expect(page.getByRole('button', { name: '' })).toBeVisible();
-  await expect(page.getByRole('button', { name: '' })).toBeVisible();
-  await page.getByRole('button', { name: 'Messkurve' }).click();
-  await page.getByRole('option', { name: 'Meldungen' }).click();
-  await expect(page.getByRole('cell', { name: 'Prio' })).toBeVisible();
-  await page.getByRole('cell', { name: 'Zeitstempel' }).click();
-  await page.getByRole('cell', { name: 'Quelle' }).click();
-  await page.getByRole('cell', { name: 'Meldung' }).click();
-  await page.getByRole('cell', { name: 'Status' }).click();
-  await page.getByRole('row', { name: '11.08.2025, 12:05:00' }).getByRole('cell').first().click();
-  await page.getByRole('cell', { name: '12:05:00' }).click();
-  await page.getByRole('row', { name: '11.08.2025, 12:05:00' }).getByRole('cell').nth(2).click();
-  await page.getByRole('cell', { name: 'Modul online' }).click();
-  await page.getByRole('cell', { name: 'online', exact: true }).click();
-  await page.getByRole('row', { name: '11.08.2025, 12:06:00' }).getByRole('cell').first().click();
-  await page.getByRole('cell', { name: '12:06:00' }).click();
-  await page.getByRole('row', { name: '11.08.2025, 12:06:00' }).getByRole('cell').nth(2).click();
-  await page.getByRole('cell', { name: 'Aderbruch kommend' }).click();
-  await page.getByRole('cell', { name: '1', exact: true }).first().click();
-  await page.getByRole('row', { name: '11.08.2025, 12:06:30' }).getByRole('cell').first().click();
-  await page.getByRole('cell', { name: '12:06:30' }).click();
-  await page.getByRole('row', { name: '11.08.2025, 12:06:30' }).getByRole('cell').nth(2).click();
-  await page.getByRole('cell', { name: 'Aderbruch gehend' }).click();
-  await page.getByRole('cell', { name: '0', exact: true }).first().click();
-  await page.getByRole('row', { name: '11.08.2025, 12:07:00' }).getByRole('cell').first().click();
-  await page.getByRole('cell', { name: '12:07:00' }).click();
-  await page.getByRole('row', { name: '11.08.2025, 12:07:00' }).getByRole('cell').nth(2).click();
-  await page.getByRole('cell', { name: 'Erdschluss kommend' }).click();
-  await page.getByRole('cell', { name: '1', exact: true }).nth(1).click();
-  await page.getByRole('row', { name: '11.08.2025, 12:07:20' }).getByRole('cell').first().click();
-  await page.getByRole('cell', { name: '12:07:20' }).click();
-  await page.getByRole('row', { name: '11.08.2025, 12:07:20' }).getByRole('cell').nth(2).click();
-  await page.getByRole('cell', { name: 'Erdschluss gehend' }).click();
-  await page.getByRole('cell', { name: '0', exact: true }).nth(1).click();
-  await page.getByRole('row', { name: '11.08.2025, 12:07:40' }).getByRole('cell').first().click();
-  await page.getByRole('cell', { name: '12:07:40' }).click();
-  await page.getByRole('row', { name: '11.08.2025, 12:07:40' }).getByRole('cell').nth(2).click();
-  await page.getByRole('cell', { name: 'Isofehler kommend' }).click();
-  await page.getByRole('cell', { name: '1', exact: true }).nth(2).click();
-  await page.getByRole('row', { name: '11.08.2025, 12:08:10' }).getByRole('cell').first().click();
-  await page.getByRole('cell', { name: '12:08:10' }).click();
-  await page.getByRole('row', { name: '11.08.2025, 12:08:10' }).getByRole('cell').nth(2).click();
-  await page.getByRole('cell', { name: 'Isofehler gehend' }).click();
-  await page.getByRole('cell', { name: '0', exact: true }).nth(2).click();
-  await page.getByRole('button', { name: '' }).click();
-  await page.getByRole('button', { name: '' }).click();
-  await page.getByRole('button', { name: '' }).click();
-  await page.locator('.flex > button:nth-child(2)').first().click();
-  await page.locator('canvas').click({
-    position: {
-      x: 547,
-      y: 113
-    }
-  });
-  await page.getByText('KÜ 1').click();
-  await page.getByText('Von').click();
-  await page.getByText('Bis').click();
-  await page.locator('div').filter({ hasText: /^Von$/ }).getByRole('textbox').click();
-  await page.getByLabel('Choose Date').locator('div').filter({ hasText: 'July' }).first().click();
-  await page.locator('div').filter({ hasText: /^Bis$/ }).getByRole('textbox').click();
-  await page.getByLabel('Choose Date').locator('div').filter({ hasText: 'August' }).first().click();
-  await expect(page.getByRole('button', { name: 'Alle Messwerte' })).toBeVisible();
-  await page.getByRole('button', { name: 'Alle Messwerte' }).click();
-  await page.getByRole('option', { name: 'Stündliche Werte' }).click();
-  await expect(page.getByRole('button', { name: 'Stündliche Werte' })).toBeVisible();
-  await page.getByRole('button', { name: 'Stündliche Werte' }).click();
-  await page.getByRole('option', { name: 'Tägliche Werte' }).click();
-  await expect(page.getByRole('button', { name: 'Tägliche Werte' })).toBeVisible();
-  await expect(page.getByRole('button', { name: 'RSL starten' })).toBeVisible();
-  await expect(page.getByRole('button', { name: 'Daten laden' })).toBeVisible();
-  await expect(page.getByRole('button', { name: 'Messkurve' })).toBeVisible();
-  await expect(page.getByRole('button', { name: '' })).toBeVisible();
-  await expect(page.getByRole('button', { name: '' })).toBeVisible();
-  await page.getByRole('button', { name: 'RSL starten' }).click();
-  await expect(page.getByText('RSL Messung läuft')).toBeVisible();
-  await expect(page.locator('.h-full.bg-littwin-blue')).toBeVisible();
-  await page.getByRole('button', { name: 'Messkurve' }).click();
-  await page.getByRole('option', { name: 'Meldungen' }).click();
-  await page.getByRole('cell', { name: 'Prio' }).click();
-  await page.getByRole('cell', { name: 'Zeitstempel' }).click();
-  await page.getByRole('cell', { name: 'Quelle' }).click();
-  await page.getByRole('cell', { name: 'Meldung' }).click();
-  await page.getByRole('cell', { name: 'Status' }).click();
-  await page.getByRole('row', { name: '11.08.2025, 12:05:00' }).getByRole('cell').first().click();
-  await page.getByRole('cell', { name: '12:05:00' }).click();
-  await page.getByRole('cell', { name: 'CableLine1' }).first().click();
-  await page.getByRole('cell', { name: 'Modul online' }).click();
-  await page.getByRole('cell', { name: 'online', exact: true }).click();
-  await page.getByRole('row', { name: '11.08.2025, 12:06:00' }).getByRole('cell').first().click();
-  await page.getByRole('cell', { name: '12:06:00' }).click();
-  await page.getByRole('cell', { name: 'CableLine1' }).nth(1).click();
-  await page.getByRole('cell', { name: 'Aderbruch kommend' }).click();
-  await page.getByRole('cell', { name: '1', exact: true }).first().click();
-  await page.getByRole('row', { name: '11.08.2025, 12:06:30' }).getByRole('cell').first().click();
-  await page.getByRole('cell', { name: '12:06:30' }).click();
-  await page.getByRole('cell', { name: 'CableLine1' }).nth(2).click();
-  await page.getByRole('cell', { name: 'Aderbruch gehend' }).click();
-  await page.getByRole('cell', { name: '0', exact: true }).first().click();
-  await page.getByRole('row', { name: '11.08.2025, 12:08:40' }).getByRole('cell').first().click();
-  await page.getByRole('cell', { name: '12:08:40' }).click();
-  await page.getByRole('cell', { name: 'CableLine1' }).nth(3).click();
-  await page.getByRole('cell', { name: 'Schleifenfehler kommend' }).click();
-  await page.getByRole('cell', { name: '1', exact: true }).nth(1).click();
-  await page.getByRole('row', { name: '11.08.2025, 12:09:00' }).getByRole('cell').first().click();
-  await page.getByRole('cell', { name: '12:09:00' }).click();
-  await page.getByRole('cell', { name: 'CableLine1' }).nth(4).click();
-  await page.getByRole('cell', { name: 'Schleifenfehler gehend' }).click();
-  await page.getByRole('cell', { name: '0', exact: true }).nth(1).click();
-  await expect(page.getByRole('button', { name: '' })).toBeVisible();
-  await page.getByRole('button', { name: '' }).click();
-  await expect(page.locator('.bg-littwin-blue.text-white.cursor-pointer').first()).toBeVisible();
-  await page.locator('.bg-littwin-blue.text-white.cursor-pointer').first().click();
-  await page.getByRole('heading', { name: 'TDR-Messung' }).click();
-  await page.getByText('KÜ 1').click();
-  await expect(page.getByRole('button', { name: 'TDR-Kurve als Referenz' })).toBeVisible();
-  page.once('dialog', dialog => {
-    console.log(`Dialog message: ${dialog.message()}`);
-    dialog.dismiss().catch(() => {});
-  });
-  await page.getByRole('button', { name: 'Messung aktivieren' }).click();
-  await expect(page.getByRole('button', { name: '27.03.2025, 23:42:41 –' })).toBeVisible();
-  await expect(page.getByRole('button', { name: 'Messkurve' })).toBeVisible();
-  await expect(page.getByRole('button', { name: '' })).toBeVisible();
-  await page.getByRole('button', { name: '' }).click();
-  await expect(page.getByRole('button', { name: '' })).toBeVisible();
-  await expect(page.getByRole('button', { name: '' })).toBeVisible();
-  await page.getByRole('button', { name: '' }).click();
-  await page.locator('.bg-littwin-blue.text-white.cursor-pointer').first().click();
-  await expect(page.locator('canvas')).toBeVisible();
-  page.once('dialog', dialog => {
-    console.log(`Dialog message: ${dialog.message()}`);
-    dialog.dismiss().catch(() => {});
-  });
-  await page.getByRole('button', { name: 'Messung aktivieren' }).click();
-  await page.getByRole('button', { name: 'Messkurve' }).click();
-  await page.getByRole('option', { name: 'Meldungen' }).click();
-  await page.getByRole('cell', { name: 'Prio' }).click();
-  await page.getByRole('cell', { name: 'Zeitstempel' }).click();
-  await page.getByRole('cell', { name: 'Quelle' }).click();
-  await page.getByRole('cell', { name: 'Meldung' }).click();
-  await page.getByRole('cell', { name: 'Status' }).click();
-  await page.getByRole('row', { name: '11.08.2025, 12:05:00' }).getByRole('cell').first().click();
-  await page.getByRole('cell', { name: '12:05:00' }).click();
-  await page.getByRole('cell', { name: '12:05:00' }).click();
-  await page.getByRole('cell', { name: 'CableLine1' }).first().click();
-  await page.getByRole('cell', { name: 'Modul online' }).click();
-  await page.getByRole('cell', { name: 'online', exact: true }).click();
-  await page.getByRole('row', { name: '11.08.2025, 12:09:20' }).getByRole('cell').first().click();
-  await page.getByRole('cell', { name: '12:09:20' }).click();
-  await page.getByRole('cell', { name: 'CableLine1' }).nth(1).click();
-  await page.getByRole('cell', { name: 'TDR aktiv' }).click();
-  await page.getByRole('cell', { name: 'start' }).click();
-  await page.getByRole('row', { name: '11.08.2025, 12:09:50' }).getByRole('cell').first().click();
-  await page.getByRole('cell', { name: '12:09:50' }).click();
-  await page.getByRole('cell', { name: 'CableLine1' }).nth(2).click();
-  await page.getByRole('cell', { name: 'TDR Entfernung 123m' }).click();
-  await page.getByRole('cell', { name: '123', exact: true }).click();
-  await expect(page.getByRole('button', { name: 'Meldungen' })).toBeVisible();
-  await expect(page.getByRole('button', { name: '' })).toBeVisible();
-  await expect(page.getByRole('button', { name: '' })).toBeVisible();
-  await page.getByRole('button', { name: '' }).click();
-  await expect(page.locator('div:nth-child(8) > .relative.bg-gray-300 > .flex.flex-col.items-center.w-full.px-2 > div > button').first()).toBeVisible();
-  await page.locator('div:nth-child(8) > .relative.bg-gray-300 > .flex.flex-col.items-center.w-full.px-2 > div > button').first().click();
-  await page.getByText('KÜ 8').click();
-  await page.getByText('Von').click();
-  await page.locator('div').filter({ hasText: /^Von$/ }).getByRole('textbox').click();
-  await page.getByLabel('Choose Date').locator('div').filter({ hasText: 'July' }).first().click();
-  await page.getByText('Bis').click();
-  await page.getByText('Bis').click();
-  await page.locator('div').filter({ hasText: /^Bis$/ }).getByRole('textbox').click();
-  await page.getByRole('dialog', { name: 'Choose Date' }).click();
-  await page.getByRole('button', { name: 'Alle Messwerte' }).click();
-  await page.getByRole('button', { name: 'Alle Messwerte' }).click();
-  await expect(page.getByRole('button', { name: 'Alle Messwerte' })).toBeVisible();
-  await page.getByRole('button', { name: 'Alle Messwerte' }).click();
-  await page.getByRole('option', { name: 'Stündliche Werte' }).click();
-  await expect(page.getByRole('button', { name: 'Stündliche Werte' })).toBeVisible();
-  await page.getByRole('button', { name: 'Stündliche Werte' }).click();
-  await page.getByRole('option', { name: 'Tägliche Werte' }).click();
-  await expect(page.getByRole('button', { name: 'Tägliche Werte' })).toBeVisible();
-  await expect(page.getByRole('button', { name: 'Daten laden' })).toBeVisible();
-  await expect(page.getByRole('button', { name: '' })).toBeVisible();
-  await page.getByRole('button', { name: '' }).click();
-  await page.getByRole('button', { name: '' }).click();
-  await expect(page.getByRole('button', { name: '' })).toBeVisible();
-  await expect(page.getByRole('button', { name: 'Messkurve' })).toBeVisible();
-  await page.getByRole('button', { name: 'Messkurve' }).click();
-  await page.getByRole('option', { name: 'Meldungen' }).click();
-  await expect(page.getByText('Keine Meldungen für')).toBeVisible();
-  await expect(page.getByRole('button', { name: '' })).toBeVisible();
-  await page.getByRole('button', { name: '' }).click();
-  await expect(page.locator('div:nth-child(8) > .relative.bg-gray-300 > .flex.flex-col.items-center.w-full.px-2 > .flex.space-x-2.p-1 > .bg-littwin-blue')).toBeVisible();
-  await page.locator('div:nth-child(8) > .relative.bg-gray-300 > .flex.flex-col.items-center.w-full.px-2 > .flex.space-x-2.p-1 > .bg-littwin-blue').click();
-  await page.getByRole('heading', { name: 'TDR-Messung' }).click();
-  await page.getByText('KÜ 8').click();
-  await expect(page.getByRole('button', { name: 'Messung aktivieren' })).toBeVisible();
-  await expect(page.getByRole('button', { name: 'Messkurve' })).toBeVisible();
-  await page.locator('canvas').click({
-    position: {
-      x: 252,
-      y: 84
-    }
-  });
-  await expect(page.getByRole('button', { name: '' })).toBeVisible();
-  await page.getByRole('button', { name: '' }).click();
-  await expect(page.getByRole('button', { name: '' })).toBeVisible();
-  await page.getByRole('button', { name: '' }).click();
-  await expect(page.getByRole('button', { name: '' })).toBeVisible();
-  await page.getByRole('button', { name: '' }).click();
-  await page.getByRole('button', { name: 'Rack 2' }).click();
-  await expect(page.getByText('9', { exact: true })).toBeVisible();
-  await expect(page.getByText('16', { exact: true })).toBeVisible();
-  await page.getByText('Kabel 9').click();
-  await page.getByText('Kabel 10').click();
-  await page.getByText('Kabel 11').click();
-  await page.getByText('Kabel 12').click();
-  await page.getByText('Kabel 13').click();
-  await page.getByText('Kabel 14').click();
-  await page.getByText('Kabel 15').click();
-  await page.getByText('Kabel 16').click();
-  await page.getByRole('button', { name: 'Rack 3' }).click();
-  await page.getByText('Kabel 17').click();
-  await page.getByText('Kabel 18').click();
-  await page.getByText('Kabel 19').click();
-  await page.getByText('Kabel 20').click();
-  await page.getByText('Kabel 20').click();
-  await page.getByText('Kabel 21').click();
-  await page.getByText('Kabel 22').click();
-  await page.getByText('Kabel 23').click();
-  await page.getByText('Kabel 24').click();
-  await page.getByRole('button', { name: 'Rack 4' }).click();
-  await page.getByText('25', { exact: true }).click();
-  await page.getByText('Kabel 25').click();
-  await page.getByText('26', { exact: true }).click();
-  await page.getByText('Kabel 26').click();
-  await page.getByText('27', { exact: true }).click();
-  await page.getByText('Kabel 27').click();
-  await page.getByText('28', { exact: true }).click();
-  await page.getByText('Kabel 28').click();
-  await page.getByText('29', { exact: true }).click();
-  await page.getByText('Kabel 29').click();
-  await page.getByText('30', { exact: true }).click();
-  await page.getByText('Kabel 30').click();
-  await page.locator('div').filter({ hasText: /^31$/ }).click();
-  await page.getByText('Kabel 31').click();
-  await page.getByText('32', { exact: true }).click();
-  await page.getByText('Kabel 32').click();
-  await page.locator('div').filter({ hasText: /^Littwin Systemtechnik GmbH & Co\. KG$/ }).locator('svg').click();
-  await page.getByText('Littwin Systemtechnik GmbH &').click();
-  await page.locator('div').filter({ hasText: /^Telefon: 04402 972577-0$/ }).locator('path').click();
-});
-*/

playwright/tests/pages/meldungen/meldungenTest.ts

@@ -0,0 +1,130 @@
+import type { Page } from "@playwright/test";
+import { highlightAndExpectVisible } from "@playwright/utils/highlight";
+import { navTest } from "@playwright/components/navTest";
+import { headerTest } from "@playwright/components/headerTest";
+import { footerTest } from "@playwright/components/footerTest";
+
+export async function runMeldungenTest(page: Page) {
+  await page.goto("/meldungen");
+  //----------------------
+  await headerTest(page);
+  await navTest(page);
+  await footerTest(page);
+  await page.waitForTimeout(400);
+  //----------------------
+
+  // Berichte Heading
+  const berichteHeading = page.getByRole("heading", { name: "Berichte" });
+  await highlightAndExpectVisible(page, berichteHeading);
+  await berichteHeading.click();
+  await page.waitForTimeout(100);
+
+  // Von
+  const vonText = page.getByText("Von");
+  await highlightAndExpectVisible(page, vonText);
+  await vonText.click();
+  await page.waitForTimeout(50);
+
+  const vonTextbox = page
+    .locator("div")
+    .filter({ hasText: /^Von$/ })
+    .getByRole("textbox");
+  await highlightAndExpectVisible(page, vonTextbox);
+  await vonTextbox.click();
+  await page.waitForTimeout(50);
+
+  /*   const julyDate = page
+    .getByLabel("Choose Date")
+    .locator("div")
+    .filter({ hasText: "July" })
+    .first();
+  await highlightAndExpectVisible(page, julyDate);
+  await expect(julyDate).toBeVisible(); */
+  await page.waitForTimeout(50);
+
+  await vonTextbox.click();
+  await page.waitForTimeout(50);
+
+  const bisTextbox = page
+    .locator("div")
+    .filter({ hasText: /^Bis$/ })
+    .getByRole("textbox");
+  await highlightAndExpectVisible(page, bisTextbox);
+  await bisTextbox.click();
+  await page.waitForTimeout(50);
+
+  /*   const augustDate = page
+    .getByLabel("Choose Date")
+    .locator("div")
+    .filter({ hasText: "August" })
+    .first();
+  await highlightAndExpectVisible(page, augustDate);
+  await expect(augustDate).toBeVisible();
+  await page.waitForTimeout(50); */
+
+  await bisTextbox.click();
+  await page.waitForTimeout(50);
+
+  await highlightAndExpectVisible(page, berichteHeading);
+  await berichteHeading.click();
+  await page.waitForTimeout(50);
+
+  // Buttons sichtbar
+  /*   const anzeigenBtn = page.getByRole("button", { name: "Anzeigen" });
+  await highlightAndExpectVisible(page, anzeigenBtn);
+  await expect(anzeigenBtn).toBeVisible();
+  await page.waitForTimeout(50); */
+
+  const alleQuellenBtn = page.getByRole("button", { name: "Alle Quellen" });
+  await highlightAndExpectVisible(page, alleQuellenBtn);
+  //  await expect(alleQuellenBtn).toBeVisible();
+  await alleQuellenBtn.click();
+  await page.waitForTimeout(50);
+  await alleQuellenBtn.click();
+  await page.waitForTimeout(50);
+
+  // Tabellenzellen
+  const tableCells = [
+    page.getByRole("cell", { name: "Prio" }),
+    page.getByRole("cell", { name: "Zeitstempel" }),
+    page.getByRole("cell", { name: "Quelle" }),
+    page.getByRole("cell", { name: "Meldung" }),
+    page.getByRole("cell", { name: "Status" }),
+  ];
+  for (const cell of tableCells) {
+    await highlightAndExpectVisible(page, cell);
+    await cell.click();
+    await page.waitForTimeout(30);
+  }
+
+  // Dynamische Zeilen und Zellen (Beispiel für mehrere Zeitstempel)
+  const zeiten = [
+    "11.08.2025, 11:52:44",
+    "11.08.2025, 11:51:14",
+    "11.08.2025, 11:44:19",
+    "11.08.2025, 11:43:44",
+    "11.08.2025, 11:36:42",
+    "11.08.2025, 11:35:45",
+    "11.08.2025, 11:21:16",
+    "11.08.2025, 11:21:05",
+    "11.08.2025, 11:14:01",
+  ];
+  for (const zeit of zeiten) {
+    const row = page.getByRole("row", { name: zeit });
+    await highlightAndExpectVisible(page, row.getByRole("cell").first());
+    await row.getByRole("cell").first().click();
+    await page.waitForTimeout(20);
+
+    const timeCell = page.getByRole("cell", { name: zeit.split(", ")[1] });
+    await highlightAndExpectVisible(page, timeCell);
+    await timeCell.click();
+    await page.waitForTimeout(20);
+
+    for (let i = 2; i <= 4; i++) {
+      const cell = row.getByRole("cell").nth(i);
+      await highlightAndExpectVisible(page, cell);
+      await cell.click();
+      await page.waitForTimeout(20);
+    }
+  }
+}

playwright/tests/pages/meldungenTest.ts

@@ -1,220 +0,0 @@
-// gigityOutputsTest.ts
-import type { Locator, Page } from "@playwright/test";
-import { expect } from "@playwright/test";
-
-export async function runMeldungenTest(page: Page) {
-  await page.goto("/meldungen");
-  // Warte gezielt auf das Logo, um Server-Latenz abzufangen
-  await page.waitForSelector('img[alt="Logo"]', { timeout: 15000 });
-
-  // Logo
-  const logo = page.getByRole("img", { name: "Logo", exact: true });
-  await highlightAndExpectVisible(page, logo);
-  await logo.click();
-  await page.waitForTimeout(100);
-
-  // TALAS Logo
-  const talasLogo = page.getByRole("img", { name: "TALAS Logo" });
-  await highlightAndExpectVisible(page, talasLogo);
-  await talasLogo.click();
-  await page.waitForTimeout(100);
-
-  // Meldestation Heading
-  const meldestation = page.getByRole("heading", { name: "Meldestation" });
-  await highlightAndExpectVisible(page, meldestation);
-  await meldestation.click();
-  await page.waitForTimeout(100);
-
-  // CPLV4 Ismail Rastede
-  const cplv4Text = page.getByText("CPLV4 Ismail Rastede");
-  await highlightAndExpectVisible(page, cplv4Text);
-  await cplv4Text.click();
-  await page.waitForTimeout(100);
-
-  // Dark Mode Button sichtbar
-  const darkModeBtn = page.getByRole("button", { name: "Dark Mode" });
-  await highlightAndExpectVisible(page, darkModeBtn);
-  await expect(darkModeBtn).toBeVisible();
-  await page.waitForTimeout(100);
-
-  // Sidebar Links sichtbar (wie in den anderen Tests, kein explizites Sidebar-Handling)
-  const sidebarLinks = [
-    { role: "link", name: "Übersicht" },
-    { role: "link", name: "Kabelüberwachung" },
-    { role: "link", name: "Meldungseingänge" },
-    { role: "link", name: "Schaltausgänge" },
-    { role: "link", name: "Messwerteingänge" },
-    { role: "link", name: "Berichte" },
-    { role: "link", name: "System" },
-    { role: "link", name: "Einstellungen" },
-  ];
-  for (const link of sidebarLinks) {
-    const locator = page.getByRole(link.role as any, { name: link.name });
-    await highlightAndExpectVisible(page, locator);
-    await expect(locator).toBeVisible();
-    await page.waitForTimeout(50);
-  }
-
-  for (const link of sidebarLinks) {
-    const locator = page.getByRole(link.role as any, { name: link.name });
-    await highlightAndExpectVisible(page, locator);
-    await expect(locator).toBeVisible();
-    await page.waitForTimeout(50);
-  }
-
-  // Berichte Heading
-  const berichteHeading = page.getByRole("heading", { name: "Berichte" });
-  await highlightAndExpectVisible(page, berichteHeading);
-  await berichteHeading.click();
-  await page.waitForTimeout(100);
-
-  // Von
-  const vonText = page.getByText("Von");
-  await highlightAndExpectVisible(page, vonText);
-  await vonText.click();
-  await page.waitForTimeout(50);
-
-  const vonTextbox = page
-    .locator("div")
-    .filter({ hasText: /^Von$/ })
-    .getByRole("textbox");
-  await highlightAndExpectVisible(page, vonTextbox);
-  await vonTextbox.click();
-  await page.waitForTimeout(50);
-
-  /*   const julyDate = page
-    .getByLabel("Choose Date")
-    .locator("div")
-    .filter({ hasText: "July" })
-    .first();
-  await highlightAndExpectVisible(page, julyDate);
-  await expect(julyDate).toBeVisible(); */
-  await page.waitForTimeout(50);
-
-  await vonTextbox.click();
-  await page.waitForTimeout(50);
-
-  const bisTextbox = page
-    .locator("div")
-    .filter({ hasText: /^Bis$/ })
-    .getByRole("textbox");
-  await highlightAndExpectVisible(page, bisTextbox);
-  await bisTextbox.click();
-  await page.waitForTimeout(50);
-
-  /*   const augustDate = page
-    .getByLabel("Choose Date")
-    .locator("div")
-    .filter({ hasText: "August" })
-    .first();
-  await highlightAndExpectVisible(page, augustDate);
-  await expect(augustDate).toBeVisible();
-  await page.waitForTimeout(50); */
-
-  await bisTextbox.click();
-  await page.waitForTimeout(50);
-
-  await highlightAndExpectVisible(page, berichteHeading);
-  await berichteHeading.click();
-  await page.waitForTimeout(50);
-
-  // Buttons sichtbar
-  const anzeigenBtn = page.getByRole("button", { name: "Anzeigen" });
-  await highlightAndExpectVisible(page, anzeigenBtn);
-  await expect(anzeigenBtn).toBeVisible();
-  await page.waitForTimeout(50);
-
-  const alleQuellenBtn = page.getByRole("button", { name: "Alle Quellen" });
-  await highlightAndExpectVisible(page, alleQuellenBtn);
-  await expect(alleQuellenBtn).toBeVisible();
-  await alleQuellenBtn.click();
-  await page.waitForTimeout(50);
-  await alleQuellenBtn.click();
-  await page.waitForTimeout(50);
-
-  // Tabellenzellen
-  const tableCells = [
-    page.getByRole("cell", { name: "Prio" }),
-    page.getByRole("cell", { name: "Zeitstempel" }),
-    page.getByRole("cell", { name: "Quelle" }),
-    page.getByRole("cell", { name: "Meldung" }),
-    page.getByRole("cell", { name: "Status" }),
-  ];
-  for (const cell of tableCells) {
-    await highlightAndExpectVisible(page, cell);
-    await cell.click();
-    await page.waitForTimeout(30);
-  }
-
-  // Dynamische Zeilen und Zellen (Beispiel für mehrere Zeitstempel)
-  const zeiten = [
-    "11.08.2025, 11:52:44",
-    "11.08.2025, 11:51:14",
-    "11.08.2025, 11:44:19",
-    "11.08.2025, 11:43:44",
-    "11.08.2025, 11:36:42",
-    "11.08.2025, 11:35:45",
-    "11.08.2025, 11:21:16",
-    "11.08.2025, 11:21:05",
-    "11.08.2025, 11:14:01",
-  ];
-  for (const zeit of zeiten) {
-    const row = page.getByRole("row", { name: zeit });
-    await highlightAndExpectVisible(page, row.getByRole("cell").first());
-    await row.getByRole("cell").first().click();
-    await page.waitForTimeout(20);
-
-    const timeCell = page.getByRole("cell", { name: zeit.split(", ")[1] });
-    await highlightAndExpectVisible(page, timeCell);
-    await timeCell.click();
-    await page.waitForTimeout(20);
-
-    for (let i = 2; i <= 4; i++) {
-      const cell = row.getByRole("cell").nth(i);
-      await highlightAndExpectVisible(page, cell);
-      await cell.click();
-      await page.waitForTimeout(20);
-    }
-  }
-}
-
-//---------------------------------------------------------------------
-
-export async function highlightAndExpectVisible(
-  page: Page,
-  locator: Locator,
-  durationMs = 800
-) {
-  // CSS nur einmal pro Page injizieren
-  const alreadyInjected = await page.evaluate(
-    () => (window as any).__pwForceCssInjected === true
-  );
-
-  if (!alreadyInjected) {
-    await page.addStyleTag({
-      content: `
-        .pw-force-outline {
-          outline: 3px solid #ff1744 !important;
-          outline-offset: 2px !important;
-          box-shadow: 0 0 0 3px rgba(224,0,43,.35) !important;
-        }
-      `,
-    });
-    await page.evaluate(() => {
-      (window as any).__pwForceCssInjected = true;
-    });
-  }
-
-  // Erst prüfen, ob das Element sichtbar ist, sonst bricht der Test sauber ab
-  await expect(locator).toBeVisible({ timeout: 10000 });
-  const els = await locator.elementHandles();
-  for (const el of els) {
-    await el.evaluate((node: unknown, ms: number) => {
-      const n = node as HTMLElement;
-      n.classList.add("pw-force-outline");
-      window.setTimeout(() => n.classList.remove("pw-force-outline"), ms);
-    }, durationMs);
-  }
-
-  await expect(locator).toBeVisible();
-}

playwright/tests/pages/settingsPage/settingsPageTest.ts

@@ -1,104 +1,17 @@
-import { expect } from "@playwright/test";
 import type { Page } from "@playwright/test";
-import { highlightAndExpectVisible } from "../utils/highlight";
+import { highlightAndExpectVisible } from "@playwright/utils/highlight";
+import { navTest } from "@playwright/components/navTest";
+import { headerTest } from "@playwright/components/headerTest";
+import { footerTest } from "@playwright/components/footerTest";
 
 export async function runSettingsPageTest(page: Page) {
-  await page.goto("http://localhost:3000/einstellungen");
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("heading", { name: "Meldestation" })
-  );
-
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("img", { name: "TALAS Logo" })
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("img", { name: "Logo", exact: true })
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("link", { name: "Übersicht" })
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("link", { name: "Kabelüberwachung" })
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("link", { name: "Meldungseingänge" })
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("link", { name: "Schaltausgänge" })
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("link", { name: "Messwerteingänge" })
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("link", { name: "Berichte" })
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("link", { name: "System" })
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("link", { name: "Einstellungen" })
-  );
-  await highlightAndExpectVisible(
-    page,
-    page
-      .locator("div")
-      .filter({ hasText: /^Littwin Systemtechnik GmbH & Co\. KG$/ })
-      .locator("svg")
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByText("Littwin Systemtechnik GmbH &")
-  );
-  await highlightAndExpectVisible(
-    page,
-    page
-      .locator("div")
-      .filter({ hasText: /^Telefon: 04402 972577-0$/ })
-      .locator("svg")
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByText("Telefon: 04402 972577-")
-  );
-  await highlightAndExpectVisible(
-    page,
-    page
-      .locator("div")
-      .filter({ hasText: /^kontakt@littwin-systemtechnik\.de$/ })
-      .locator("svg")
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByText("kontakt@littwin-systemtechnik")
-  );
-  await highlightAndExpectVisible(
-    page,
-    page
-      .locator("div")
-      .filter({ hasText: /^Handbücher$/ })
-      .locator("svg")
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByText("Handbücher", { exact: true })
-  );
-  await page.getByText("Handbücher", { exact: true }).click();
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("heading", { name: "PDF Handbücher" })
-  );
-  await highlightAndExpectVisible(page, page.getByText("KUE705FO.PDF"));
+  await page.goto("/einstellungen");
+  //----------------------
+  await headerTest(page);
+  await navTest(page);
+  await footerTest(page);
+  await page.waitForTimeout(400);
+  //----------------------
   //await page.getByRole("button").filter({ hasText: /^$/ }).click();
   await page.getByRole("button", { name: "Allgemeine Einstellungen" }).click();
   await highlightAndExpectVisible(
@@ -258,3 +171,5 @@ export async function runSettingsPageTest(page: Page) {
     page.getByRole("button", { name: "Admin anmelden" })
   );
 }
+
+//---------------------------------------------------------------------

playwright/tests/pages/system/systemTest.ts

@@ -1,34 +1,17 @@
-// gigityOutputsTest.ts
-import type { Locator, Page } from "@playwright/test";
-import { expect } from "@playwright/test";
+import type { Page } from "@playwright/test";
+import { highlightAndExpectVisible } from "@playwright/utils/highlight";
+import { navTest } from "@playwright/components/navTest";
+import { headerTest } from "@playwright/components/headerTest";
+import { footerTest } from "@playwright/components/footerTest";
 
 export async function runSystemTest(page: Page) {
   await page.goto("/system");
-
-  // Logo
-  const logo = page.getByRole("img", { name: "Logo", exact: true });
-  await highlightAndExpectVisible(page, logo);
-  await logo.click();
-  await page.waitForTimeout(100);
-
-  // TALAS Logo
-  const talasLogo = page.getByRole("img", { name: "TALAS Logo" });
-  await highlightAndExpectVisible(page, talasLogo);
-  await talasLogo.click();
-  await page.waitForTimeout(100);
-
-  // Meldestation Heading
-  const meldestation = page.getByRole("heading", { name: "Meldestation" });
-  await highlightAndExpectVisible(page, meldestation);
-  await meldestation.click();
-  await page.waitForTimeout(100);
-
-  // CPLV4 Ismail Rastede
-  const cplv4Text = page.getByText("CPLV4 Ismail Rastede");
-  await highlightAndExpectVisible(page, cplv4Text);
-  await cplv4Text.click();
-  await page.waitForTimeout(100);
-
+  //----------------------
+  await headerTest(page);
+  await navTest(page);
+  await footerTest(page);
+  await page.waitForTimeout(400);
+  //----------------------
   // System Spannungen &
   const systemSpannung = page.getByRole("heading", {
     name: "System Spannungen &",
@@ -123,61 +106,4 @@ export async function runSystemTest(page: Page) {
   await highlightAndExpectVisible(page, img3);
   await img3.click({ position: { x: 272, y: 93 } });
   await page.waitForTimeout(100);
-
-  // Sidebar Links sichtbar
-  const sidebarLinks2 = [
-    { role: "link", name: "Übersicht" },
-    { role: "link", name: "Kabelüberwachung" },
-    { role: "link", name: "Meldungseingänge" },
-    { role: "link", name: "Schaltausgänge" },
-    { role: "link", name: "Messwerteingänge" },
-    { role: "link", name: "Berichte" },
-    { role: "link", name: "System" },
-    { role: "link", name: "Einstellungen" },
-  ];
-  for (const link of sidebarLinks2) {
-    const locator = page.getByRole(link.role as any, { name: link.name });
-    await highlightAndExpectVisible(page, locator);
-    await expect(locator).toBeVisible();
-    await page.waitForTimeout(50);
-  }
-}
-
-//---------------------------------------------------------------------
-
-export async function highlightAndExpectVisible(
-  page: Page,
-  locator: Locator,
-  durationMs = 800
-) {
-  // CSS nur einmal pro Page injizieren
-  const alreadyInjected = await page.evaluate(
-    () => (window as any).__pwForceCssInjected === true
-  );
-
-  if (!alreadyInjected) {
-    await page.addStyleTag({
-      content: `
-        .pw-force-outline {
-          outline: 3px solid #ff1744 !important;
-          outline-offset: 2px !important;
-          box-shadow: 0 0 0 3px rgba(224,0,43,.35) !important;
-        }
-      `,
-    });
-    await page.evaluate(() => {
-      (window as any).__pwForceCssInjected = true;
-    });
-  }
-
-  const els = await locator.elementHandles();
-  for (const el of els) {
-    await el.evaluate((node: unknown, ms: number) => {
-      const n = node as HTMLElement;
-      n.classList.add("pw-force-outline");
-      window.setTimeout(() => n.classList.remove("pw-force-outline"), ms);
-    }, durationMs);
-  }
-
-  await expect(locator).toBeVisible();
 }

playwright/utils/highlight.ts

@@ -7,16 +7,27 @@ export async function highlightAndExpectVisible(
   durationMs = 800
 ) {
   // CSS nur einmal pro Page injizieren
-  if (!(await page.evaluate(() => (window as any).__pwForceCssInjected))) {
+  const alreadyInjected = await page.evaluate(
+    () => (window as any).__pwForceCssInjected === true
+  );
+
+  if (!alreadyInjected) {
     await page.addStyleTag({
       content: `
-                .pw-force-outline { outline: 3px solid #ff1744 !important; outline-offset: 2px !important; box-shadow: 0 0 0 3px rgba(224,0,43,.35) !important; }
-            `,
+        .pw-force-outline {
+          outline: 3px solid #ff1744 !important;
+          outline-offset: 2px !important;
+          box-shadow: 0 0 0 3px rgba(224,0,43,.35) !important;
+        }
+      `,
     });
     await page.evaluate(() => {
       (window as any).__pwForceCssInjected = true;
     });
   }
+
+  // Erst prüfen, ob das Element sichtbar ist, sonst bricht der Test sauber ab
+  await expect(locator).toBeVisible({ timeout: 10000 });
   const els = await locator.elementHandles();
   for (const el of els) {
     await el.evaluate((node: unknown, ms: number) => {
@@ -25,5 +36,6 @@ export async function highlightAndExpectVisible(
       window.setTimeout(() => n.classList.remove("pw-force-outline"), ms);
     }, durationMs);
   }
+
   await expect(locator).toBeVisible();
 }

tsconfig.json

@@ -43,7 +43,8 @@
       "@/utils/*": ["./utils/*"],
       "@/components/*": ["./components/*"],
       "@/services/*": ["./services/*"],
-      "@/types/*": ["./types/*"]
+      "@/types/*": ["./types/*"],
+      "@playwright/*": ["playwright/*"]
     }
   },