fix: logo und tests WIP

.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.902
+NEXT_PUBLIC_APP_VERSION=1.6.905
 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.902
+NEXT_PUBLIC_APP_VERSION=1.6.905
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,18 @@
+## [1.6.905] – 2025-09-11
+
+- style: header, navigation und _app.tsx
+
+---
+## [1.6.904] – 2025-09-11
+
+- style: header, navigation und _app.tsx
+
+---
+## [1.6.903] – 2025-09-11
+
+- style: header, navigation und _app.tsx
+
+---
 ## [1.6.902] – 2025-09-10
 
 - style: Header wie Footer Hintergrundfarbe

components/header/Header.tsx

@@ -151,7 +151,7 @@ function Header() {
                 left-[8%] sm:left-[8%] md:left-[8%] lg:left-[8%] xl:left-[6%] 2xl:left-[2%] laptop:left-[4%] laptop:
                 top-[90%] sm:top-[90%] md:top-[90%] lg:top-[90%] xl:top-[90%]"
         style={{
-          height: "10vh", // Dynamische Höhe des Containers
+          height: "12vh", // Erhöhte Höhe des Containers für größeres Logo
           width: "auto",
           aspectRatio: "1", // Beibehaltung des Seitenverhältnisses
         }}
@@ -160,7 +160,7 @@ function Header() {
           src="/images/Logo.png"
           alt="Logo"
           fill
-          sizes="(max-width: 640px) 7vh, (max-width: 1024px) 8vh, (max-width: 1280px) 9vh, 10vh"
+          sizes="(max-width: 640px) 12vh, (max-width: 1024px) 14vh, (max-width: 1280px) 16vh, 18vh"
           className="object-contain"
           priority={false}
         />

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.902",
+  "version": "1.6.905",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cpl-v4",
-      "version": "1.6.902",
+      "version": "1.6.905",
       "dependencies": {
         "@emotion/react": "^11.13.0",
         "@emotion/styled": "^11.13.0",

package.json

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

playwright/tests/components/footer/footerTest.ts

@@ -1,56 +0,0 @@
-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/tests/components/header/headerTest.ts

@@ -1,14 +0,0 @@
-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/tests/components/main/analogInputs/analogInputsChartModalTest.ts

@@ -1,19 +0,0 @@
-import { test, expect } from "@playwright/test";
-import { highlightAndExpectVisible } from "@playwright/utils/highlight";
-
-test("AnalogInputsChartModal opens after clicking chart button", async ({
-  page,
-}) => {
-  await page.goto("/analogInputs");
-  // Öffne Modal via Chart-Button (📈)
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("button", { name: "Messkurve anzeigen" })
-  );
-  await page
-    .getByRole("button", { name: "Messkurve anzeigen" })
-    .first()
-    .click();
-  await highlightAndExpectVisible(page, page.getByRole("dialog"));
-  await expect(page.getByRole("dialog")).toBeVisible();
-});

playwright/tests/components/main/analogInputs/analogInputsDatePickerTest.ts

@@ -1,15 +0,0 @@
-import { test } from "@playwright/test";
-import { highlightAndExpectVisible } from "@playwright/utils/highlight";
-
-test("AnalogInputsDatePicker renders two inputs", async ({ page }) => {
-  await page.goto("/analogInputs");
-  // Öffne erst die Chart-Ansicht (enthält den DatePicker)
-  const chartBtn = page
-    .getByRole("button", { name: "Messkurve anzeigen" })
-    .first();
-  await highlightAndExpectVisible(page, chartBtn);
-  await chartBtn.click();
-  await highlightAndExpectVisible(page, page.getByRole("dialog"));
-  await highlightAndExpectVisible(page, page.getByText("Von"));
-  await highlightAndExpectVisible(page, page.getByText("Bis"));
-});

playwright/tests/components/main/analogInputs/analogInputsSettingsModalTest.ts

@@ -1,17 +0,0 @@
-import { test } from "@playwright/test";
-import { highlightAndExpectVisible } from "@playwright/utils/highlight";
-
-test("AnalogInputsSettingsModal opens after clicking settings", async ({
-  page,
-}) => {
-  await page.goto("/analogInputs");
-  // Wähle die erste Tabellenzeile und in der 5. Spalte (Einstellungen) den Button
-  const firstRow = page.locator("table tbody tr").first();
-  const settingsButton = firstRow.locator("td").nth(4).locator("button");
-  await highlightAndExpectVisible(page, settingsButton);
-  await settingsButton.click();
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("button", { name: "Modal schließen" })
-  );
-});

playwright/tests/components/main/analogInputs/analogInputsTableTest.ts

@@ -1,9 +0,0 @@
-import { test } from "@playwright/test";
-import { highlightAndExpectVisible } from "@playwright/utils/highlight";
-
-test("AnalogInputsTable renders rows", async ({ page }) => {
-  await page.goto("/analogInputs");
-  await highlightAndExpectVisible(page, page.getByRole("table"));
-  // Mindestens eine Tabellenzeile sichtbar
-  await highlightAndExpectVisible(page, page.locator("tbody tr").first());
-});

playwright/tests/components/main/analogInputs/analogInputsViewTest.ts

@@ -1,12 +0,0 @@
-import { test, expect } from "@playwright/test";
-import { highlightAndExpectVisible } from "@playwright/utils/highlight";
-
-test("AnalogInputsView shows heading and table", async ({ page }) => {
-  await page.goto("/analogInputs");
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("heading", { name: "Messwerteingänge" })
-  );
-  await highlightAndExpectVisible(page, page.getByRole("table"));
-  await expect(page.getByRole("table")).toBeVisible();
-});

