CPLv4.0/playwright/tests/pages/digitalInputs/digitalInputsTest.ts

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

export async function runDigitalInputsTest(page: Page) {
  await page.goto("/digitalInputs");
  await highlightAndExpectVisible(
    page,
    page.getByRole("img", { name: "Logo", exact: true })
  );
  await page.waitForTimeout(400);
  await highlightAndExpectVisible(
    page,
    page.getByRole("img", { name: "TALAS Logo" })
  );
  await page.waitForTimeout(400);
  await highlightAndExpectVisible(
    page,
    page.getByRole("heading", { name: "Meldestation" })
  );
  await page.waitForTimeout(400);
  await highlightAndExpectVisible(page, page.getByText("CPLV4 Ismail Rastede"));
  await page.waitForTimeout(400);
  await highlightAndExpectVisible(
    page,
    page.getByRole("link", { name: "Übersicht" })
  );
  await page.waitForTimeout(400);
  await highlightAndExpectVisible(
    page,
    page.getByRole("link", { name: "Kabelüberwachung" })
  );
  await page.waitForTimeout(400);
  await highlightAndExpectVisible(
    page,
    page.getByRole("link", { name: "Meldungseingänge" })
  );
  await page.waitForTimeout(400);
  await highlightAndExpectVisible(
    page,
    page.getByRole("link", { name: "Schaltausgänge" })
  );
  await page.waitForTimeout(400);
  await highlightAndExpectVisible(
    page,
    page.getByRole("link", { name: "Messwerteingänge" })
  );
  await page.waitForTimeout(400);
  await highlightAndExpectVisible(
    page,
    page.getByRole("link", { name: "Berichte" })
  );
  await page.waitForTimeout(400);
  await highlightAndExpectVisible(
    page,
    page.getByRole("link", { name: "System" })
  );
  await page.waitForTimeout(400);
  await highlightAndExpectVisible(
    page,
    page.getByRole("link", { name: "Einstellungen" })
  );
  await page.waitForTimeout(400);
  await highlightAndExpectVisible(
    page,
    page
      .locator("div")
      .filter({ hasText: /^Littwin Systemtechnik GmbH & Co\. KG$/ })
      .locator("svg")
  );
  await page.waitForTimeout(400);
  await highlightAndExpectVisible(
    page,
    page.getByText("Littwin Systemtechnik GmbH &")
  );
  await page.waitForTimeout(400);
  await highlightAndExpectVisible(
    page,
    page
      .locator("div")
      .filter({ hasText: /^Telefon: 04402 972577-0$/ })
      .locator("svg")
  );
  await page.waitForTimeout(400);
  await highlightAndExpectVisible(
    page,
    page.getByText("Telefon: 04402 972577-")
  );
  await page.waitForTimeout(400);
  await highlightAndExpectVisible(
    page,
    page
      .locator("div")
      .filter({ hasText: /^kontakt@littwin-systemtechnik\.de$/ })
      .locator("svg")
  );
  await page.waitForTimeout(400);
  await highlightAndExpectVisible(
    page,
    page.getByText("kontakt@littwin-systemtechnik")
  );
  await page.waitForTimeout(400);
  await highlightAndExpectVisible(
    page,
    page
      .locator("div")
      .filter({ hasText: /^Handbücher$/ })
      .locator("path")
  );
  await page.waitForTimeout(400);
  await highlightAndExpectVisible(
    page,
    page.getByText("Handbücher", { exact: true })
  );
  await page.waitForTimeout(400);
  await page.getByText("Handbücher", { exact: true }).click();
  await page.waitForTimeout(400);
  await highlightAndExpectVisible(
    page,
    page.getByRole("heading", { name: "PDF Handbücher" })
  );
  await page.waitForTimeout(400);
  await highlightAndExpectVisible(page, page.getByText("KUE705FO.PDF"));
  await page.waitForTimeout(400);
  await highlightAndExpectVisible(
    page,
    page.getByRole("heading", { name: "Meldungseingänge", exact: true })
  );
  await page.waitForTimeout(400);
  await highlightAndExpectVisible(
    page,
    page.getByRole("heading", { name: "Meldungseingänge 1 –" }).locator("svg")
  );
  await page.waitForTimeout(400);
  await highlightAndExpectVisible(
    page,
    page.getByRole("heading", { name: "Meldungseingänge 1 –" })
  );
  await page.waitForTimeout(400);
  await highlightAndExpectVisible(
    page,
    page.getByRole("cell", { name: "Eingang" }).first()
  );
  await page.waitForTimeout(400);
  await highlightAndExpectVisible(
    page,
    page.getByRole("cell", { name: "Zustand" }).first()
  );
  await page.waitForTimeout(400);
  await highlightAndExpectVisible(
    page,
    page.getByRole("cell", { name: "Bezeichnung" }).first()
  );
  await page.waitForTimeout(400);
  await highlightAndExpectVisible(
    page,
    page.getByRole("cell", { name: "Aktion" }).first()
  );
  await page.waitForTimeout(400);
  await highlightAndExpectVisible(
    page,
    page.getByRole("cell", { name: "1", exact: true }).locator("svg")
  );
  await page.waitForTimeout(400);
  await highlightAndExpectVisible(page, page.getByText("1", { exact: true }));
  await page.waitForTimeout(400);
  await highlightAndExpectVisible(
    page,
    page
      .getByRole("row", { name: "1 ● DE 1", exact: true })
      .getByRole("cell")
      .nth(1)
  );
  await page.waitForTimeout(400);
  await highlightAndExpectVisible(
    page,
    page.getByRole("row", { name: "1 ● DE 1", exact: true }).locator("span")
  );
  await page.waitForTimeout(400);
  await highlightAndExpectVisible(
    page,
    page.getByRole("cell", { name: "DE 1", exact: true })
  );
  await page.waitForTimeout(400);
  await highlightAndExpectVisible(
    page,
    page
      .getByRole("row", { name: "1 ● DE 1", exact: true })
      .locator("svg")
      .nth(1)
  );
  await page.waitForTimeout(400);
  await highlightAndExpectVisible(
    page,
    page.getByRole("cell", { name: "13", exact: true }).locator("svg")
  );
  await page.waitForTimeout(400);
  await highlightAndExpectVisible(page, page.getByText("13", { exact: true }));
  await page.waitForTimeout(400);
  await highlightAndExpectVisible(
    page,
    page.getByRole("row", { name: "● DE 13" }).getByRole("cell").nth(1)
  );
  await page.waitForTimeout(400);
  await highlightAndExpectVisible(
    page,
    page.getByRole("row", { name: "● DE 13" }).locator("span")
  );
  await page.waitForTimeout(400);
  await highlightAndExpectVisible(
    page,
    page.getByRole("cell", { name: "DE 13" })
  );
  await page.waitForTimeout(1000);
}
//---------------------------------------------------------------------

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