test: Einstellungen Seite mit highlighting

playwright/tests/settingsPageTest.ts

@@ -1,183 +1,260 @@
 import { expect } from "@playwright/test";
 import type { Page } from "@playwright/test";
+import { highlightAndExpectVisible } from "./highlight";
 
 export async function runSettingsPageTest(page: Page) {
   await page.goto("http://localhost:3000/einstellungen");
-  await expect(
+  await highlightAndExpectVisible(
+    page,
     page.getByRole("heading", { name: "Meldestation" })
-  ).toBeVisible();
-  await expect(page.getByRole("img", { name: "TALAS Logo" })).toBeVisible();
-  await expect(
+  );
+
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("img", { name: "TALAS Logo" })
+  );
+  await highlightAndExpectVisible(
+    page,
     page.getByRole("img", { name: "Logo", exact: true })
-  ).toBeVisible();
-  await expect(page.getByRole("link", { name: "Übersicht" })).toBeVisible();
-  await expect(
+  );
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("link", { name: "Übersicht" })
+  );
+  await highlightAndExpectVisible(
+    page,
     page.getByRole("link", { name: "Kabelüberwachung" })
-  ).toBeVisible();
-  await expect(
+  );
+  await highlightAndExpectVisible(
+    page,
     page.getByRole("link", { name: "Meldungseingänge" })
-  ).toBeVisible();
-  await expect(
+  );
+  await highlightAndExpectVisible(
+    page,
     page.getByRole("link", { name: "Schaltausgänge" })
-  ).toBeVisible();
-  await expect(
+  );
+  await highlightAndExpectVisible(
+    page,
     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(
+  );
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("link", { name: "Berichte" })
+  );
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("link", { name: "System" })
+  );
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("link", { name: "Einstellungen" })
+  );
+  await highlightAndExpectVisible(
+    page,
     page
       .locator("div")
       .filter({ hasText: /^Littwin Systemtechnik GmbH & Co\. KG$/ })
       .locator("svg")
-  ).toBeVisible();
-  await expect(page.getByText("Littwin Systemtechnik GmbH &")).toBeVisible();
-  await expect(
+  );
+  await highlightAndExpectVisible(
+    page,
+    page.getByText("Littwin Systemtechnik GmbH &")
+  );
+  await highlightAndExpectVisible(
+    page,
     page
       .locator("div")
       .filter({ hasText: /^Telefon: 04402 972577-0$/ })
       .locator("svg")
-  ).toBeVisible();
-  await expect(page.getByText("Telefon: 04402 972577-")).toBeVisible();
-  await expect(
+  );
+  await highlightAndExpectVisible(
+    page,
+    page.getByText("Telefon: 04402 972577-")
+  );
+  await highlightAndExpectVisible(
+    page,
     page
       .locator("div")
       .filter({ hasText: /^kontakt@littwin-systemtechnik\.de$/ })
       .locator("svg")
-  ).toBeVisible();
-  await expect(page.getByText("kontakt@littwin-systemtechnik")).toBeVisible();
-  await expect(
+  );
+  await highlightAndExpectVisible(
+    page,
+    page.getByText("kontakt@littwin-systemtechnik")
+  );
+  await highlightAndExpectVisible(
+    page,
     page
       .locator("div")
       .filter({ hasText: /^Handbücher$/ })
       .locator("svg")
-  ).toBeVisible();
-  await expect(page.getByText("Handbücher", { exact: true })).toBeVisible();
+  );
+  await highlightAndExpectVisible(
+    page,
+    page.getByText("Handbücher", { exact: true })
+  );
   await page.getByText("Handbücher", { exact: true }).click();
-  await expect(
+  await highlightAndExpectVisible(
+    page,
     page.getByRole("heading", { name: "PDF Handbücher" })
-  ).toBeVisible();
-  await expect(page.getByText("KUE705FO.PDF")).toBeVisible();
+  );
+  await highlightAndExpectVisible(page, page.getByText("KUE705FO.PDF"));
   //await page.getByRole("button").filter({ hasText: /^$/ }).click();
   await page.getByRole("button", { name: "Allgemeine Einstellungen" }).click();
-  await expect(
+  await highlightAndExpectVisible(
+    page,
     page.getByRole("button", { name: "Allgemeine Einstellungen" })
-  ).toBeVisible();
-  await expect(
+  );
+  await highlightAndExpectVisible(
+    page,
     page.getByRole("heading", { name: "Allgemeine Einstellungen" })
-  ).toBeVisible();
-  await expect(page.getByText("Name:")).toBeVisible();
-  await expect(
+  );
+  await highlightAndExpectVisible(page, page.getByText("Name:"));
+  await highlightAndExpectVisible(
+    page,
     page
       .locator("div")
       .filter({ hasText: /^Name:$/ })
       .getByRole("textbox")
-  ).toBeVisible();
-  await expect(page.getByText("MAC Adresse 1:")).toBeVisible();
-  await expect(
+  );
+  await highlightAndExpectVisible(page, page.getByText("MAC Adresse 1:"));
+  await highlightAndExpectVisible(
+    page,
     page.getByRole("button", { name: "Systemzeit übernehmen" })
-  ).toBeVisible();
-  await expect(page.getByText("IP:")).toBeVisible();
-  await expect(
+  );
+  await highlightAndExpectVisible(page, page.getByText("IP:"));
+  await highlightAndExpectVisible(
+    page,
     page.locator("div").filter({ hasText: /^IP:$/ }).getByRole("textbox")
-  ).toBeVisible();
-  await expect(page.getByText("Subnet:")).toBeVisible();
-  await expect(
+  );
+  await highlightAndExpectVisible(page, page.getByText("Subnet:"));
+  await highlightAndExpectVisible(
+    page,
     page
       .locator("div")
       .filter({ hasText: /^Subnet:$/ })
       .getByRole("textbox")
-  ).toBeVisible();
-  await expect(page.getByText("Gateway:")).toBeVisible();
-  await expect(
+  );
+  await highlightAndExpectVisible(page, page.getByText("Gateway:"));
+  await highlightAndExpectVisible(
+    page,
     page
       .locator("div")
       .filter({ hasText: /^Gateway:$/ })
       .getByRole("textbox")
-  ).toBeVisible();
-  await expect(
+  );
+  await highlightAndExpectVisible(
+    page,
     page.getByRole("button", { name: "Neustart CPL" })
-  ).toBeVisible();
-  await expect(page.getByRole("button", { name: "Speichern" })).toBeVisible();
+  );
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("button", { name: "Speichern" })
+  );
   await page.getByRole("button", { name: "OPCUA" }).click();