playwright/tests/components/main/analogInputs/xioPMTest.ts

@@ -1,5 +0,0 @@
-import { test } from "@playwright/test";
-
-test.fixme("XioPM visual presence", async ({ page }) => {
-  await page.goto("/analogInputs");
-});

playwright/tests/components/main/kabelueberwachung/isoModal.test.ts

@@ -1,92 +0,0 @@
-import { test, expect } from "@playwright/test";
-import { highlightAndExpectVisible } from "@playwright/utils/highlight";
-
-/**
- * ISO Modal UI / Behavior Regression Test
- * Covers:
- *  - Opening ISO modal from cable monitoring page
- *  - Verifies modal structure (header, fullscreen + close buttons)
- *  - Dropdown (Messkurve <-> Meldungen) presence & options
- *  - Toolbar elements (KÜ badge, DateRangePicker fields, Mode dropdown, Daten laden button)
- *  - Style smoke checks via class attributes (non brittle, only key tokens)
- *  - Switching to Meldungen hides date + mode controls and shows table headers
- */
-test.describe("ISO Modal", () => {
-  test("opens and validates core UI + view toggle behavior", async ({
-    page,
-  }) => {
-    await page.goto("/kabelueberwachung");
-
-    const firstChartButton = page
-      .locator(".bg-littwin-blue.text-white")
-      .first();
-    await highlightAndExpectVisible(page, firstChartButton);
-    await firstChartButton.click();
-
-    const heading = page.getByRole("heading", { name: "Isolationswiderstand" });
-    await highlightAndExpectVisible(page, heading);
-
-    const dialog = page.getByRole("dialog");
-    await expect(dialog).toBeVisible();
-
-    await expect(
-      dialog
-        .locator("button:has(i.bi-fullscreen-exit, i.bi-arrows-fullscreen)")
-        .first()
-    ).toBeVisible();
-    await expect(dialog.locator("button:has(i.bi-x-lg)")).toBeVisible();
-
-    const viewToggle = dialog.getByRole("button", {
-      name: /Messkurve|Meldungen/,
-    });
-    await highlightAndExpectVisible(page, viewToggle);
-
-    await expect(dialog.locator(".toolbar")).toBeVisible();
-    await expect(dialog.locator(".toolbar").getByText("KÜ")).toBeVisible();
-
-    await expect(dialog.getByText("Von")).toBeVisible();
-    await expect(dialog.getByText("Bis")).toBeVisible();
-
-    const modeBtn = dialog.getByRole("button", {
-      name: /Alle Messwerte|Stündlich|Täglich/,
-    });
-    await modeBtn.click();
-    await expect(
-      page.getByRole("option", { name: /Alle Messwerte/ })
-    ).toBeVisible();
-    await expect(page.getByRole("option", { name: /Stündlich/ })).toBeVisible();
-    await expect(page.getByRole("option", { name: /Täglich/ })).toBeVisible();
-    await page.getByRole("option", { name: "Stündlich" }).click();
-    await modeBtn.click();
-    await page.getByRole("option", { name: "Alle Messwerte" }).click();
-
-    const loadBtn = dialog.getByRole("button", { name: "Daten laden" });
-    await expect(loadBtn).toBeVisible();
-
-    await viewToggle.click();
-    await page.getByRole("option", { name: "Meldungen" }).click();
-
-    for (const header of [
-      "Prio",
-      "Zeitstempel",
-      "Quelle",
-      "Meldung",
-      "Status",
-    ]) {
-      await highlightAndExpectVisible(
-        page,
-        dialog.getByRole("cell", { name: header })
-      );
-    }
-    // In Meldungen view only Von/Bis + Anzeigen (no mode dropdown)
-    await expect(dialog.getByText("Von")).toBeVisible();
-    await expect(dialog.getByText("Bis")).toBeVisible();
-    await expect(
-      dialog.getByRole("button", { name: "Anzeigen" })
-    ).toBeVisible();
-
-    await viewToggle.click();
-    await page.getByRole("option", { name: "Messkurve" }).click();
-    await expect(dialog.locator("canvas")).toBeVisible();
-  });
-});

playwright/tests/components/main/kabelueberwachung/loopModal.test.ts

