test: Tests erfolgreich mit base url von playwright.config.ts

2025-09-11 10:11:11 +02:00
parent 74880d9ccc
commit 5ef7e648eb
17 changed files with 504 additions and 484 deletions
--- a/.env.development
+++ b/.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.908
+NEXT_PUBLIC_APP_VERSION=1.6.909
 NEXT_PUBLIC_CPL_MODE=json   # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)

--- a/.env.production
+++ b/.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.908
+NEXT_PUBLIC_APP_VERSION=1.6.909
 NEXT_PUBLIC_CPL_MODE=production
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,8 @@
+## [1.6.909] – 2025-09-11
+
+- test: analogInputs.test.ts and dashboard.test.ts with import components
+
+---
 ## [1.6.908] – 2025-09-11

 - chore: only *.test.ts  for pages and components test
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "cpl-v4",
-  "version": "1.6.908",
+  "version": "1.6.909",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "cpl-v4",
-      "version": "1.6.908",
+      "version": "1.6.909",
      "dependencies": {
        "@emotion/react": "^11.13.0",
        "@emotion/styled": "^11.13.0",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "cpl-v4",
-  "version": "1.6.908",
+  "version": "1.6.909",
  "private": true,
  "scripts": {
    "dev": "next dev -p 3000",
--- a/playwright/tests/pages/analogInputs/analogInputs.test.ts
+++ b/playwright/tests/pages/analogInputs/analogInputs.test.ts
@@ -10,8 +10,8 @@ test.use({
  },
 });

-test("test", async ({ page }) => {
-  await page.goto("http://localhost:3000/analogInputs");
+test("analogInputs", async ({ page }) => {
+  await page.goto("/analogInputs");
  // Gemeinsame Layout-Checks
  await headerTest(page);
  await navTest(page);
--- a/playwright/tests/pages/dashboard/dashboard.test.ts
+++ b/playwright/tests/pages/dashboard/dashboard.test.ts
@@ -11,7 +11,7 @@ test.use({
 });

 test("Dashboard", async ({ page }) => {
-  await page.goto("http://localhost:3000/dashboard");
+  await page.goto("/dashboard");
  // Gemeinsame Layout-Checks
  await headerTest(page);
  await navTest(page);
--- a/playwright/tests/pages/digitalInputs/digitalInputs.test.ts
+++ b/playwright/tests/pages/digitalInputs/digitalInputs.test.ts
@@ -1,4 +1,7 @@
 import { test, expect } from "@playwright/test";
+import { headerTest } from "@/playwright/tests/components/header/headerTest";
+import { navTest } from "@/playwright/tests/components/navigation/navTest";
+import { footerTest } from "@/playwright/tests/components/footer/footerTest";

 test.use({
  viewport: {
@@ -7,8 +10,12 @@ test.use({
  },
 });

-test("test", async ({ page }) => {
-  await page.goto("http://localhost:3000/digitalInputs");
+test("digitalInputs", async ({ page }) => {
+  await page.goto("/digitalInputs");
+  // Gemeinsame Layout-Checks
+  await headerTest(page);
+  await navTest(page);
+  await footerTest(page);
  //Snapshot
  await expect(page.getByRole("main")).toMatchAriaSnapshot(`
    - heading "Meldungseingänge" [level=1]
--- a/playwright/tests/pages/digitalOutputs/digitalOutputs.test.ts
+++ b/playwright/tests/pages/digitalOutputs/digitalOutputs.test.ts
@@ -0,0 +1,144 @@
+import { test, expect } from "@playwright/test";
+import { headerTest } from "@/playwright/tests/components/header/headerTest";
+import { navTest } from "@/playwright/tests/components/navigation/navTest";
+import { footerTest } from "@/playwright/tests/components/footer/footerTest";
+
+test.use({
+  viewport: {
+    height: 800,
+    width: 1280,
+  },
+});
+
+test("digitalOutputs", async ({ page }) => {
+  await page.goto("/dashboard");
+  // Gemeinsame Layout-Checks
+  await headerTest(page);
+  await navTest(page);
+  await footerTest(page);
+  await page.getByRole("link", { name: "Schaltausgänge" }).click();
+  await expect(page.locator("h1")).toBeVisible();
+  await expect(
+    page.locator("h2").filter({ hasText: "Schaltausgänge" }).locator("svg")
+  ).toBeVisible();
+  await expect(
+    page.locator("h2").filter({ hasText: "Schaltausgänge" })
+  ).toBeVisible();
+  await expect(
+    page.getByRole("cell", { name: "Ausgang", exact: true })
+  ).toBeVisible();
+  await expect(page.getByRole("cell", { name: "Bezeichnung" })).toBeVisible();
+  await expect(page.getByRole("cell", { name: "Schalter" })).toBeVisible();
+  await expect(page.getByRole("cell", { name: "Aktion" })).toBeVisible();
+  await expect(
+    page.getByRole("cell", { name: "1", exact: true }).locator("svg")
+  ).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: "Ausgang1" })).toBeVisible();
+  await expect(page.getByRole("cell", { name: "Ausgang2" })).toBeVisible();
+  await expect(page.getByRole("cell", { name: "Ausgang3" })).toBeVisible();
+  await expect(page.getByRole("cell", { name: "Ausgang4" })).toBeVisible();
+  await expect(
+    page.getByRole("row", { name: "Ausgang1" }).getByRole("cell").nth(2)
+  ).toBeVisible();
+  await expect(
+    page.getByRole("row", { name: "Ausgang2" }).getByRole("cell").nth(2)
+  ).toBeVisible();
+  await expect(
+    page.getByRole("row", { name: "Ausgang3" }).getByRole("cell").nth(2)
+  ).toBeVisible();
+  await expect(
+    page.getByRole("row", { name: "Ausgang4" }).getByRole("cell").nth(2)
+  ).toBeVisible();
+  await expect(
+    page.getByRole("row", { name: "Ausgang1" }).getByRole("cell").nth(3)
+  ).toBeVisible();
+  await expect(
+    page.getByRole("row", { name: "Ausgang2" }).getByRole("cell").nth(3)
+  ).toBeVisible();
+  await expect(
+    page.getByRole("row", { name: "Ausgang3" }).getByRole("cell").nth(3)
+  ).toBeVisible();
+  await expect(
+    page.getByRole("row", { name: "Ausgang4" }).getByRole("cell").nth(3)
+  ).toBeVisible();
+  await page
+    .getByRole("row", { name: "Ausgang1" })
+    .locator("svg")
+    .nth(1)
+    .click();
+  await expect(page.getByRole("main")).toMatchAriaSnapshot(`
+    - heading "Einstellungen Schaltausgang 1" [level=2]
+    - button "Modal schließen"
+    `);
+  await expect(page.getByRole("main")).toMatchAriaSnapshot(`
+    - text: "Bezeichnung:"
+    - textbox "z. B. Licht Relais 1"
+    `);
+  await expect(page.getByRole("main")).toMatchAriaSnapshot(
+    `- button "Speichern"`
+  );
+  await page.getByRole("button", { name: "Modal schließen" }).click();
+  await page
+    .getByRole("row", { name: "Ausgang2" })
+    .locator("svg")
+    .nth(1)
+    .click();
+  await expect(page.getByRole("main")).toMatchAriaSnapshot(`
+    - heading "Einstellungen Schaltausgang 2" [level=2]
+    - button "Modal schließen"
+    `);
+  await expect(page.getByRole("main")).toMatchAriaSnapshot(`
+    - text: "Bezeichnung:"
+    - textbox "z. B. Licht Relais 1"
+    `);
+  await expect(page.getByRole("main")).toMatchAriaSnapshot(
+    `- button "Speichern"`
+  );
+  await page.getByRole("button", { name: "Modal schließen" }).click();
+  await page
+    .getByRole("row", { name: "Ausgang3" })
+    .locator("svg")
+    .nth(1)
+    .click();
+  await expect(page.getByRole("main")).toMatchAriaSnapshot(`
+    - heading "Einstellungen Schaltausgang 3" [level=2]
+    - button "Modal schließen"
+    `);
+  await expect(page.getByRole("main")).toMatchAriaSnapshot(`
+    - text: "Bezeichnung:"
+    - textbox "z. B. Licht Relais 1"
+    `);
+  await expect(page.getByRole("main")).toMatchAriaSnapshot(
+    `- button "Speichern"`
+  );
+  await page.getByRole("button", { name: "Modal schließen" }).click();
+  await page
+    .getByRole("row", { name: "Ausgang4" })
+    .locator("svg")
+    .nth(1)
+    .click();
+  await expect(page.getByRole("main")).toMatchAriaSnapshot(`
+    - heading "Einstellungen Schaltausgang 4" [level=2]
+    - button "Modal schließen"
+    `);
+  await expect(page.getByRole("main")).toMatchAriaSnapshot(`
+    - text: "Bezeichnung:"
+    - textbox "z. B. Licht Relais 1"
+    `);
+  await expect(page.getByRole("main")).toMatchAriaSnapshot(
+    `- button "Speichern"`
+  );
+  await page.getByRole("button", { name: "Modal schließen" }).click();
+});
--- a/playwright/tests/pages/digitalOutputs/digitalOutputsTest.ts
+++ b/playwright/tests/pages/digitalOutputs/digitalOutputsTest.ts
@@ -1,64 +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 runDigitalOutputsTest(page: Page) {
-  await page.goto("/digitalOutputs");
-  //----------------------
-  await headerTest(page);
-  await navTest(page);
-  await footerTest(page);
-  // Wait a moment for initial redux fetch and render in slower CI environments
-  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();
-  // Wait for the outputs table to render and be visible
-  const table = page.locator("table");
-  await table.first().waitFor({ state: "visible", timeout: 15000 });
-
-  // Prefer robust selection: select the row by its first cell text matching the id "2"
-  const rowAusgang2 = table
-    .getByRole("row")
-    .filter({ has: page.getByRole("cell", { name: /^\s*2\s*$/ }) })
-    .first();
-  await rowAusgang2.waitFor({ state: "visible", timeout: 15000 });
-  await rowAusgang2.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" })
-  );
-  // Interact with the switch icon within each row deterministically
-  for (const id of [1, 2, 3, 4]) {
-    const row = table
-      .getByRole("row")
-      .filter({
-        has: page.getByRole("cell", { name: new RegExp(`^\\s*${id}\\s*$`) }),
-      })
-      .first();
-    await row.waitFor({ state: "visible", timeout: 10000 });
-    const switchIcon = row.locator("td >> nth=2").locator("svg");
-    await switchIcon.first().click();
-  }
-}
--- a/playwright/tests/pages/kabelueberwachung/kabelueberwachung.test.ts
+++ b/playwright/tests/pages/kabelueberwachung/kabelueberwachung.test.ts
@@ -1,4 +1,7 @@
 import { test, expect } from "@playwright/test";
+import { headerTest } from "@/playwright/tests/components/header/headerTest";
+import { navTest } from "@/playwright/tests/components/navigation/navTest";
+import { footerTest } from "@/playwright/tests/components/footer/footerTest";

 test.use({
  viewport: {
@@ -7,8 +10,12 @@ test.use({
  },
 });

-test("test", async ({ page }) => {
-  await page.goto("http://localhost:3000/kabelueberwachung");
+test("Kabelüberwachung", async ({ page }) => {
+  await page.goto("/kabelueberwachung");
+  // Gemeinsame Layout-Checks
+  await headerTest(page);
+  await navTest(page);
+  await footerTest(page);
  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();
--- a/playwright/tests/pages/meldungen/meldungen.test.ts
+++ b/playwright/tests/pages/meldungen/meldungen.test.ts
@@ -0,0 +1,84 @@
+import { test, expect } from "@playwright/test";
+import { headerTest } from "@/playwright/tests/components/header/headerTest";
+import { navTest } from "@/playwright/tests/components/navigation/navTest";
+import { footerTest } from "@/playwright/tests/components/footer/footerTest";
+
+test.use({
+  viewport: {
+    height: 800,
+    width: 1280,
+  },
+});
+
+test("Berichte/Meldungen", async ({ page }) => {
+  await page.goto("/meldungen");
+  // Gemeinsame Layout-Checks
+  await headerTest(page);
+  await navTest(page);
+  await footerTest(page);
+  await expect(page.getByRole("heading", { name: "Berichte" })).toBeVisible();
+  await expect(page.getByText("Von")).toBeVisible();
+  await expect(
+    page.locator("div").filter({ hasText: /^Von$/ }).getByRole("textbox")
+  ).toBeVisible();
+  await expect(page.getByText("Bis")).toBeVisible();
+  await expect(
+    page.locator("div").filter({ hasText: /^Bis$/ }).getByRole("textbox")
+  ).toBeVisible();
+  await expect(page.getByRole("button", { name: "Anzeigen" })).toBeVisible();
+  await expect(
+    page.getByRole("button", { name: "Alle Quellen" })
+  ).toBeVisible();
+  await page
+    .locator("div")
+    .filter({ hasText: /^Von$/ })
+    .getByRole("textbox")
+    .click();
+  await expect(page.getByLabel("Sunday", { exact: true })).toBeVisible();
+  await expect(page.getByLabel("Monday", { exact: true })).toBeVisible();
+  await expect(page.getByLabel("Tuesday", { exact: true })).toBeVisible();
+  await expect(page.getByLabel("Wednesday", { exact: true })).toBeVisible();
+  await expect(page.getByLabel("Thursday", { exact: true })).toBeVisible();
+  await expect(page.getByLabel("Friday", { exact: true })).toBeVisible();
+  await expect(page.getByLabel("Saturday", { exact: true })).toBeVisible();
+  await page
+    .locator("div")
+    .filter({ hasText: /^Von$/ })
+    .getByRole("textbox")
+    .click();
+  await page
+    .locator("div")
+    .filter({ hasText: /^Von$/ })
+    .getByRole("textbox")
+    .click();
+  await page.getByRole("heading", { name: "Berichte" }).click();
+  await page
+    .locator("div")
+    .filter({ hasText: /^Bis$/ })
+    .getByRole("textbox")
+    .click();
+  await expect(page.getByLabel("Sunday", { exact: true })).toBeVisible();
+  await page.getByLabel("Monday", { exact: true }).click();
+  await page.getByLabel("Tuesday", { exact: true }).click();
+  await page.getByLabel("Wednesday", { exact: true }).click();
+  await page.getByLabel("Thursday", { exact: true }).click();
+  await page.getByLabel("Friday", { exact: true }).click();
+  await page.getByLabel("Saturday", { exact: true }).click();
+  await page.getByRole("heading", { name: "Berichte" }).click();
+  await page.getByRole("button", { name: "Alle Quellen" }).click();
+  await page.getByRole("button", { name: "Alle Quellen" }).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 expect(
+    page.getByRole("row", { name: "05.09.2025, 11:52:44" }).locator("div")
+  ).toBeVisible();
+  await expect(
+    page
+      .getByRole("row", { name: "05.09.2025, 11:51:14" })
+      .getByRole("cell")
+      .first()
+  ).toBeVisible();
+});
--- a/playwright/tests/pages/meldungen/meldungenTest.ts
+++ b/playwright/tests/pages/meldungen/meldungenTest.ts
@@ -1,124 +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 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);
-  }
-
-  // Interact with the first few data rows generically instead of hardcoded timestamps
-  const table = page.locator("table");
-  await table.first().waitFor({ state: "visible", timeout: 15000 });
-  const rows = table.locator("tbody tr");
-  const rowCount = await rows.count();
-  const maxRows = Math.min(5, rowCount);
-  for (let i = 0; i < maxRows; i++) {
-    const row = rows.nth(i);
-    const firstCell = row.locator("td").first();
-    await highlightAndExpectVisible(page, firstCell);
-    await firstCell.click();
-    // click a couple of other cells if present
-    const secondCell = row.locator("td").nth(1);
-    if (await secondCell.count()) {
-      await highlightAndExpectVisible(page, secondCell);
-      await secondCell.click();
-    }
-    const thirdCell = row.locator("td").nth(2);
-    if (await thirdCell.count()) {
-      await highlightAndExpectVisible(page, thirdCell);
-      await thirdCell.click();
-    }
-    await page.waitForTimeout(20);
-  }
-}
--- a/playwright/tests/pages/settingsPage/settingsPage.test.ts
+++ b/playwright/tests/pages/settingsPage/settingsPage.test.ts
@@ -0,0 +1,141 @@
+import { test, expect } from "@playwright/test";
+import { headerTest } from "@/playwright/tests/components/header/headerTest";
+import { navTest } from "@/playwright/tests/components/navigation/navTest";
+import { footerTest } from "@/playwright/tests/components/footer/footerTest";
+
+test.use({
+  viewport: {
+    height: 800,
+    width: 1280,
+  },
+});
+
+test("Einstellungen", async ({ page }) => {
+  await page.goto("/einstellungen");
+  // Gemeinsame Layout-Checks
+  await headerTest(page);
+  await navTest(page);
+  await footerTest(page);
+  await page.getByRole("button", { name: "Allgemeine Einstellungen" }).click();
+  await expect(
+    page.getByRole("heading", { name: "Allgemeine Einstellungen" })
+  ).toBeVisible();
+  await expect(page.getByText("Name:")).toBeVisible();
+  await expect(
+    page
+      .locator("div")
+      .filter({ hasText: /^Name:$/ })
+      .getByRole("textbox")
+  ).toBeVisible();
+  await expect(page.getByText("MAC Adresse 1:")).toBeVisible();
+  await expect(
+    page
+      .locator("div")
+      .filter({ hasText: /^MAC Adresse 1:$/ })
+      .getByRole("textbox")
+  ).toHaveValue("0 48 86 81 46 143");
+  await expect(page.getByText("Systemzeit:")).toBeVisible();
+  await expect(
+    page
+      .locator("div")
+      .filter({ hasText: /^Systemzeit übernehmen$/ })
+      .getByRole("textbox")
+  ).toHaveValue("23.10.24 15:10:28");
+  await expect(
+    page.getByRole("button", { name: "Systemzeit übernehmen" })
+  ).toBeVisible();
+  await expect(page.getByText("IP:")).toBeVisible();
+  await expect(
+    page.locator("div").filter({ hasText: /^IP:$/ }).getByRole("textbox")
+  ).toBeVisible();
+  await expect(page.getByText("Subnet:")).toBeVisible();
+  await expect(
+    page
+      .locator("div")
+      .filter({ hasText: /^Subnet:$/ })
+      .getByRole("textbox")
+  ).toBeVisible();
+  await expect(page.getByText("Gateway:")).toBeVisible();
+  await expect(
+    page
+      .locator("div")
+      .filter({ hasText: /^Gateway:$/ })
+      .getByRole("textbox")
+  ).toBeVisible();
+  await expect(
+    page.getByRole("button", { name: "Neustart CPL" })
+  ).toBeVisible();
+  await expect(page.getByRole("button", { name: "Speichern" })).toBeVisible();
+  await page.getByRole("button", { name: "OPCUA" }).click();
+  await expect(
+    page.getByRole("img", { name: "OPCUA Logo" }).first()
+  ).toBeVisible();
+  await expect(
+    page.getByRole("img", { name: "OPCUA Logo" }).nth(1)
+  ).toBeVisible();
+  await expect(page.getByText("Server Status:")).toBeVisible();
+  await expect(page.getByRole("button", { name: "Aktiviert" })).toBeVisible();
+  await expect(page.getByText("1")).toBeVisible();
+  await expect(page.getByText("Nodeset Name")).toBeVisible();
+  await expect(page.getByText("OPCUA Zustand")).toBeVisible();
+  await expect(page.getByRole("textbox")).toHaveValue(
+    "CPL V4 OPC UA Application Deutsche Bahn"
+  );
+  await expect(page.getByText("Aktuelle OPC-Clients")).toBeVisible();
+  await expect(page.getByText("0", { exact: true })).toBeVisible();
+  await page.getByRole("button", { name: "Datenbank" }).click();
+  await expect(
+    page.getByRole("heading", { name: "Datenbank Einstellungen" })
+  ).toBeVisible();
+  await expect(
+    page.getByRole("button", { name: "Meldungen löschen" })
+  ).toBeVisible();
+  await expect(
+    page.getByRole("button", { name: "Messwerte Logger löschen" })
+  ).toBeVisible();
+  await page.getByRole("button", { name: "NTP" }).click();
+  await expect(
+    page.getByRole("heading", { name: "NTP Einstellungen" })
+  ).toBeVisible();
+  await expect(page.getByText("NTP Server 1")).toBeVisible();
+  await expect(
+    page
+      .locator("div")
+      .filter({ hasText: /^NTP Server 1$/ })
+      .getByRole("textbox")
+  ).toBeVisible();
+  await expect(page.getByText("NTP Server 2")).toBeVisible();
+  await expect(
+    page
+      .locator("div")
+      .filter({ hasText: /^NTP Server 2$/ })
+      .getByRole("textbox")
+  ).toBeVisible();
+  await expect(page.getByText("NTP Server 3")).toBeVisible();
+  await expect(
+    page
+      .locator("div")
+      .filter({ hasText: /^NTP Server 3$/ })
+      .getByRole("textbox")
+  ).toBeVisible();
+  await expect(page.getByText("Zeitzone")).toBeVisible();
+  await expect(
+    page
+      .locator("div")
+      .filter({ hasText: /^Zeitzone$/ })
+      .getByRole("textbox")
+  ).toBeVisible();
+  await expect(page.getByText("NTP aktiv:")).toBeVisible();
+  await expect(page.getByRole("button", { name: "Speichern" })).toBeVisible();
+  await page.getByRole("button", { name: "Benutzerverwaltung" }).click();
+  await expect(
+    page.getByRole("heading", { name: "Login Admin-Bereich" })
+  ).toBeVisible();
+  await expect(
+    page.getByRole("textbox", { name: "Benutzername" })
+  ).toBeVisible();
+  await expect(page.getByRole("textbox", { name: "Passwort" })).toBeVisible();
+  await expect(
+    page.getByRole("button", { name: "Admin anmelden" })
+  ).toBeVisible();
+});
--- a/playwright/tests/pages/settingsPage/settingsPageTest.ts
+++ b/playwright/tests/pages/settingsPage/settingsPageTest.ts
@@ -1,175 +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 runSettingsPageTest(page: Page) {
-  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(
-    page,
-    page.getByRole("button", { name: "Allgemeine Einstellungen" })
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("heading", { name: "Allgemeine Einstellungen" })
-  );
-  await highlightAndExpectVisible(page, page.getByText("Name:"));
-  await highlightAndExpectVisible(
-    page,
-    page
-      .locator("div")
-      .filter({ hasText: /^Name:$/ })
-      .getByRole("textbox")
-  );
-  await highlightAndExpectVisible(page, page.getByText("MAC Adresse 1:"));
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("button", { name: "Systemzeit übernehmen" })
-  );
-  await highlightAndExpectVisible(page, page.getByText("IP:"));
-  await highlightAndExpectVisible(
-    page,
-    page.locator("div").filter({ hasText: /^IP:$/ }).getByRole("textbox")
-  );
-  await highlightAndExpectVisible(page, page.getByText("Subnet:"));
-  await highlightAndExpectVisible(
-    page,
-    page
-      .locator("div")
-      .filter({ hasText: /^Subnet:$/ })
-      .getByRole("textbox")
-  );
-  await highlightAndExpectVisible(page, page.getByText("Gateway:"));
-  await highlightAndExpectVisible(
-    page,
-    page
-      .locator("div")
-      .filter({ hasText: /^Gateway:$/ })
-      .getByRole("textbox")
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("button", { name: "Neustart CPL" })
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("button", { name: "Speichern" })
-  );
-  await page.getByRole("button", { name: "OPCUA" }).click();
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("img", { name: "OPCUA Logo" }).first()
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("img", { name: "OPCUA Logo" }).nth(1)
-  );
-  await highlightAndExpectVisible(page, page.getByText("Server Status:"));
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("button", { name: "Aktiviert" })
-  );
-  await highlightAndExpectVisible(page, page.getByText("OPCUA Zustand"));
-  await highlightAndExpectVisible(page, page.getByText("1"));
-  await highlightAndExpectVisible(page, page.getByText("Nodeset Name"));
-  await highlightAndExpectVisible(page, page.getByText("Aktuelle OPC-Clients"));
-  await highlightAndExpectVisible(page, page.getByText("0", { exact: true }));
-  await page.getByRole("button", { name: "Datenbank" }).click();
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("heading", { name: "Datenbank Einstellungen" })
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("button", { name: "Meldungen löschen" })
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("button", { name: "Messwerte Logger löschen" })
-  );
-  await page.getByRole("button", { name: "NTP" }).click();
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("heading", { name: "NTP Einstellungen" })
-  );
-  await highlightAndExpectVisible(page, page.getByText("NTP Server 1"));
-  await highlightAndExpectVisible(
-    page,
-    page
-      .locator("div")
-      .filter({ hasText: /^NTP Server 1$/ })
-      .getByRole("textbox")
-  );
-  await highlightAndExpectVisible(page, page.getByText("NTP Server 3"));
-  await highlightAndExpectVisible(
-    page,
-    page
-      .locator("div")
-      .filter({ hasText: /^NTP Server 3$/ })
-      .getByRole("textbox")
-  );
-  await highlightAndExpectVisible(page, page.getByText("NTP Server 2"));
-  await highlightAndExpectVisible(
-    page,
-    page
-      .locator("div")
-      .filter({ hasText: /^NTP Server 2$/ })
-      .getByRole("textbox")
-  );
-  await highlightAndExpectVisible(page, page.getByText("Zeitzone"));
-  await highlightAndExpectVisible(
-    page,
-    page
-      .locator("div")
-      .filter({ hasText: /^Zeitzone$/ })
-      .getByRole("textbox")
-  );
-  await highlightAndExpectVisible(page, page.getByText("NTP aktiv:"));
-  await highlightAndExpectVisible(page, page.getByRole("checkbox"));
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("button", { name: "Speichern" })
-  );
-  await page.getByRole("button", { name: "Benutzerverwaltung" }).click();
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("heading", { name: "Login Admin-Bereich" })
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("textbox", { name: "Benutzername" })
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("textbox", { name: "Passwort" })
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("button", { name: "Admin anmelden" })
-  );
-  await page.getByRole("textbox", { name: "Benutzername" }).click();
-  await page.getByRole("textbox", { name: "Benutzername" }).fill("admin");
-  await page.getByRole("textbox", { name: "Passwort" }).click();
-  await page.getByRole("textbox", { name: "Passwort" }).fill("admin");
-  await page.getByRole("button", { name: "Admin anmelden" }).click();
-  await highlightAndExpectVisible(page, page.getByText("Login erfolgreich!"));
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("button", { name: "Abmelden" })
-  );
-  await highlightAndExpectVisible(
-    page,
-    page.getByRole("button", { name: "Admin anmelden" })
-  );
-}
-
-//---------------------------------------------------------------------
--- a/playwright/tests/pages/system/system.test.ts
+++ b/playwright/tests/pages/system/system.test.ts
@@ -0,0 +1,104 @@
+import { test, expect } from "@playwright/test";
+import { headerTest } from "@/playwright/tests/components/header/headerTest";
+import { navTest } from "@/playwright/tests/components/navigation/navTest";
+import { footerTest } from "@/playwright/tests/components/footer/footerTest";
+
+test.use({
+  viewport: {
+    height: 800,
+    width: 1280,
+  },
+});
+
+test("System", async ({ page }) => {
+  await page.goto("/system");
+  // Gemeinsame Layout-Checks
+  await headerTest(page);
+  await navTest(page);
+  await footerTest(page);
+  await expect(
+    page.getByRole("heading", { name: "System Spannungen &" })
+  ).toBeVisible();
+  await expect(page.getByRole("heading", { name: "+15V" })).toBeVisible();
+  await expect(page.getByText("15.06 VDetailansicht")).toBeVisible();
+  await expect(page.getByRole("heading", { name: "+5V" })).toBeVisible();
+  await expect(page.getByText("4.98 VDetailansicht")).toBeVisible();
+  await expect(page.getByRole("heading", { name: "-15V" })).toBeVisible();
+  await expect(page.getByText("-15.09 VDetailansicht")).toBeVisible();
+  await expect(page.getByRole("heading", { name: "-98V" })).toBeVisible();
+  await expect(page.getByText("-96.48 VDetailansicht")).toBeVisible();
+  await expect(page.getByRole("heading", { name: "ADC Temp" })).toBeVisible();
+  await expect(page.getByText("59.78 °CDetailansicht")).toBeVisible();
+  await expect(page.getByRole("heading", { name: "CPU Temp" })).toBeVisible();
+  await expect(page.getByText("56.92 °CDetailansicht")).toBeVisible();
+  await expect(page.getByRole("img").nth(2)).toBeVisible();
+  await expect(page.getByRole("img").nth(3)).toBeVisible();
+  await page
+    .getByRole("paragraph")
+    .filter({ hasText: "15.06 VDetailansicht" })
+    .getByRole("button")
+    .click();
+  await expect(page.getByRole("dialog")).toMatchAriaSnapshot(`
+    - 'heading "Detailansicht: +15V" [level=2]'
+    - button "Vollbild"
+    - button "Modal schließen"
+    `);
+  await expect(page.getByRole("dialog")).toMatchAriaSnapshot(`
+    - text: Von
+    - textbox: /\\d+\\.\\d+\\.\\d+/
+    - text: Bis
+    - textbox: /\\d+\\.\\d+\\.\\d+/
+    - text: "Zeitraum:"
+    - button "Alle Messwerte":
+      - img
+    - button "Daten laden"
+    `);
+  await expect(page.getByRole("dialog")).toMatchAriaSnapshot(`
+    - text: Von
+    - textbox: /\\d+\\.\\d+\\.\\d+/
+    - text: Bis
+    - textbox: /\\d+\\.\\d+\\.\\d+/
+    - text: "Zeitraum:"
+    - button "Alle Messwerte":
+      - img
+    - button "Daten laden"
+    - img
+    `);
+  await page.getByRole("button", { name: "Alle Messwerte" }).click();
+  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 page.getByRole("option", { name: "Täglich" }).click();
+  await expect(page.getByRole("button", { name: "Täglich" })).toBeVisible();
+  await page
+    .locator("div")
+    .filter({ hasText: /^Von$/ })
+    .getByRole("textbox")
+    .click();
+  await expect(page.getByLabel("Sunday", { exact: true })).toBeVisible();
+  await expect(page.getByLabel("Monday", { exact: true })).toBeVisible();
+  await expect(page.getByLabel("Tuesday", { exact: true })).toBeVisible();
+  await expect(page.getByLabel("Wednesday", { exact: true })).toBeVisible();
+  await expect(page.getByLabel("Thursday", { exact: true })).toBeVisible();
+  await expect(page.getByLabel("Friday", { exact: true })).toBeVisible();
+  await expect(page.getByLabel("Saturday", { exact: true })).toBeVisible();
+  await page
+    .locator("div")
+    .filter({ hasText: /^Bis$/ })
+    .getByRole("textbox")
+    .click();
+  await expect(page.getByLabel("Sunday", { exact: true })).toBeVisible();
+  await expect(page.getByLabel("Monday", { exact: true })).toBeVisible();
+  await expect(page.getByLabel("Tuesday", { exact: true })).toBeVisible();
+  await expect(page.getByLabel("Wednesday", { exact: true })).toBeVisible();
+  await expect(page.getByLabel("Thursday", { exact: true })).toBeVisible();
+  await expect(page.getByLabel("Friday", { exact: true })).toBeVisible();
+  await expect(page.getByLabel("Saturday", { exact: true })).toBeVisible();
+  await page
+    .locator("header")
+    .filter({ hasText: "Detailansicht: +15V" })
+    .click();
+  await page.getByRole("button", { name: "Vollbild" }).click();
+  await page.getByRole("button", { name: "Vollbild verlassen" }).click();
+  await page.getByRole("button", { name: "Modal schließen" }).click();
+});
--- a/playwright/tests/pages/system/systemTest.ts
+++ b/playwright/tests/pages/system/systemTest.ts
@@ -1,109 +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 runSystemTest(page: Page) {
-  await page.goto("/system");
-  //----------------------
-  await headerTest(page);
-  await navTest(page);
-  await footerTest(page);
-  await page.waitForTimeout(400);
-  //----------------------
-  // System Spannungen &
-  const systemSpannung = page.getByRole("heading", {
-    name: "System Spannungen &",
-  });
-  await highlightAndExpectVisible(page, systemSpannung);
-  await systemSpannung.click();
-  await page.waitForTimeout(100);
-
-  // +15V
-  const plus15V = page.getByRole("heading", { name: "+15V" });
-  await highlightAndExpectVisible(page, plus15V);
-  await plus15V.click();
-  await page.waitForTimeout(100);
-
-  // 15.06 VDetailansicht
-  const v15Detail = page.getByText("15.06 VDetailansicht");
-  await highlightAndExpectVisible(page, v15Detail);
-  await v15Detail.click();
-  await page.waitForTimeout(100);
-
-  // +5V
-  const plus5V = page.getByRole("heading", { name: "+5V" });
-  await highlightAndExpectVisible(page, plus5V);
-  await plus5V.click();
-  await page.waitForTimeout(100);
-
-  // 4.98 VDetailansicht
-  const v5Detail = page.getByText("4.98 VDetailansicht");
-  await highlightAndExpectVisible(page, v5Detail);
-  await v5Detail.click();
-  await page.waitForTimeout(100);
-
-  // -15V
-  const minus15V = page.getByRole("heading", { name: "-15V" });
-  await highlightAndExpectVisible(page, minus15V);
-  await minus15V.click();
-  await page.waitForTimeout(100);
-
-  // -15.09 VDetailansicht
-  const vMinus15Detail = page.getByText("-15.09 VDetailansicht");
-  await highlightAndExpectVisible(page, vMinus15Detail);
-  await vMinus15Detail.click();
-  await page.waitForTimeout(100);
-
-  // -98V
-  const minus98V = page.getByRole("heading", { name: "-98V" });
-  await highlightAndExpectVisible(page, minus98V);
-  await minus98V.click();
-  await page.waitForTimeout(100);
-
-  // -96.48 VDetailansicht
-  const vMinus98Detail = page.getByText("-96.48 VDetailansicht");
-  await highlightAndExpectVisible(page, vMinus98Detail);
-  await vMinus98Detail.click();
-  await page.waitForTimeout(100);
-
-  // ADC Temp
-  const adcTemp = page.getByRole("heading", { name: "ADC Temp" });
-  await highlightAndExpectVisible(page, adcTemp);
-  await adcTemp.click();
-  await page.waitForTimeout(100);
-
-  // 59.78 °CDetailansicht
-  const adcTempDetail = page.getByText("59.78 °CDetailansicht");
-  await highlightAndExpectVisible(page, adcTempDetail);
-  await adcTempDetail.click();
-  await page.waitForTimeout(100);
-
-  // CPU Temp
-  const cpuTemp = page.getByRole("heading", { name: "CPU Temp" });
-  await highlightAndExpectVisible(page, cpuTemp);
-  await cpuTemp.click();
-  await page.waitForTimeout(100);
-  await highlightAndExpectVisible(page, cpuTemp);
-  await cpuTemp.click();
-  await page.waitForTimeout(100);
-
-  // 56.92 °CDetailansicht
-  const cpuTempDetail = page.getByText("56.92 °CDetailansicht");
-  await highlightAndExpectVisible(page, cpuTempDetail);
-  await cpuTempDetail.click();
-  await page.waitForTimeout(100);
-
-  // img nth(2)
-  const img2 = page.getByRole("img").nth(2);
-  await highlightAndExpectVisible(page, img2);
-  await img2.click({ position: { x: 72, y: 53 } });
-  await page.waitForTimeout(100);
-
-  // img nth(3)
-  const img3 = page.getByRole("img").nth(3);
-  await highlightAndExpectVisible(page, img3);
-  await img3.click({ position: { x: 272, y: 93 } });
-  await page.waitForTimeout(100);
-}