diff --git a/.env.development b/.env.development index bbad5b3..febaac8 100644 --- a/.env.development +++ b/.env.development @@ -6,6 +6,6 @@ NEXT_PUBLIC_USE_MOCK_BACKEND_LOOP_START=false NEXT_PUBLIC_EXPORT_STATIC=false NEXT_PUBLIC_USE_CGI=false # App-Versionsnummer -NEXT_PUBLIC_APP_VERSION=1.6.720 +NEXT_PUBLIC_APP_VERSION=1.6.721 NEXT_PUBLIC_CPL_MODE=json # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter) diff --git a/.env.production b/.env.production index 8665b16..0be5d59 100644 --- a/.env.production +++ b/.env.production @@ -5,5 +5,5 @@ NEXT_PUBLIC_CPL_API_PATH=/CPL NEXT_PUBLIC_EXPORT_STATIC=true NEXT_PUBLIC_USE_CGI=true # App-Versionsnummer -NEXT_PUBLIC_APP_VERSION=1.6.720 +NEXT_PUBLIC_APP_VERSION=1.6.721 NEXT_PUBLIC_CPL_MODE=production \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index 43d1e14..0b5f7b4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,8 @@ +## [1.6.721] – 2025-08-14 + +- Playwright : ausgewählte Element rot färben + +--- ## [1.6.720] – 2025-08-14 - doc: comment in test for analog inputs diff --git a/package-lock.json b/package-lock.json index be52224..941e312 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "cpl-v4", - "version": "1.6.720", + "version": "1.6.721", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "cpl-v4", - "version": "1.6.720", + "version": "1.6.721", "dependencies": { "@fontsource/roboto": "^5.1.0", "@headlessui/react": "^2.2.4", diff --git a/package.json b/package.json index 7b92d86..4968526 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "cpl-v4", - "version": "1.6.720", + "version": "1.6.721", "private": true, "scripts": { "dev": "next dev", diff --git a/playwright/tests/analogInputs.spec.ts b/playwright/tests/analogInputs.spec.ts index fbadf43..c0d69bf 100644 --- a/playwright/tests/analogInputs.spec.ts +++ b/playwright/tests/analogInputs.spec.ts @@ -22,83 +22,16 @@ async function forceHighlight(page: Page, locator: Locator, durationMs = 800) { } } -async function forceHighlightRow( +// Expect helper: highlight element while asserting it's visible +async function expectVisibleWithHighlight( page: Page, - rowLocator: Locator, + locator: 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("*")), - ]; - all.forEach((el) => el.classList.add("pw-force-outline")); - window.setTimeout( - () => all.forEach((el) => el.classList.remove("pw-force-outline")), - ms - ); - }, durationMs); - } + await forceHighlight(page, locator, durationMs); + await expect(locator).toBeVisible(); } -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 @@ -117,130 +50,147 @@ 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( + await expectVisibleWithHighlight( 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 expectVisibleWithHighlight( + page, + page.getByRole("cell", { name: "Eingang" }) + ); - await expect(page.getByRole("cell", { name: "Messwert" })).toBeVisible(); - await forceHighlight(page, page.getByRole("cell", { name: "Messwert" })); + await expectVisibleWithHighlight( + page, + page.getByRole("cell", { name: "Messwert" }) + ); - await expect(page.getByRole("cell", { name: "Einheit" })).toBeVisible(); - await forceHighlight(page, page.getByRole("cell", { name: "Einheit" })); + await expectVisibleWithHighlight( + page, + page.getByRole("cell", { name: "Einheit" }) + ); - await expect(page.getByRole("cell", { name: "Bezeichnung" })).toBeVisible(); - await forceHighlight(page, page.getByRole("cell", { name: "Bezeichnung" })); + await expectVisibleWithHighlight( + page, + page.getByRole("cell", { name: "Bezeichnung" }) + ); - await expect(page.getByRole("cell", { name: "Einstellungen" })).toBeVisible(); - await forceHighlight(page, page.getByRole("cell", { name: "Einstellungen" })); + await expectVisibleWithHighlight( + page, + page.getByRole("cell", { name: "Einstellungen" }) + ); - await expect( - page.getByRole("cell", { name: "Messkurve", exact: true }) - ).toBeVisible(); - await forceHighlight( + await expectVisibleWithHighlight( page, page.getByRole("cell", { name: "Messkurve", exact: true }) ); - await expect(page.getByText("1", { exact: true })).toBeVisible(); + await expectVisibleWithHighlight(page, page.getByText("1", { exact: true })); - await expect(page.getByText("2", { exact: true })).toBeVisible(); + await expectVisibleWithHighlight(page, page.getByText("2", { exact: true })); - await expect(page.getByText("3", { exact: true })).toBeVisible(); + await expectVisibleWithHighlight(page, page.getByText("3", { exact: true })); - await expect( + await expectVisibleWithHighlight( + page, page.getByRole("cell", { name: "4", exact: true }).locator("path") - ).toBeVisible(); + ); - await expect( + await expectVisibleWithHighlight( + page, page.getByRole("cell", { name: "5", exact: true }) - ).toBeVisible(); + ); - await expect(page.getByText("6", { exact: true })).toBeVisible(); + await expectVisibleWithHighlight(page, page.getByText("6", { exact: true })); - await expect( + await expectVisibleWithHighlight( + page, page.getByRole("cell", { name: "7", exact: true }) - ).toBeVisible(); + ); await page.waitForTimeout(3000); - await expect( + await expectVisibleWithHighlight( + page, page.getByRole("cell", { name: "8", exact: true }) - ).toBeVisible(); + ); await page.waitForTimeout(3000); - await expect(page.locator(".border.p-2.text-center").first()).toBeVisible(); + await expectVisibleWithHighlight( + page, + page.locator(".border.p-2.text-center").first() + ); // 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( + await expectVisibleWithHighlight( + page, 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 expectVisibleWithHighlight( + page, + page.locator("tr:nth-child(3) > td:nth-child(5)") + ); await page.waitForTimeout(3000); - await expect( + await expectVisibleWithHighlight( + page, page .getByRole("row", { name: "0.01 V AE 4 Messkurve anzeigen" }) .getByRole("button") .first() - ).toBeVisible(); + ); await page.waitForTimeout(3000); - await expect( + await expectVisibleWithHighlight( + page, 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( + await expectVisibleWithHighlight( + page, page.getByRole("heading", { name: "Einstellungen Messwerteingang" }) - ).toBeVisible(); + ); await forceHighlight(page, page.getByRole("dialog")); - await expect(page.getByText("Bezeichnung:")).toBeVisible(); + await expectVisibleWithHighlight(page, page.getByText("Bezeichnung:")); + await expectVisibleWithHighlight(page, page.getByText("Offset:")); + await expectVisibleWithHighlight(page, page.getByText("Faktor:")); + await expectVisibleWithHighlight(page, page.getByText("Einheit:")); + await expectVisibleWithHighlight(page, page.getByText("Speicherintervall:")); - 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 expectVisibleWithHighlight( + page, + page.getByRole("button", { name: "Speichern" }) + ); await page.waitForTimeout(3000); - await expect( + await expectVisibleWithHighlight( + page, page.getByRole("button", { name: "Modal schließen" }) - ).toBeVisible(); + ); await page.waitForTimeout(3000); - await expect( + await expectVisibleWithHighlight( + page, page.getByText( "Einstellungen Messwerteingang 1Bezeichnung:Offset:Faktor:Einheit:" ) - ).toBeVisible(); + ); await page.waitForTimeout(3000); await page.getByRole("button", { name: "Modal schließen" }).click(); @@ -250,46 +200,60 @@ test("test", async ({ page }) => { .getByLabel("Messkurve anzeigen") .click(); - await expect( + await expectVisibleWithHighlight( + page, page.getByText( "Messkurve Messwerteingang 1Eingang 1VonBisAlle MesswerteDaten laden" ) - ).toBeVisible(); + ); - await expect( + await expectVisibleWithHighlight( + page, 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 expectVisibleWithHighlight(page, page.getByText("Eingang 1VonBisAlle")); - await expect(page.getByRole("button", { name: "Daten laden" })).toBeVisible(); + await expectVisibleWithHighlight( + page, + page.getByRole("button", { name: "Daten laden" }) + ); - await expect( + await expectVisibleWithHighlight( + page, page.getByRole("button", { name: "Alle Messwerte " }) - ).toBeVisible(); + ); - await expect(page.getByText("Von")).toBeVisible(); + await expectVisibleWithHighlight(page, page.getByText("Von")); - await expect(page.getByText("Bis")).toBeVisible(); + await expectVisibleWithHighlight(page, page.getByText("Bis")); - await expect(page.locator("div").filter({ hasText: /^Von$/ })).toBeVisible(); + await expectVisibleWithHighlight( + page, + page.locator("div").filter({ hasText: /^Von$/ }) + ); - await expect( + await expectVisibleWithHighlight( + page, page.locator("div").filter({ hasText: /^Von$/ }).getByRole("textbox") - ).toBeVisible(); + ); await page.waitForTimeout(3000); - await expect(page.locator("div").filter({ hasText: /^Bis$/ })).toBeVisible(); + await expectVisibleWithHighlight( + page, + page.locator("div").filter({ hasText: /^Bis$/ }) + ); await page.waitForTimeout(3000); - await expect( + await expectVisibleWithHighlight( + page, page.locator("div").filter({ hasText: /^Bis$/ }).getByRole("textbox") - ).toBeVisible(); + ); await page.waitForTimeout(3000); - await expect(page.getByRole("img")).toBeVisible(); + await expectVisibleWithHighlight(page, page.getByRole("img")); await page.waitForTimeout(3000); await page.getByRole("button", { name: "Alle Messwerte " }).click(); @@ -308,11 +272,15 @@ test("test", async ({ page }) => { await page.getByRole("button", { name: "Exit fullscreen" }).click(); - await expect(page.getByRole("button", { name: "Fullscreen" })).toBeVisible(); + await expectVisibleWithHighlight( + page, + page.getByRole("button", { name: "Fullscreen" }) + ); - await expect( + await expectVisibleWithHighlight( + page, page.getByRole("button", { name: "Modal schließen" }) - ).toBeVisible(); + ); await page.waitForTimeout(3000); await page.getByRole("button", { name: "Modal schließen" }).click();