@@ -1,72 +0,0 @@
-import { test, expect } from "@playwright/test";
-import { highlightAndExpectVisible } from "@playwright/utils/highlight";
-
-/**
- * Loop (RSL) Modal UI / Behavior Regression Test
- */
-test.describe("Loop / RSL Modal", () => {
-  test("opens and validates RSL UI & controls", async ({ page }) => {
-    await page.goto("/kabelueberwachung");
-
-    const firstBlue = page.locator(".bg-littwin-blue.text-white").first();
-    await highlightAndExpectVisible(page, firstBlue);
-    await firstBlue.click();
-
-    const heading = page.getByRole("heading", {
-      name: /Schleifenwiderstand|Isolationswiderstand/,
-    });
-    await heading.waitFor();
-
-    if (
-      await page
-        .getByRole("heading", { name: "Isolationswiderstand" })
-        .isVisible()
-        .catch(() => false)
-    ) {
-      await page.locator("button:has(i.bi-x-lg)").click();
-      const secondBlue = page.locator(".bg-littwin-blue.text-white").nth(1);
-      await highlightAndExpectVisible(page, secondBlue);
-      await secondBlue.click();
-      await highlightAndExpectVisible(
-        page,
-        page.getByRole("heading", { name: "Schleifenwiderstand" })
-      );
-    }
-
-    const dialog = page.getByRole("dialog");
-    await expect(dialog).toBeVisible();
-
-    await expect(
-      dialog
-        .locator("button:has(i.bi-arrows-fullscreen, i.bi-fullscreen-exit)")
-        .first()
-    ).toBeVisible();
-    await expect(dialog.locator("button:has(i.bi-x-lg)")).toBeVisible();
-
-    await expect(dialog.locator(".toolbar")).toBeVisible();
-    await expect(dialog.locator(".toolbar").getByText("KÜ")).toBeVisible();
-
-    await expect(dialog.getByText("Von")).toBeVisible();
-    await expect(dialog.getByText("Bis")).toBeVisible();
-
-    const modeBtn = dialog.getByRole("button", {
-      name: /Alle Messwerte|Stündlich|Täglich/,
-    });
-    await modeBtn.click();
-    await expect(
-      page.getByRole("option", { name: /Alle Messwerte/ })
-    ).toBeVisible();
-    await expect(page.getByRole("option", { name: /Stündlich/ })).toBeVisible();
-    await expect(page.getByRole("option", { name: /Täglich/ })).toBeVisible();
-    await page.getByRole("option", { name: "Stündlich" }).click();
-
-    const rslButton = dialog.getByRole("button", { name: /RSL/i });
-    await expect(rslButton).toBeVisible();
-
-    const loadBtn = dialog.getByRole("button", { name: "Daten laden" });
-    await expect(loadBtn).toBeVisible();
-    await loadBtn.click();
-    await dialog.locator("canvas").waitFor({ timeout: 5000 });
-    await expect(dialog.locator("canvas")).toBeVisible();
-  });
-});

playwright/tests/components/main/kabelueberwachung/tdrModal.test.ts

@@ -1,93 +0,0 @@
-import { test, expect } from "@playwright/test";
-import { highlightAndExpectVisible } from "@playwright/utils/highlight";
-
-/**
- * TDR Modal UI / Behavior Regression Test
- */
-test.describe("TDR Modal", () => {
-  test("opens and validates TDR UI + dropdown + actions", async ({ page }) => {
-    await page.goto("/kabelueberwachung");
-
-    const blueButtons = page.locator(".bg-littwin-blue.text-white");
-    const count = await blueButtons.count();
-    for (let i = 0; i < Math.min(count, 4); i++) {
-      await highlightAndExpectVisible(page, blueButtons.nth(i));
-      await blueButtons.nth(i).click();
-      if (
-        await page
-          .getByRole("heading", { name: "TDR-Messung" })
-          .isVisible()
-          .catch(() => false)
-      ) {
-        break;
-      } else {
-        if (
-          await page
-            .locator("button:has(i.bi-x-lg)")
-            .isVisible()
-            .catch(() => false)
-        ) {
-          await page.locator("button:has(i.bi-x-lg)").click();
-        }
-      }
-    }
-
-    const heading = page.getByRole("heading", { name: "TDR-Messung" });
-    await heading.waitFor();
-
-    const dialog = page.getByRole("dialog");
-    await expect(dialog).toBeVisible();
-
-    await expect(
-      dialog
-        .locator("button:has(i.bi-arrows-fullscreen, i.bi-fullscreen-exit)")
-        .first()
-    ).toBeVisible();
-    await expect(dialog.locator("button:has(i.bi-x-lg)")).toBeVisible();
-
-    await expect(dialog.locator(".toolbar")).toBeVisible();
-    await expect(dialog.locator(".toolbar").getByText("KÜ")).toBeVisible();
-
-    const refBtn = dialog.getByRole("button", {
-      name: "TDR-Kurve als Referenz speichern",
-    });
-    await expect(refBtn).toBeVisible();
-    const startBtn = dialog.getByRole("button", {
-      name: /TDR-Messung starten|TDR läuft/,
-    });
-    await expect(startBtn).toBeVisible();
-
-    const measurementBtn = dialog.getByRole("button", { name: /Fehlerstelle/ });
-    await highlightAndExpectVisible(page, measurementBtn);
-    await measurementBtn.click();
-
-    const option = page.getByRole("option", { name: /Fehlerstelle/ }).first();
-    await option.waitFor();
-    await expect(option).toBeVisible();
-    await option.click();
-    await expect(measurementBtn).toContainText("Fehlerstelle");
-
-    const viewToggle = dialog.getByRole("button", {
-      name: /Messkurve|Meldungen/,
-    });
-    await viewToggle.click();
-    await page.getByRole("option", { name: "Meldungen" }).click();
-
-    for (const header of [
-      "Prio",
-      "Zeitstempel",
-      "Quelle",
-      "Meldung",
-      "Status",
-    ]) {
-      await highlightAndExpectVisible(
-        page,
-        dialog.getByRole("cell", { name: header })
-      );
-    }
-
-    await viewToggle.click();
-    await page.getByRole("option", { name: "Messkurve" }).click();
-    await expect(dialog.locator("canvas")).toBeVisible();
-  });
-});

playwright/tests/components/navigation/navTest.ts

@@ -1,57 +0,0 @@
-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/headerSideFooter.test.ts

