test: digitalOutputs

.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.767
+NEXT_PUBLIC_APP_VERSION=1.6.768
 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.767
+NEXT_PUBLIC_APP_VERSION=1.6.768
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,8 @@
+## [1.6.768] – 2025-08-29
+
+- feat: Test nach Navigation zuordnen
+
+---
 ## [1.6.767] – 2025-08-28
 
 - feat: Jenkinsfile node_Modules verzeichnis in Docker Volume gespeichert

package-lock.json

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.767",
+  "version": "1.6.768",
   "private": true,
   "scripts": {
     "dev": "next dev",

playwright/tests/all.test.ts

@@ -1,14 +1,16 @@
 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 { runSettingsPageTest } from "./pages/settingsPageTest";
-import { runDigitalInputsTest } from "./pages/digitalInputsTest";
-import { runCableMonitoringTest } from "./pages/kabelueberwachungTest";
 
 test("Dashboard, AnalogInputs und SettingsPage", async ({ page }) => {
-  await runDashboardTest(page);
+  // await runDashboardTest(page);
-  await runCableMonitoringTest(page);
+  // await runCableMonitoringTest(page);
-  await runDigitalInputsTest(page);
+  //await runDigitalInputsTest(page);
-  await runAnalogInputsTest(page);
+  await runDigitalOutputsTest(page);
-  await runSettingsPageTest(page);
+  //await runAnalogInputsTest(page);
+  //await runSettingsPageTest(page);
 });

playwright/tests/pages/digitalOutputsTest.ts

@@ -0,0 +1,250 @@
+// 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();
+}