test: digitalInputsTest.ts

This commit is contained in:
ISA
2025-08-28 11:49:34 +02:00
parent 93809a85a4
commit 9e84386a5d
15 changed files with 153 additions and 562 deletions

View File

@@ -0,0 +1,12 @@
import { test } from "../fixtures";
import { runDashboardTest } from "./pages/dashboardTest";
import { runAnalogInputsTest } from "./pages/analogInputsTest";
import { runSettingsPageTest } from "./pages/settingsPageTest";
import { runDigitalInputsTest } from "./pages/digitalInputsTest";
test("Dashboard, AnalogInputs und SettingsPage", async ({ page }) => {
await runDashboardTest(page);
await runAnalogInputsTest(page);
await runSettingsPageTest(page);
await runDigitalInputsTest(page);
});

View File

@@ -1,287 +0,0 @@
import { test, expect } from "../fixtures";
import type { Locator, Page } from "@playwright/test";
// Kombinierte Helper-Funktion: injiziert CSS (nur einmal), hebt hervor und prüft Sichtbarkeit
async function highlightAndExpectVisible(
page: Page,
locator: Locator,
durationMs = 800
) {
// CSS nur einmal pro Page injizieren
if (!(await page.evaluate(() => (window as any).__pwForceCssInjected))) {
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();
}
/*
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 page.goto("/analogInputs");
await highlightAndExpectVisible(
page,
page.getByRole("heading", { name: "Messwerteingänge" }).nth(1)
);
await highlightAndExpectVisible(
page,
page.getByRole("cell", { name: "Eingang" })
);
await highlightAndExpectVisible(
page,
page.getByRole("cell", { name: "Messwert" })
);
await highlightAndExpectVisible(
page,
page.getByRole("cell", { name: "Einheit" })
);
await highlightAndExpectVisible(
page,
page.getByRole("cell", { name: "Bezeichnung" })
);
await highlightAndExpectVisible(
page,
page.getByRole("cell", { name: "Einstellungen" })
);
await highlightAndExpectVisible(
page,
page.getByRole("cell", { name: "Messkurve", exact: true })
);
await highlightAndExpectVisible(page, page.getByText("1", { exact: true }));
await highlightAndExpectVisible(page, page.getByText("2", { exact: true }));
await highlightAndExpectVisible(page, page.getByText("3", { exact: true }));
await highlightAndExpectVisible(
page,
page.getByRole("cell", { name: "4", exact: true }).locator("path")
);
await highlightAndExpectVisible(
page,
page.getByRole("cell", { name: "5", exact: true })
);
await highlightAndExpectVisible(page, page.getByText("6", { exact: true }));
await highlightAndExpectVisible(
page,
page.getByRole("cell", { name: "7", exact: true })
);
await page.waitForTimeout(3000);
await highlightAndExpectVisible(
page,
page.getByRole("cell", { name: "8", exact: true })
);
await page.waitForTimeout(3000);
await highlightAndExpectVisible(
page,
page.locator(".border.p-2.text-center").first()
);
// Markiere die gesamte erste Datenzeile (Row mit "AE 1" falls vorhanden)
await page.waitForTimeout(3000);
await highlightAndExpectVisible(
page,
page
.getByRole("row", { name: "2 5.67 °C Temperatur" })
.getByRole("button")
.first()
);
await page.waitForTimeout(3000);
await highlightAndExpectVisible(
page,
page.locator("tr:nth-child(3) > td:nth-child(5)")
);
await page.waitForTimeout(3000);
await highlightAndExpectVisible(
page,
page
.getByRole("row", { name: "0.01 V AE 4 Messkurve anzeigen" })
.getByRole("button")
.first()
);
await page.waitForTimeout(3000);
await highlightAndExpectVisible(
page,
page
.getByRole("row", { name: "8 -0.00 mA AE 8 Messkurve" })
.getByLabel("Messkurve anzeigen")
);
await page.waitForTimeout(3000);
await page.getByRole("cell", { name: "1", exact: true }).click();
await page.locator(".border.p-2.text-center").first().click();
await highlightAndExpectVisible(
page,
page.getByRole("heading", { name: "Einstellungen Messwerteingang" })
);
await highlightAndExpectVisible(page, page.getByText("Bezeichnung:"));
await highlightAndExpectVisible(page, page.getByText("Offset:"));
await highlightAndExpectVisible(page, page.getByText("Faktor:"));
await highlightAndExpectVisible(page, page.getByText("Einheit:"));
await highlightAndExpectVisible(page, page.getByText("Speicherintervall:"));
await highlightAndExpectVisible(
page,
page.getByRole("button", { name: "Speichern" })
);
await page.waitForTimeout(3000);
await highlightAndExpectVisible(
page,
page.getByRole("button", { name: "Modal schließen" })
);
await page.waitForTimeout(3000);
await highlightAndExpectVisible(
page,
page.getByText(
"Einstellungen Messwerteingang 1Bezeichnung:Offset:Faktor:Einheit:"
)
);
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 highlightAndExpectVisible(
page,
page.getByText(
"Messkurve Messwerteingang 1Eingang 1VonBisAlle MesswerteDaten laden"
)
);
await highlightAndExpectVisible(
page,
page.getByRole("heading", { name: "Messkurve Messwerteingang" })
);
await highlightAndExpectVisible(page, page.locator("canvas"));
await highlightAndExpectVisible(page, page.getByText("Eingang 1VonBisAlle"));
await highlightAndExpectVisible(
page,
page.getByRole("button", { name: "Daten laden" })
);
await highlightAndExpectVisible(
page,
page.getByRole("button", { name: "Alle Messwerte " })
);
await highlightAndExpectVisible(page, page.getByText("Von"));
await highlightAndExpectVisible(page, page.getByText("Bis"));
await highlightAndExpectVisible(
page,
page.locator("div").filter({ hasText: /^Von$/ })
);
await highlightAndExpectVisible(
page,
page.locator("div").filter({ hasText: /^Von$/ }).getByRole("textbox")
);
await page.waitForTimeout(3000);
await highlightAndExpectVisible(
page,
page.locator("div").filter({ hasText: /^Bis$/ })
);
await page.waitForTimeout(3000);
await highlightAndExpectVisible(
page,
page.locator("div").filter({ hasText: /^Bis$/ }).getByRole("textbox")
);
await page.waitForTimeout(3000);
await highlightAndExpectVisible(page, page.getByRole("img"));
await page.waitForTimeout(3000);
await highlightAndExpectVisible(
page,
page.getByRole("button", { name: "Alle Messwerte " })
);
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 highlightAndExpectVisible(
page,
page.getByRole("button", { name: "Fullscreen" })
);
await highlightAndExpectVisible(
page,
page.getByRole("button", { name: "Modal schließen" })
);
await page.waitForTimeout(3000);
await page.getByRole("button", { name: "Modal schließen" }).click();
});

View File

@@ -1,12 +0,0 @@
import { test } from "../fixtures";
import { runDashboardTest } from "./dashboardTest";
import { runAnalogInputsTest } from "./analogInputsTest";
import { runSettingsPageTest } from "./settingsPageTest";
import { runDigitalInputsTest } from "./digitalInputsTest";
test("Dashboard, AnalogInputs und SettingsPage", async ({ page }) => {
//await runDashboardTest(page);
//await runAnalogInputsTest(page);
//await runSettingsPageTest(page);
await runDigitalInputsTest(page);
});

View File

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

View File

@@ -1,5 +1,5 @@
import type { Page } from "@playwright/test";
import { highlightAndExpectVisible } from "./highlight";
import { highlightAndExpectVisible } from "../utils/highlight";
// Kombinierte Helper-Funktion: injiziert CSS (nur einmal), hebt hervor und prüft Sichtbarkeit
export async function runAnalogInputsTest(page: Page) {

View File

@@ -1,5 +1,5 @@
import type { Page } from "@playwright/test";
import { highlightAndExpectVisible } from "./highlight";
import { highlightAndExpectVisible } from "../utils/highlight";
export async function runDashboardTest(page: Page) {
await page.goto("http://localhost:3000/dashboard");

View File

@@ -1,179 +1,65 @@
import { test, expect } from "../fixtures";
import type { Locator, Page } from "@playwright/test";
import type { Page } from "@playwright/test";
import { highlightAndExpectVisible } from "../utils/highlight";
// Kombinierte Helper-Funktion: injiziert CSS (nur einmal), hebt hervor und prüft Sichtbarkeit
async function highlightAndExpectVisible(
page: Page,
locator: Locator,
durationMs = 800
) {
// CSS nur einmal pro Page injizieren
if (!(await page.evaluate(() => (window as any).__pwForceCssInjected))) {
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();
}
test("Daschboard-Test", async ({ page }) => {
await page.goto("http://localhost:3000/dashboard");
await highlightAndExpectVisible(
page,
page.getByRole("heading", { name: "Meldestation" })
);
await highlightAndExpectVisible(page, page.getByRole("banner"));
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("main").locator("svg").first()
page.getByRole("img", { name: "TALAS Logo" })
);
await page.waitForTimeout(400);
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" })
);
await highlightAndExpectVisible(
page,
page.getByRole("cell", { name: "Quelle" })
);
await highlightAndExpectVisible(
page,
page.getByRole("cell", { name: "Meldung" })
);
await highlightAndExpectVisible(
page,
page.getByRole("cell", { name: "Status" })
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 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 page.waitForTimeout(400);
await highlightAndExpectVisible(
page,
page
@@ -181,10 +67,12 @@ test("Daschboard-Test", async ({ page }) => {
.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
@@ -192,10 +80,12 @@ test("Daschboard-Test", async ({ page }) => {
.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
@@ -203,27 +93,122 @@ test("Daschboard-Test", async ({ page }) => {
.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("svg")
.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 highlightAndExpectVisible(page, page.getByRole("button"));
await page.getByRole("button").click();
});
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);
}

View File

@@ -1,6 +1,6 @@
// Kombinierte Helper-Funktion: injiziert CSS (nur einmal), hebt hervor und prüft Sichtbarkeit
import type { Locator, Page } from "@playwright/test";
import { expect } from "../fixtures";
import { expect } from "@playwright/test";
export async function highlightAndExpectVisible(
page: Page,
locator: Locator,