@@ -0,0 +1,68 @@
+import { test, expect } from "@playwright/test";
+
+test.use({
+  viewport: {
+    height: 900,
+    width: 1600,
+  },
+});
+
+test("test", async ({ page }) => {
+  await page.goto("http://localhost:3000/dashboard");
+  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 expect(page.getByRole("button", { name: "Dark Mode" })).toBeVisible();
+  await expect(page.getByRole("link", { name: "Übersicht" })).toBeVisible();
+  await expect(
+    page.getByRole("link", { name: "Kabelüberwachung" })
+  ).toBeVisible();
+  await expect(
+    page.getByRole("link", { name: "Meldungseingänge" })
+  ).toBeVisible();
+  await expect(
+    page.getByRole("link", { name: "Schaltausgänge" })
+  ).toBeVisible();
+  await expect(
+    page.getByRole("link", { name: "Messwerteingänge" })
+  ).toBeVisible();
+  await expect(page.getByRole("link", { name: "Berichte" })).toBeVisible();
+  await expect(page.getByRole("link", { name: "System" })).toBeVisible();
+  await expect(page.getByRole("link", { name: "Einstellungen" })).toBeVisible();
+  await expect(
+    page
+      .locator("div")
+      .filter({ hasText: /^Littwin Systemtechnik GmbH & Co\. KG$/ })
+      .locator("path")
+  ).toBeVisible();
+  await expect(page.getByText("Littwin Systemtechnik GmbH &")).toBeVisible();
+  await expect(
+    page
+      .locator("div")
+      .filter({ hasText: /^Telefon: 04402 972577-0$/ })
+      .locator("path")
+  ).toBeVisible();
+  await expect(page.getByText("Telefon: 04402 972577-")).toBeVisible();
+  await expect(
+    page
+      .locator("div")
+      .filter({ hasText: /^kontakt@littwin-systemtechnik\.de$/ })
+      .locator("path")
+  ).toBeVisible();
+  await expect(page.getByText("kontakt@littwin-systemtechnik")).toBeVisible();
+  await expect(
+    page
+      .locator("div")
+      .filter({ hasText: /^Handbücher$/ })
+      .locator("svg")
+  ).toBeVisible();
+  await expect(page.getByText("Handbücher", { exact: true })).toBeVisible();
+  await page.getByText("Handbücher", { exact: true }).click();
+  await expect(
+    page.getByRole("heading", { name: "PDF Handbücher" })
+  ).toBeVisible();
+  await expect(page.getByText("KUE705FO.PDF")).toBeVisible();
+  await expect(page.getByRole("button", { name: "Schließen" })).toBeVisible();
+  await page.getByRole("button", { name: "Schließen" }).click();
+});

playwright/tests/orchestrator.test.ts

@@ -1,20 +0,0 @@
-import { test } from "../fixtures";
-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);
-  await runCableMonitoringTest(page);
-  await runDigitalInputsTest(page);
-  await runDigitalOutputsTest(page);
-  await runAnalogInputsTest(page);
-  await runMeldungenTest(page);
-  await runSystemTest(page);
-  await runSettingsPageTest(page);
-});

playwright/tests/pages/analogInputs/analogInputs.test.ts

@@ -0,0 +1,131 @@
+import { test, expect } from "@playwright/test";
+
+test.use({
+  viewport: {
+    height: 1080,
+    width: 1920,
+  },
+});
+
+test("test", async ({ page }) => {
+  await page.goto("http://localhost:3000/analogInputs");
+  await expect(
+    page.getByRole("heading", { name: "Messwerteingänge" }).first()
+  ).toBeVisible();
+  await expect(page.locator(".text-littwin-blue")).toBeVisible();
+  await expect(
+    page.getByRole("heading", { name: "Messwerteingänge" }).nth(1)
+  ).toBeVisible();
+  await expect(page.getByRole("cell", { name: "Eingang" })).toBeVisible();
+  await expect(page.getByRole("cell", { name: "Messwert" })).toBeVisible();
+  await expect(page.getByRole("cell", { name: "Einheit" })).toBeVisible();
+  await expect(page.getByRole("cell", { name: "Bezeichnung" })).toBeVisible();
+  await expect(page.getByRole("cell", { name: "Einstellungen" })).toBeVisible();
+  await expect(
+    page.getByRole("cell", { name: "Messkurve", exact: true })
+  ).toBeVisible();
+  await expect(
+    page.getByRole("cell", { name: "1", exact: true })
+  ).toBeVisible();
+  await expect(
+    page.getByRole("cell", { name: "2", exact: true })
+  ).toBeVisible();
+  await expect(
+    page.getByRole("cell", { name: "3", exact: true })
+  ).toBeVisible();
+  await expect(
+    page.getByRole("cell", { name: "4", exact: true })
+  ).toBeVisible();
+  await expect(
+    page.getByRole("cell", { name: "5", exact: true })
+  ).toBeVisible();
+  await expect(
+    page.getByRole("cell", { name: "6", exact: true })
+  ).toBeVisible();
+  await expect(
+    page.getByRole("cell", { name: "7", exact: true })
+  ).toBeVisible();
+  await expect(
+    page.getByRole("cell", { name: "8", exact: true })
+  ).toBeVisible();
+  await expect(page.getByRole("cell", { name: "126.63" })).toBeVisible();
+  await expect(page.getByRole("cell", { name: "5.67" })).toBeVisible();
+  await expect(page.getByRole("cell", { name: "-" }).first()).toBeVisible();
+  await expect(page.getByRole("cell", { name: "AE 1" })).toBeVisible();
+  await expect(page.getByRole("cell", { name: "Temperatur" })).toBeVisible();
+  await expect(page.getByRole("cell", { name: "AE 3" })).toBeVisible();
+  await expect(page.getByRole("cell", { name: "AE 4" })).toBeVisible();
+  await expect(page.getByRole("cell", { name: "AE 5" })).toBeVisible();
+  await expect(page.getByRole("cell", { name: "AE 6" })).toBeVisible();
+  await expect(page.getByRole("cell", { name: "AE 7" })).toBeVisible();
+  await expect(page.getByRole("cell", { name: "AE 8" })).toBeVisible();
+  await expect(page.locator(".border.p-2.text-center").first()).toBeVisible();
+  await expect(page.locator("tr:nth-child(2) > td:nth-child(5)")).toBeVisible();
+  await expect(page.locator("tr:nth-child(8) > td:nth-child(5)")).toBeVisible();
+  await expect(page.locator("td:nth-child(6)").first()).toBeVisible();
+  await expect(page.locator("tr:nth-child(8) > td:nth-child(6)")).toBeVisible();
+  await page.locator(".border.p-2.text-center").first().click();
+  await expect(
+    page.getByRole("button", { name: "Modal schließen" })
+  ).toBeVisible();
+  await page
+    .getByRole("heading", { name: "Einstellungen Messwerteingang" })
+    .click();
+  await page.getByText("Bezeichnung:").click();
+  await page.getByText("Offset:").click();
+  await page.getByText("Faktor:").click();
+  await page.getByText("Einheit:").click();
+  await page.getByText("Speicherintervall:").click();
+  await page.getByRole("textbox").click();
+  await page
+    .locator("div")
+    .filter({ hasText: /^Offset:$/ })
+    .getByRole("spinbutton")
+    .click();
+  await page
+    .locator("div")
+    .filter({ hasText: /^Faktor:$/ })
+    .getByRole("spinbutton")
+    .click();
+  await page.getByRole("button", { name: "V", exact: true }).click();
+  await page.getByRole("button", { name: "V", exact: true }).click();
+  await page
+    .locator("div")
+    .filter({ hasText: /^Minuten$/ })
+    .getByRole("spinbutton")
+    .click();
+  await expect(page.getByRole("button", { name: "Speichern" })).toBeVisible();
+  await page.getByRole("button", { name: "Modal schließen" }).click();
+  await page.locator("tr:nth-child(8) > td:nth-child(5)").click();
+  await expect(
+    page.getByRole("button", { name: "Modal schließen" })
+  ).toBeVisible();
+  await page
+    .getByRole("heading", { name: "Einstellungen Messwerteingang" })
+    .click();
+  await page.getByText("Bezeichnung:").click();
+  await page.getByText("Offset:").click();
+  await page.getByText("Faktor:").click();
+  await page.getByText("Einheit:").click();
+  await page.getByText("Speicherintervall:").click();
+  await page.getByRole("textbox").click();
+  await page
+    .locator("div")
+    .filter({ hasText: /^Offset:$/ })
+    .getByRole("spinbutton")
+    .click();
+  await page
+    .locator("div")
+    .filter({ hasText: /^Faktor:$/ })
+    .getByRole("spinbutton")
+    .click();
+  await page.getByRole("button", { name: "mA" }).click();
+  await page.getByRole("button", { name: "mA" }).click();
+  await page
+    .locator("div")
+    .filter({ hasText: /^Minuten$/ })
+    .getByRole("spinbutton")
+    .click();
+  await expect(page.getByRole("button", { name: "Speichern" })).toBeVisible();
+  await page.getByRole("button", { name: "Modal schließen" }).click();
+});

