CPLv4.0/playwright/tests/pages/dashboard/dashboardTest.ts

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

export async function runDashboardTest(page: 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" })
  );
  // ...existing code...
  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();
}

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

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