-  await expect(
+  await highlightAndExpectVisible(
+    page,
     page.getByRole("img", { name: "OPCUA Logo" }).first()
-  ).toBeVisible();
-  await expect(
+  );
+  await highlightAndExpectVisible(
+    page,
     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("OPCUA Zustand")).toBeVisible();
-  await expect(page.getByText("1")).toBeVisible();
-  await expect(page.getByText("Nodeset Name")).toBeVisible();
-  await expect(page.getByText("Aktuelle OPC-Clients")).toBeVisible();
-  await expect(page.getByText("0", { exact: true })).toBeVisible();
+  );
+  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 expect(
+  await highlightAndExpectVisible(
+    page,
     page.getByRole("heading", { name: "Datenbank Einstellungen" })
-  ).toBeVisible();
-  await expect(
+  );
+  await highlightAndExpectVisible(
+    page,
     page.getByRole("button", { name: "Meldungen löschen" })
-  ).toBeVisible();
-  await expect(
+  );
+  await highlightAndExpectVisible(
+    page,
     page.getByRole("button", { name: "Messwerte Logger löschen" })
-  ).toBeVisible();
+  );
   await page.getByRole("button", { name: "NTP" }).click();
-  await expect(
+  await highlightAndExpectVisible(
+    page,
     page.getByRole("heading", { name: "NTP Einstellungen" })
-  ).toBeVisible();
-  await expect(page.getByText("NTP Server 1")).toBeVisible();
-  await expect(
+  );
+  await highlightAndExpectVisible(page, page.getByText("NTP Server 1"));
+  await highlightAndExpectVisible(
+    page,
     page
       .locator("div")
       .filter({ hasText: /^NTP Server 1$/ })
       .getByRole("textbox")
-  ).toBeVisible();
-  await expect(page.getByText("NTP Server 3")).toBeVisible();
-  await expect(
+  );
+  await highlightAndExpectVisible(page, page.getByText("NTP Server 3"));
+  await highlightAndExpectVisible(
+    page,
     page
       .locator("div")
       .filter({ hasText: /^NTP Server 3$/ })
       .getByRole("textbox")
-  ).toBeVisible();
-  await expect(page.getByText("NTP Server 2")).toBeVisible();
-  await expect(
+  );
+  await highlightAndExpectVisible(page, page.getByText("NTP Server 2"));
+  await highlightAndExpectVisible(
+    page,
     page
       .locator("div")
       .filter({ hasText: /^NTP Server 2$/ })
       .getByRole("textbox")
-  ).toBeVisible();
-  await expect(page.getByText("Zeitzone")).toBeVisible();
-  await expect(
+  );
+  await highlightAndExpectVisible(page, page.getByText("Zeitzone"));
+  await highlightAndExpectVisible(
+    page,
     page
       .locator("div")
       .filter({ hasText: /^Zeitzone$/ })
       .getByRole("textbox")
-  ).toBeVisible();
-  await expect(page.getByText("NTP aktiv:")).toBeVisible();
-  await expect(page.getByRole("checkbox")).toBeVisible();
-  await expect(page.getByRole("button", { name: "Speichern" })).toBeVisible();
+  );
+  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 expect(
+  await highlightAndExpectVisible(
+    page,
     page.getByRole("heading", { name: "Login Admin-Bereich" })
-  ).toBeVisible();
-  await expect(
+  );
+  await highlightAndExpectVisible(
+    page,
     page.getByRole("textbox", { name: "Benutzername" })
-  ).toBeVisible();
-  await expect(page.getByRole("textbox", { name: "Passwort" })).toBeVisible();
-  await expect(
+  );
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("textbox", { name: "Passwort" })
+  );
+  await highlightAndExpectVisible(
+    page,
     page.getByRole("button", { name: "Admin anmelden" })
-  ).toBeVisible();
+  );
   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 expect(page.getByText("Login erfolgreich!")).toBeVisible();
-  await expect(page.getByRole("button", { name: "Abmelden" })).toBeVisible();
-  await expect(
+  await highlightAndExpectVisible(page, page.getByText("Login erfolgreich!"));
+  await highlightAndExpectVisible(
+    page,
+    page.getByRole("button", { name: "Abmelden" })
+  );
+  await highlightAndExpectVisible(
+    page,
     page.getByRole("button", { name: "Admin anmelden" })
-  ).toBeVisible();
+  );
 }