playwright/tests/pages/analogInputs/analogInputsTest.ts

@@ -1,254 +0,0 @@
-import type { Page } from "@playwright/test";
-import { expect } from "@playwright/test";
-import { highlightAndExpectVisible } from "@playwright/utils/highlight";
-import { navTest } from "@/playwright/tests/components/navigation/navTest";
-import { headerTest } from "@/playwright/tests/components/header/headerTest";
-import { footerTest } from "@/playwright/tests/components/footer/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)
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("cell", { name: "Eingang" })
-  );
-  // ...existing code...
-
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("cell", { name: "Messwert" })
-  );
-
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("cell", { name: "Einheit" })
-  );
-
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("cell", { name: "Bezeichnung" })
-  );
-
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("cell", { name: "Einstellungen" })
-  );
-
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("cell", { name: "Messkurve", exact: true })
-  );
-
-  await highlightAndExpectVisible(page, page.getByText("1", { exact: true }));
-
-  await highlightAndExpectVisible(page, page.getByText("2", { exact: true }));
-
-  await highlightAndExpectVisible(page, page.getByText("3", { exact: true }));
-
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("cell", { name: "4", exact: true }).locator("path")
-  );
-
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("cell", { name: "5", exact: true })
-  );
-
-  await highlightAndExpectVisible(page, page.getByText("6", { exact: true }));
-
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("cell", { name: "7", exact: true })
-  );
-  await expect(
-    page.getByRole("cell", { name: "8", exact: true })
-  ).toBeVisible();
-
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("cell", { name: "8", exact: true })
-  );
-  await expect(page.locator(".border.p-2.text-center").first()).toBeVisible();
-
-  await highlightAndExpectVisible(
-    page,
-    page.locator(".border.p-2.text-center").first()
-  );
-  // Markiere die gesamte erste Datenzeile (Row mit "AE 1" falls vorhanden)
-
-  await highlightAndExpectVisible(
-    page,
-    page
-      .getByRole("row", { name: "2 5.67 °C Temperatur" })
-      .getByRole("button")
-      .first()
-  );
-  await expect(page.locator("tr:nth-child(3) > td:nth-child(5)")).toBeVisible();
-
-  await highlightAndExpectVisible(
-    page,
-    page.locator("tr:nth-child(3) > td:nth-child(5)")
-  );
-  await expect(
-    page
-      .getByRole("row", { name: "0.01 V AE 4 Messkurve anzeigen" })
-      .getByRole("button")
-      .first()
-  ).toBeVisible();
-
-  await highlightAndExpectVisible(
-    page,
-    page
-      .getByRole("row", { name: "0.01 V AE 4 Messkurve anzeigen" })
-      .getByRole("button")
-      .first()
-  );
-  await expect(
-    page
-      .getByRole("row", { name: "8 -0.00 mA AE 8 Messkurve" })
-      .getByLabel("Messkurve anzeigen")
-  ).toBeVisible();
-
-  await highlightAndExpectVisible(
-    page,
-    page
-      .getByRole("row", { name: "8 -0.00 mA AE 8 Messkurve" })
-      .getByLabel("Messkurve anzeigen")
-  );
-
-  // 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({ timeout: 15000 });
-
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("heading", { name: /Einstellungen Messwerteingang/ })
-  );
-
-  await highlightAndExpectVisible(page, page.getByText("Bezeichnung:"));
-  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,
-    page.getByRole("button", { name: "Speichern" })
-  );
-  await expect(
-    page.getByRole("button", { name: "Modal schließen" })
-  ).toBeVisible();
-
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("button", { name: "Modal schließen" })
-  );
-  await expect(
-    page.getByText(
-      "Einstellungen Messwerteingang 1Bezeichnung:Offset:Faktor:Einheit:"
-    )
-  ).toBeVisible();
-
-  await highlightAndExpectVisible(
-    page,
-    page.getByText(
-      "Einstellungen Messwerteingang 1Bezeichnung:Offset:Faktor:Einheit:"
-    )
-  );
-
-  await page.getByRole("button", { name: "Modal schließen" }).click();
-  await expect(
-    page
-      .getByRole("row", { name: "1 126.63 V AE 1 Messkurve" })
-      .getByLabel("Messkurve anzeigen")
-  ).toBeVisible();
-
-  await page
-    .getByRole("row", { name: "1 126.63 V AE 1 Messkurve" })
-    .getByLabel("Messkurve anzeigen")
-    .click();
-  await expect(
-    page.getByText(
-      "Messkurve Messwerteingang 1Eingang 1VonBisAlle MesswerteDaten laden"
-    )
-  ).toBeVisible();
-
-  await highlightAndExpectVisible(
-    page,
-    page.getByText(
-      "Messkurve Messwerteingang 1Eingang 1VonBisAlle MesswerteDaten laden"
-    )
-  );
-
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("heading", { name: "Messkurve Messwerteingang" })
-  );
-
-  await highlightAndExpectVisible(page, page.locator("canvas"));
-
-  await highlightAndExpectVisible(page, page.getByText("Eingang 1VonBisAlle"));
-
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("button", { name: "Daten laden" })
-  );
-
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("button", { name: "Alle Messwerte " })
-  );
-  await page.getByRole("button", { name: "Alle Messwerte " }).click();
-  await expect(page.getByRole("option", { name: "Stündlich" })).toBeVisible();
-
-  await page.getByRole("option", { name: "Stündlich" }).click();
-  await expect(page.getByRole("button", { name: "Stündlich" })).toBeVisible();
-
-  await page.getByRole("button", { name: "Stündlich" }).click();
-  await expect(page.getByRole("option", { name: "Täglich" })).toBeVisible();
-
-  await page.getByRole("option", { name: "Täglich" }).click();
-  await expect(page.getByRole("button", { name: "Fullscreen" })).toBeVisible();
-
-  await page.getByRole("button", { name: "Fullscreen" }).click();
-  await expect(
-    page.getByRole("button", { name: "Exit fullscreen" })
-  ).toBeVisible();
-
-  await page.getByRole("button", { name: "Exit fullscreen" }).click();
-  await expect(page.getByRole("button", { name: "Fullscreen" })).toBeVisible();
-
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("button", { name: "Fullscreen" })
-  );
-
-  // Modal schließen nur, wenn noch vorhanden
-  const modalCloseBtn = page.getByRole("button", { name: "Modal schließen" });
-  if ((await modalCloseBtn.count()) > 0 && (await modalCloseBtn.isVisible())) {
-    await highlightAndExpectVisible(page, modalCloseBtn);
-    await expect(modalCloseBtn).toBeVisible();
-    await modalCloseBtn.click();
-  }
-}

