playwright: Reihenfolge

.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.725
+NEXT_PUBLIC_APP_VERSION=1.6.726
 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.725
+NEXT_PUBLIC_APP_VERSION=1.6.726
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,8 @@
+## [1.6.726] – 2025-08-14
+
+- playwright: dashboard
+
+---
 ## [1.6.725] – 2025-08-14
 
 - playwright: Dashboard Seite test

package-lock.json

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

package.json

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

playwright/tests/analogInputsTest.ts

@@ -0,0 +1,294 @@
+import { test, expect } from "../fixtures";
+import type { Locator, Page } from "@playwright/test";
+
+export async function runAnalogInputsTest(page: Page) {
+  // Kombinierte Helper-Funktion: injiziert CSS (nur einmal), hebt hervor und prüft Sichtbarkeit
+  async function highlightAndExpectVisible(
+    page: Page,
+    locator: Locator,
+    durationMs = 800
+  ) {
+    // CSS nur einmal pro Page injizieren
+    if (!(await page.evaluate(() => (window as any).__pwForceCssInjected))) {
+      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();
+  }
+
+  /*
+    import { test, expect } from "../fixtures";
+     npx playwright codegen http://localhost:3000/analogInputs --target=ts -o tests/e2e/analog-inputs.spec.ts
+     ob ein Element sichtbar ist dann Auge Icon klicken
+     ansonsten nimmt automatich die klicks auf
+     //----------------------------------------------
+     Zum ausführen
+    
+     alle Test datei , je nach dem wie in package.json definiert ist
+     npm run test:e2e:ui
+    
+     bestimmte datei
+     npm run test:e2e:ui -- tests/analogInputs.spec.ts
+    npm run test:e2e:ui -- tests/e2e/analog-inputs.spec.ts
+    */
+
+  test.slow();
+  test("Messwerteingänge", async ({ page }) => {
+    await page.goto("/analogInputs");
+
+    await highlightAndExpectVisible(
+      page,
+      page.getByRole("heading", { name: "Messwerteingänge" }).nth(1)
+    );
+
+    await highlightAndExpectVisible(
+      page,
+      page.getByRole("cell", { name: "Eingang" })
+    );
+
+    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 page.waitForTimeout(3000);
+
+    await highlightAndExpectVisible(
+      page,
+      page.getByRole("cell", { name: "8", exact: true })
+    );
+    await page.waitForTimeout(3000);
+
+    await highlightAndExpectVisible(
+      page,
+      page.locator(".border.p-2.text-center").first()
+    );
+    // Markiere die gesamte erste Datenzeile (Row mit "AE 1" falls vorhanden)
+
+    await page.waitForTimeout(3000);
+
+    await highlightAndExpectVisible(
+      page,
+      page
+        .getByRole("row", { name: "2 5.67 °C Temperatur" })
+        .getByRole("button")
+        .first()
+    );
+    await page.waitForTimeout(3000);
+
+    await highlightAndExpectVisible(
+      page,
+      page.locator("tr:nth-child(3) > td:nth-child(5)")
+    );
+    await page.waitForTimeout(3000);
+
+    await highlightAndExpectVisible(
+      page,
+      page
+        .getByRole("row", { name: "0.01 V AE 4 Messkurve anzeigen" })
+        .getByRole("button")
+        .first()
+    );
+    await page.waitForTimeout(3000);
+
+    await highlightAndExpectVisible(
+      page,
+      page
+        .getByRole("row", { name: "8 -0.00 mA AE 8 Messkurve" })
+        .getByLabel("Messkurve anzeigen")
+    );
+    await page.waitForTimeout(3000);
+
+    await page.getByRole("cell", { name: "1", exact: true }).click();
+
+    await page.locator(".border.p-2.text-center").first().click();
+
+    await highlightAndExpectVisible(
+      page,
+      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.getByRole("button", { name: "Speichern" })
+    );
+    await page.waitForTimeout(3000);
+
+    await highlightAndExpectVisible(
+      page,
+      page.getByRole("button", { name: "Modal schließen" })
+    );
+    await page.waitForTimeout(3000);
+
+    await highlightAndExpectVisible(
+      page,
+      page.getByText(
+        "Einstellungen Messwerteingang 1Bezeichnung:Offset:Faktor:Einheit:"
+      )
+    );
+    await page.waitForTimeout(3000);
+
+    await page.getByRole("button", { name: "Modal schließen" }).click();
+
+    await page
+      .getByRole("row", { name: "1 126.63 V AE 1 Messkurve" })
+      .getByLabel("Messkurve anzeigen")
+      .click();
+
+    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 highlightAndExpectVisible(page, page.getByText("Von"));
+
+    await highlightAndExpectVisible(page, page.getByText("Bis"));
+
+    await highlightAndExpectVisible(
+      page,
+      page.locator("div").filter({ hasText: /^Von$/ })
+    );
+
+    await highlightAndExpectVisible(
+      page,
+      page.locator("div").filter({ hasText: /^Von$/ }).getByRole("textbox")
+    );
+    await page.waitForTimeout(3000);
+
+    await highlightAndExpectVisible(
+      page,
+      page.locator("div").filter({ hasText: /^Bis$/ })
+    );
+    await page.waitForTimeout(3000);
+
+    await highlightAndExpectVisible(
+      page,
+      page.locator("div").filter({ hasText: /^Bis$/ }).getByRole("textbox")
+    );
+    await page.waitForTimeout(3000);
+
+    await highlightAndExpectVisible(page, page.getByRole("img"));
+    await page.waitForTimeout(3000);
+
+    await highlightAndExpectVisible(
+      page,
+      page.getByRole("button", { name: "Alle Messwerte " })
+    );
+    await page.getByRole("button", { name: "Alle Messwerte " }).click();
+    await page.waitForTimeout(3000);
+
+    await page.getByRole("option", { name: "Stündlich" }).click();
+    await page.waitForTimeout(3000);
+
+    await page.getByRole("button", { name: "Stündlich" }).click();
+    await page.waitForTimeout(3000);
+
+    await page.getByRole("option", { name: "Täglich" }).click();
+    await page.waitForTimeout(3000);
+
+    await page.getByRole("button", { name: "Fullscreen" }).click();
+
+    await page.getByRole("button", { name: "Exit fullscreen" }).click();
+
+    await highlightAndExpectVisible(
+      page,
+      page.getByRole("button", { name: "Fullscreen" })
+    );
+
+    await highlightAndExpectVisible(
+      page,
+      page.getByRole("button", { name: "Modal schließen" })
+    );
+    await page.waitForTimeout(3000);
+
+    await page.getByRole("button", { name: "Modal schließen" }).click();
+  });
+
+  // ...dein AnalogInputs-Testcode...
+}

playwright/tests/combined.spec.ts

@@ -0,0 +1,8 @@
+import { test } from "../fixtures";
+import { runDashboardTest } from "./dashboardTest";
+import { runAnalogInputsTest } from "./analogInputsTest";
+
+test("Dashboard und AnalogInputs", async ({ page }) => {
+  await runDashboardTest(page);
+  await runAnalogInputsTest(page);
+});

playwright/tests/dashboardTest.ts

@@ -0,0 +1,230 @@
+import { test, expect } from "../fixtures";
+import type { Locator, Page } from "@playwright/test";
+export async function runDashboardTest(page: Page) {}
+
+// Kombinierte Helper-Funktion: injiziert CSS (nur einmal), hebt hervor und prüft Sichtbarkeit
+async function highlightAndExpectVisible(
+  page: Page,
+  locator: Locator,
+  durationMs = 800
+) {
+  // CSS nur einmal pro Page injizieren
+  if (!(await page.evaluate(() => (window as any).__pwForceCssInjected))) {
+    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();
+}
+test.slow();
+test("Daschboard-Test", async ({ 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" })
+  );
+  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();
+});