320 lines
10 KiB
TypeScript
320 lines
10 KiB
TypeScript
import { test, expect } from "../fixtures";
|
|
import type { Locator, Page } from "@playwright/test";
|
|
|
|
// Force-highlighting helpers (explicit red outline via class)
|
|
async function ensureForceCss(page: Page) {
|
|
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; }
|
|
`,
|
|
});
|
|
}
|
|
|
|
async function forceHighlight(page: Page, locator: Locator, durationMs = 800) {
|
|
await ensureForceCss(page);
|
|
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);
|
|
}
|
|
}
|
|
|
|
async function forceHighlightRow(
|
|
page: Page,
|
|
rowLocator: Locator,
|
|
durationMs = 800
|
|
) {
|
|
await ensureForceCss(page);
|
|
const rows = await rowLocator.elementHandles();
|
|
for (const row of rows) {
|
|
await row.evaluate((r: unknown, ms: number) => {
|
|
const root = r as HTMLElement;
|
|
const all = [
|
|
root,
|
|
...Array.from(root.querySelectorAll<HTMLElement>("*")),
|
|
];
|
|
all.forEach((el) => el.classList.add("pw-force-outline"));
|
|
window.setTimeout(
|
|
() => all.forEach((el) => el.classList.remove("pw-force-outline")),
|
|
ms
|
|
);
|
|
}, durationMs);
|
|
}
|
|
}
|
|
|
|
async function installLocalHighlighter(page: import("@playwright/test").Page) {
|
|
await page.addInitScript(() => {
|
|
type PWWindow = Window & { __pw_local_highlighter__?: boolean };
|
|
const w = window as unknown as PWWindow;
|
|
if (w.__pw_local_highlighter__) return;
|
|
w.__pw_local_highlighter__ = true;
|
|
|
|
const style = document.createElement("style");
|
|
style.innerHTML = `
|
|
.__pw-highlight__ { outline: 3px solid #ff1744 !important; outline-offset: 2px !important; box-shadow: 0 0 0 2px rgba(255,23,68,.25) !important; }
|
|
.__pw-highlight-click__ { outline: 4px solid #e0002b !important; outline-offset: 2px !important; box-shadow: 0 0 0 3px rgba(224,0,43,.35) !important; }
|
|
.__pw-highlight-row__ * { outline: 2px dashed rgba(255,23,68,.8) !important; outline-offset: 1px !important; }
|
|
`;
|
|
document.head.appendChild(style);
|
|
|
|
let lastEl: Element | null = null;
|
|
let lastRow: Element | null = null;
|
|
let clickTimeout: number | undefined;
|
|
|
|
function mark(el: EventTarget | null) {
|
|
if (!(el instanceof Element)) return;
|
|
if (lastEl && lastEl !== el) lastEl.classList.remove("__pw-highlight__");
|
|
lastEl = el;
|
|
lastEl.classList.add("__pw-highlight__");
|
|
const row = (el.closest &&
|
|
(el.closest("tr") || el.closest('[role="row"]'))) as Element | null;
|
|
if (lastRow && lastRow !== row)
|
|
lastRow.classList.remove("__pw-highlight-row__");
|
|
if (row) {
|
|
row.classList.add("__pw-highlight-row__");
|
|
lastRow = row;
|
|
}
|
|
}
|
|
|
|
window.addEventListener("mouseover", (e) => mark(e.target), true);
|
|
window.addEventListener("focus", (e) => mark(e.target), true);
|
|
window.addEventListener(
|
|
"click",
|
|
(e) => {
|
|
mark(e.target);
|
|
if (lastEl instanceof Element) {
|
|
lastEl.classList.add("__pw-highlight-click__");
|
|
if (clickTimeout) window.clearTimeout(clickTimeout);
|
|
const el = lastEl;
|
|
clickTimeout = window.setTimeout(
|
|
() => el.classList.remove("__pw-highlight-click__"),
|
|
600
|
|
);
|
|
}
|
|
},
|
|
true
|
|
);
|
|
});
|
|
}
|
|
/*
|
|
import { test, expect } from "../fixtures";
|
|
npx playwright codegen http://localhost:3000/analogInputs --target=ts -o tests/e2e/analog-inputs.spec.ts
|
|
ob ein Element sichtbar ist dann Auge Icon klicken
|
|
ansonsten nimmt automatich die klicks auf
|
|
//----------------------------------------------
|
|
Zum ausführen
|
|
|
|
alle Test datei , je nach dem wie in package.json definiert ist
|
|
npm run test:e2e:ui
|
|
|
|
bestimmte datei
|
|
npm run test:e2e:ui -- tests/analogInputs.spec.ts
|
|
npm run test:e2e:ui -- tests/e2e/analog-inputs.spec.ts
|
|
*/
|
|
|
|
test.slow();
|
|
test("test", async ({ page }) => {
|
|
await installLocalHighlighter(page);
|
|
await page.goto("/analogInputs");
|
|
|
|
await expect(
|
|
page.getByRole("heading", { name: "Messwerteingänge" }).nth(1)
|
|
).toBeVisible();
|
|
await forceHighlight(
|
|
page,
|
|
page.getByRole("heading", { name: "Messwerteingänge" }).nth(1)
|
|
);
|
|
|
|
await expect(page.getByRole("cell", { name: "Eingang" })).toBeVisible();
|
|
await forceHighlight(page, page.getByRole("cell", { name: "Eingang" }));
|
|
|
|
await expect(page.getByRole("cell", { name: "Messwert" })).toBeVisible();
|
|
await forceHighlight(page, page.getByRole("cell", { name: "Messwert" }));
|
|
|
|
await expect(page.getByRole("cell", { name: "Einheit" })).toBeVisible();
|
|
await forceHighlight(page, page.getByRole("cell", { name: "Einheit" }));
|
|
|
|
await expect(page.getByRole("cell", { name: "Bezeichnung" })).toBeVisible();
|
|
await forceHighlight(page, page.getByRole("cell", { name: "Bezeichnung" }));
|
|
|
|
await expect(page.getByRole("cell", { name: "Einstellungen" })).toBeVisible();
|
|
await forceHighlight(page, page.getByRole("cell", { name: "Einstellungen" }));
|
|
|
|
await expect(
|
|
page.getByRole("cell", { name: "Messkurve", exact: true })
|
|
).toBeVisible();
|
|
await forceHighlight(
|
|
page,
|
|
page.getByRole("cell", { name: "Messkurve", exact: true })
|
|
);
|
|
|
|
await expect(page.getByText("1", { exact: true })).toBeVisible();
|
|
|
|
await expect(page.getByText("2", { exact: true })).toBeVisible();
|
|
|
|
await expect(page.getByText("3", { exact: true })).toBeVisible();
|
|
|
|
await expect(
|
|
page.getByRole("cell", { name: "4", exact: true }).locator("path")
|
|
).toBeVisible();
|
|
|
|
await expect(
|
|
page.getByRole("cell", { name: "5", exact: true })
|
|
).toBeVisible();
|
|
|
|
await expect(page.getByText("6", { exact: true })).toBeVisible();
|
|
|
|
await expect(
|
|
page.getByRole("cell", { name: "7", exact: true })
|
|
).toBeVisible();
|
|
await page.waitForTimeout(3000);
|
|
|
|
await expect(
|
|
page.getByRole("cell", { name: "8", exact: true })
|
|
).toBeVisible();
|
|
await page.waitForTimeout(3000);
|
|
|
|
await expect(page.locator(".border.p-2.text-center").first()).toBeVisible();
|
|
// Markiere die gesamte erste Datenzeile (Row mit "AE 1" falls vorhanden)
|
|
const rowAE1 = page.getByRole("row", { name: /\bAE\s*1\b/ });
|
|
await forceHighlightRow(page, rowAE1);
|
|
await page.waitForTimeout(3000);
|
|
|
|
await expect(
|
|
page
|
|
.getByRole("row", { name: "2 5.67 °C Temperatur" })
|
|
.getByRole("button")
|
|
.first()
|
|
).toBeVisible();
|
|
await page.waitForTimeout(3000);
|
|
|
|
await expect(page.locator("tr:nth-child(3) > td:nth-child(5)")).toBeVisible();
|
|
await page.waitForTimeout(3000);
|
|
|
|
await expect(
|
|
page
|
|
.getByRole("row", { name: "0.01 V AE 4 Messkurve anzeigen" })
|
|
.getByRole("button")
|
|
.first()
|
|
).toBeVisible();
|
|
await page.waitForTimeout(3000);
|
|
|
|
await expect(
|
|
page
|
|
.getByRole("row", { name: "8 -0.00 mA AE 8 Messkurve" })
|
|
.getByLabel("Messkurve anzeigen")
|
|
).toBeVisible();
|
|
await page.waitForTimeout(3000);
|
|
|
|
await page.getByRole("cell", { name: "1", exact: true }).click();
|
|
|
|
await page.locator(".border.p-2.text-center").first().click();
|
|
|
|
await expect(
|
|
page.getByRole("heading", { name: "Einstellungen Messwerteingang" })
|
|
).toBeVisible();
|
|
await forceHighlight(page, page.getByRole("dialog"));
|
|
|
|
await expect(page.getByText("Bezeichnung:")).toBeVisible();
|
|
|
|
await expect(page.getByText("Offset:")).toBeVisible();
|
|
|
|
await expect(page.getByText("Faktor:")).toBeVisible();
|
|
|
|
await expect(page.getByText("Einheit:")).toBeVisible();
|
|
|
|
await expect(page.getByText("Speicherintervall:")).toBeVisible();
|
|
|
|
await expect(page.getByRole("button", { name: "Speichern" })).toBeVisible();
|
|
await page.waitForTimeout(3000);
|
|
|
|
await expect(
|
|
page.getByRole("button", { name: "Modal schließen" })
|
|
).toBeVisible();
|
|
await page.waitForTimeout(3000);
|
|
|
|
await expect(
|
|
page.getByText(
|
|
"Einstellungen Messwerteingang 1Bezeichnung:Offset:Faktor:Einheit:"
|
|
)
|
|
).toBeVisible();
|
|
await page.waitForTimeout(3000);
|
|
|
|
await page.getByRole("button", { name: "Modal schließen" }).click();
|
|
|
|
await page
|
|
.getByRole("row", { name: "1 126.63 V AE 1 Messkurve" })
|
|
.getByLabel("Messkurve anzeigen")
|
|
.click();
|
|
|
|
await expect(
|
|
page.getByText(
|
|
"Messkurve Messwerteingang 1Eingang 1VonBisAlle MesswerteDaten laden"
|
|
)
|
|
).toBeVisible();
|
|
|
|
await expect(
|
|
page.getByRole("heading", { name: "Messkurve Messwerteingang" })
|
|
).toBeVisible();
|
|
await forceHighlight(page, page.getByRole("dialog"));
|
|
await forceHighlight(page, page.locator("canvas"));
|
|
|
|
await expect(page.getByText("Eingang 1VonBisAlle")).toBeVisible();
|
|
|
|
await expect(page.getByRole("button", { name: "Daten laden" })).toBeVisible();
|
|
|
|
await expect(
|
|
page.getByRole("button", { name: "Alle Messwerte " })
|
|
).toBeVisible();
|
|
|
|
await expect(page.getByText("Von")).toBeVisible();
|
|
|
|
await expect(page.getByText("Bis")).toBeVisible();
|
|
|
|
await expect(page.locator("div").filter({ hasText: /^Von$/ })).toBeVisible();
|
|
|
|
await expect(
|
|
page.locator("div").filter({ hasText: /^Von$/ }).getByRole("textbox")
|
|
).toBeVisible();
|
|
await page.waitForTimeout(3000);
|
|
|
|
await expect(page.locator("div").filter({ hasText: /^Bis$/ })).toBeVisible();
|
|
await page.waitForTimeout(3000);
|
|
|
|
await expect(
|
|
page.locator("div").filter({ hasText: /^Bis$/ }).getByRole("textbox")
|
|
).toBeVisible();
|
|
await page.waitForTimeout(3000);
|
|
|
|
await expect(page.getByRole("img")).toBeVisible();
|
|
await page.waitForTimeout(3000);
|
|
|
|
await page.getByRole("button", { name: "Alle Messwerte " }).click();
|
|
await page.waitForTimeout(3000);
|
|
|
|
await page.getByRole("option", { name: "Stündlich" }).click();
|
|
await page.waitForTimeout(3000);
|
|
|
|
await page.getByRole("button", { name: "Stündlich " }).click();
|
|
await page.waitForTimeout(3000);
|
|
|
|
await page.getByRole("option", { name: "Täglich" }).click();
|
|
await page.waitForTimeout(3000);
|
|
|
|
await page.getByRole("button", { name: "Fullscreen" }).click();
|
|
|
|
await page.getByRole("button", { name: "Exit fullscreen" }).click();
|
|
|
|
await expect(page.getByRole("button", { name: "Fullscreen" })).toBeVisible();
|
|
|
|
await expect(
|
|
page.getByRole("button", { name: "Modal schließen" })
|
|
).toBeVisible();
|
|
await page.waitForTimeout(3000);
|
|
|
|
await page.getByRole("button", { name: "Modal schließen" }).click();
|
|
});
|