playwright/tests/pages/dashboard/dashboard.test.ts

@@ -0,0 +1,62 @@
+import { test, expect } from "@playwright/test";
+
+test.use({
+  viewport: {
+    height: 900,
+    width: 1600,
+  },
+});
+
+test("Dashboard", async ({ page }) => {
+  await page.goto("http://localhost:3000/dashboard");
+  await expect(page.getByRole("main").locator("svg").first()).toBeVisible();
+  await expect(
+    page.getByRole("heading", { name: "Letzten 20 Meldungen" })
+  ).toBeVisible();
+  await expect(page.getByRole("cell", { name: "Prio" })).toBeVisible();
+  await expect(page.getByRole("cell", { name: "Zeitstempel" })).toBeVisible();
+  await expect(page.getByRole("cell", { name: "Quelle" })).toBeVisible();
+  await expect(page.getByRole("cell", { name: "Meldung" })).toBeVisible();
+  await expect(page.getByRole("cell", { name: "Status" })).toBeVisible();
+  await expect(
+    page.getByRole("heading", { name: "Versionsinformationen" })
+  ).toBeVisible();
+  await expect(page.getByRole("main").locator("path").nth(2)).toBeVisible();
+  await expect(
+    page
+      .getByRole("listitem")
+      .filter({ hasText: "Webversion:" })
+      .locator("path")
+  ).toBeVisible();
+  await expect(page.locator("div").filter({ hasText: /^1$/ })).toBeVisible();
+  await expect(page.getByText("8", { exact: true })).toBeVisible();
+  await expect(page.getByText("9", { exact: true })).toBeVisible();
+  await expect(
+    page.locator(
+      "div:nth-child(2) > .flex.gap-1 > div:nth-child(8) > .border > .bg-littwin-blue.flex-grow > div:nth-child(2)"
+    )
+  ).toBeVisible();
+  await expect(page.getByText("17KÜ705FO")).toBeVisible();
+  await expect(
+    page.locator(
+      "div:nth-child(3) > .flex.gap-1 > div:nth-child(8) > .border > .bg-littwin-blue.flex-grow > div:nth-child(2)"
+    )
+  ).toBeVisible();
+  await expect(page.getByText("25KÜ705FO")).toBeVisible();
+  await expect(page.getByText("32KÜ705FO")).toBeVisible();
+  await expect(page.getByRole("img", { name: "IP Address" })).toBeVisible();
+  await expect(page.getByText("IP-Adresse")).toBeVisible();
+  await expect(page.getByRole("main")).toContainText("10.10.0.243");
+  await expect(page.getByRole("main")).toContainText("255.255.255.0");
+  await expect(page.getByRole("main")).toContainText("10.10.0.1");
+  await page.getByText("Server betriebsbereit").click();
+  await page
+    .getByRole("row", { name: "2025-09-05 11:52:44" })
+    .getByRole("cell")
+    .first()
+    .click();
+  await expect(page.locator("tbody")).toContainText("2025-09-05 11:52:44");
+  await expect(page.locator("tbody")).toContainText("CableLine13");
+  await expect(page.locator("tbody")).toContainText("Isofehler gehend");
+  await expect(page.locator("tbody")).toContainText("0");
+});

