CPLv4.0/playwright/tests/pages/settingsPage/settingsPageTest.ts

import type { Locator, Page } from "@playwright/test";
import { expect } from "@playwright/test";

export async function runSettingsPageTest(page: Page) {
  await page.goto("http://localhost:3000/einstellungen");
  await highlightAndExpectVisible(
    page,
    page.getByRole("heading", { name: "Meldestation" })
  );

  await highlightAndExpectVisible(
    page,
    page.getByRole("img", { name: "TALAS Logo" })
  );
  await highlightAndExpectVisible(
    page,
    page.getByRole("img", { name: "Logo", exact: true })
  );
  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
      .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("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" })
  );
}

//---------------------------------------------------------------------

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;
    });
  }

  // Erst prüfen, ob das Element sichtbar ist, sonst bricht der Test sauber ab
  await expect(locator).toBeVisible({ timeout: 10000 });
  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();
}