test: systemTest.ts

playwright/tests/all.test.ts

@@ -5,6 +5,7 @@ import { runDigitalInputsTest } from "./pages/digitalInputsTest";
 import { runDigitalOutputsTest } from "./pages/digitalOutputsTest";
 import { runAnalogInputsTest } from "./pages/analogInputsTest";
 import { runMeldungenTest } from "./pages/meldungenTest";
+
 import { runSettingsPageTest } from "./pages/settingsPageTest";
 
 test("Dashboard, AnalogInputs und SettingsPage", async ({ page }) => {

playwright/tests/pages/systemTest.ts

@@ -0,0 +1,100 @@
+// gigityOutputsTest.ts
+import type { Locator, Page } from "@playwright/test";
+import { expect } from "@playwright/test";
+
+export async function runSystemTest(page: Page) {
+  await page.goto("/system");
+
+  // Logo
+  const logo = page.getByRole("img", { name: "Logo", exact: true });
+  await highlightAndExpectVisible(page, logo);
+  await logo.click();
+  await page.waitForTimeout(100);
+
+  // TALAS Logo
+  const talasLogo = page.getByRole("img", { name: "TALAS Logo" });
+  await highlightAndExpectVisible(page, talasLogo);
+  await talasLogo.click();
+  await page.waitForTimeout(100);
+
+  // Meldestation Heading
+  const meldestation = page.getByRole("heading", { name: "Meldestation" });
+  await highlightAndExpectVisible(page, meldestation);
+  await meldestation.click();
+  await page.waitForTimeout(100);
+
+  // CPLV4 Ismail Rastede
+  const cplv4Text = page.getByText("CPLV4 Ismail Rastede");
+  await highlightAndExpectVisible(page, cplv4Text);
+  await cplv4Text.click();
+  await page.waitForTimeout(100);
+
+  // Dark Mode Button sichtbar
+  const darkModeBtn = page.getByRole("button", { name: "Dark Mode" });
+  await highlightAndExpectVisible(page, darkModeBtn);
+  await expect(darkModeBtn).toBeVisible();
+  await page.waitForTimeout(100);
+
+  // Sidebar Links sichtbar
+  const sidebarLinks = [
+    { role: "link", name: "Übersicht" },
+    { role: "link", name: "Kabelüberwachung" },
+    { role: "link", name: "Meldungseingänge" },
+    { role: "link", name: "Schaltausgänge" },
+    { role: "link", name: "Messwerteingänge" },
+    { role: "link", name: "Berichte" },
+    { role: "link", name: "System" },
+    { role: "link", name: "Einstellungen" },
+  ];
+  for (const link of sidebarLinks) {
+    const locator = page.getByRole(link.role as any, { name: link.name });
+    await highlightAndExpectVisible(page, locator);
+    await expect(locator).toBeVisible();
+    await page.waitForTimeout(50);
+  }
+
+  // Berichte Heading
+  const berichteHeading = page.getByRole("heading", { name: "Berichte" });
+  await highlightAndExpectVisible(page, berichteHeading);
+  await berichteHeading.click();
+  await page.waitForTimeout(100);
+}
+
+//---------------------------------------------------------------------
+
+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();
+}