playwright/tests/pages/dashboard/dashboardTest.ts

@@ -1,90 +0,0 @@
-import type { Page } from "@playwright/test";
-import { highlightAndExpectVisible } from "@playwright/utils/highlight";
-import { navTest } from "@/playwright/tests/components/navigation/navTest";
-import { headerTest } from "@/playwright/tests/components/header/headerTest";
-import { footerTest } from "@/playwright/tests/components/footer/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/digitalInputs/digitalInputs.test.ts

@@ -0,0 +1,225 @@
+import { test, expect } from "@playwright/test";
+
+test.use({
+  viewport: {
+    height: 1080,
+    width: 1920,
+  },
+});
+
+test("test", async ({ page }) => {
+  await page.goto("http://localhost:3000/digitalInputs");
+  //Snapshot
+  await expect(page.getByRole("main")).toMatchAriaSnapshot(`
+    - heading "Meldungseingänge" [level=1]
+    - heading /Meldungseingänge 1 – \\d+/ [level=2]
+    - table:
+      - rowgroup:
+        - row "Eingang Zustand Bezeichnung Aktion":
+          - cell "Eingang"
+          - cell "Zustand"
+          - cell "Bezeichnung"
+          - cell "Aktion"
+      - rowgroup:
+        - row "1 ● DE 1":
+          - cell "1"
+          - cell "●"
+          - cell "DE 1"
+          - cell
+        - row "2 ● DE 2":
+          - cell "2"
+          - cell "●"
+          - cell "DE 2"
+          - cell
+        - row "3 ● DE 3":
+          - cell "3"
+          - cell "●"
+          - cell "DE 3"
+          - cell
+        - row "4 ● DE 4":
+          - cell "4"
+          - cell "●"
+          - cell "DE 4"
+          - cell
+        - row "5 ● DE 5":
+          - cell "5"
+          - cell "●"
+          - cell "DE 5"
+          - cell
+        - row "6 ● DE 6":
+          - cell "6"
+          - cell "●"
+          - cell "DE 6"
+          - cell
+        - row "7 ● DE 7":
+          - cell "7"
+          - cell "●"
+          - cell "DE 7"
+          - cell
+        - row "8 ● DE 8":
+          - cell "8"
+          - cell "●"
+          - cell "DE 8"
+          - cell
+        - row "9 ● DE 9":
+          - cell "9"
+          - cell "●"
+          - cell "DE 9"
+          - cell
+        - row /\\d+ ● DE \\d+/:
+          - cell /\\d+/
+          - cell "●"
+          - cell /DE \\d+/
+          - cell
+        - row /\\d+ ● DE \\d+/:
+          - cell /\\d+/
+          - cell "●"
+          - cell /DE \\d+/
+          - cell
+        - row /\\d+ ● DE \\d+/:
+          - cell /\\d+/
+          - cell "●"
+          - cell /DE \\d+/
+          - cell
+        - row /\\d+ ● DE \\d+/:
+          - cell /\\d+/
+          - cell "●"
+          - cell /DE \\d+/
+          - cell
+        - row /\\d+ ● DE \\d+/:
+          - cell /\\d+/
+          - cell "●"
+          - cell /DE \\d+/
+          - cell
+        - row /\\d+ ● DE \\d+/:
+          - cell /\\d+/
+          - cell "●"
+          - cell /DE \\d+/
+          - cell
+        - row /\\d+ ● DE \\d+/:
+          - cell /\\d+/
+          - cell "●"
+          - cell /DE \\d+/
+          - cell
+    - heading /Meldungseingänge \\d+ – \\d+/ [level=2]
+    - table:
+      - rowgroup:
+        - row "Eingang Zustand Bezeichnung Aktion":
+          - cell "Eingang"
+          - cell "Zustand"
+          - cell "Bezeichnung"
+          - cell "Aktion"
+      - rowgroup:
+        - row /\\d+ ● DE \\d+/:
+          - cell /\\d+/
+          - cell "●"
+          - cell /DE \\d+/
+          - cell
+        - row /\\d+ ● DE \\d+/:
+          - cell /\\d+/
+          - cell "●"
+          - cell /DE \\d+/
+          - cell
+        - row /\\d+ ● DE \\d+/:
+          - cell /\\d+/
+          - cell "●"
+          - cell /DE \\d+/
+          - cell
+        - row /\\d+ ● DE \\d+/:
+          - cell /\\d+/
+          - cell "●"
+          - cell /DE \\d+/
+          - cell
+        - row /\\d+ ● DE \\d+/:
+          - cell /\\d+/
+          - cell "●"
+          - cell /DE \\d+/
+          - cell
+        - row /\\d+ ● DE \\d+/:
+          - cell /\\d+/
+          - cell "●"
+          - cell /DE \\d+/
+          - cell
+        - row /\\d+ ● DE \\d+/:
+          - cell /\\d+/
+          - cell "●"
+          - cell /DE \\d+/
+          - cell
+        - row /\\d+ ● DE \\d+/:
+          - cell /\\d+/
+          - cell "●"
+          - cell /DE \\d+/
+          - cell
+        - row /\\d+ ● DE \\d+/:
+          - cell /\\d+/
+          - cell "●"
+          - cell /DE \\d+/
+          - cell
+        - row /\\d+ ● DE \\d+/:
+          - cell /\\d+/
+          - cell "●"
+          - cell /DE \\d+/
+          - cell
+        - row /\\d+ ● DE \\d+/:
+          - cell /\\d+/
+          - cell "●"
+          - cell /DE \\d+/
+          - cell
+        - row /\\d+ ● DE \\d+/:
+          - cell /\\d+/
+          - cell "●"
+          - cell /DE \\d+/
+          - cell
+        - row /\\d+ ● DE \\d+/:
+          - cell /\\d+/
+          - cell "●"
+          - cell /DE \\d+/
+          - cell
+        - row /\\d+ ● DE \\d+/:
+          - cell /\\d+/
+          - cell "●"
+          - cell /DE \\d+/
+          - cell
+        - row /\\d+ ● DE \\d+/:
+          - cell /\\d+/
+          - cell "●"
+          - cell /DE \\d+/
+          - cell
+        - row /\\d+ ● DE \\d+/:
+          - cell /\\d+/
+          - cell "●"
+          - cell /DE \\d+/
+          - cell
+    `);
+  //Snapshot
+  await page
+    .getByRole("row", { name: "1 ● DE 1", exact: true })
+    .getByRole("cell")
+    .nth(3)
+    .click();
+  await page
+    .getByRole("row", { name: "1 ● DE 1", exact: true })
+    .locator("svg")
+    .nth(1)
+    .click();
+  await expect(page.getByRole("main")).toMatchAriaSnapshot(`
+    - heading "Einstellungen Meldungseingang 1" [level=2]
+    - button "Modal schließen"
+    `);
+  await expect(page.getByRole("main")).toMatchAriaSnapshot(`
+    - text: "Bezeichnung:"
+    - textbox: DE 1
+    - text: "Invertierung:"
+    - switch [checked]
+    - text: "Ein Filterzeit:"
+    - spinbutton /Maximal \\d+ ms erlaubt/
+    - text: "ms Gewichtung:"
+    - spinbutton /Maximal \\d+ erlaubt/
+    - text: "Out of Service:"
+    - switch
+    - text: Aus
+    `);
+  await expect(page.getByRole("main")).toMatchAriaSnapshot(
+    `- button "Speichern"`
+  );
+});

playwright/tests/pages/kabelueberwachung/kabelueberwachung.test.ts

@@ -0,0 +1,36 @@
+import { test, expect } from "@playwright/test";
+
+test.use({
+  viewport: {
+    height: 900,
+    width: 1600,
+  },
+});
+
+test("test", async ({ page }) => {
+  await page.goto("http://localhost:3000/kabelueberwachung");
+  await expect(page.getByRole("button", { name: "Rack 1" })).toBeVisible();
+  await expect(page.getByRole("button", { name: "Rack 2" })).toBeVisible();
+  await expect(page.getByRole("button", { name: "Rack 3" })).toBeVisible();
+  await expect(page.getByRole("button", { name: "Rack 4" })).toBeVisible();
+  await expect(
+    page.getByText(
+      "1KÜ705-FO⚙BetriebAlarmErdschluss ISO: 10,00 MOhmRSL: 0,000 kOhmKabel 1Kabel 1V4"
+    )
+  ).toBeVisible();
+  await expect(
+    page.getByText("DetailansichtISORSLTDRKVZ").first()
+  ).toBeVisible();
+  await expect(
+    page.locator(".bg-littwin-blue.text-white").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.getByRole("button", { name: "KVZ", exact: true }).first()
+  ).toBeVisible();
+});

playwright/tests/pages/kabelueberwachung/kabelueberwachungTest.ts

@@ -1,366 +0,0 @@
-import type { Page } from "@playwright/test";
-import { highlightAndExpectVisible } from "@playwright/utils/highlight";
-import { navTest } from "@/playwright/tests/components/navigation/navTest";
-import { headerTest } from "@/playwright/tests/components/header/headerTest";
-import { footerTest } from "@/playwright/tests/components/footer/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);
-
-  // Use a unique locator to avoid strict mode violation (two elements contain text "Kabel 1").
-  // The card exposes a title attribute "Kabel 1", so prefer getByTitle for a single match.
-  await highlightAndExpectVisible(page, page.getByTitle("Kabel 1").first());
-  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);
-
-  // For cable 8 the UI shows a long name and exposes it via title attribute; target it explicitly
-  await highlightAndExpectVisible(
-    page,
-    page.getByTitle("Kabel_8 in Salzgitter bei Hannover").first()
-  );
-  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);
-}