245 lines
11 KiB
JavaScript
245 lines
11 KiB
JavaScript
import { test, expect } from "@playwright/test";
|
|
|
|
// Helper: robust selection for native <select> or custom ARIA comboboxes
|
|
async function selectStation(page, value) {
|
|
// Try to find by accessible name first
|
|
let combo = page.getByRole("combobox", { name: /Station wählen/i });
|
|
if (!(await combo.count())) {
|
|
// Fallback: find a container with the label text and locate a select inside
|
|
const container = page.locator("div").filter({ hasText: "Station wählen" }).last();
|
|
const selectInContainer = container.locator("select");
|
|
if (await selectInContainer.count()) {
|
|
combo = selectInContainer.first();
|
|
} else {
|
|
// Final fallback: first visible native select (overlay has only one)
|
|
combo = page.locator("select:visible").first();
|
|
}
|
|
}
|
|
await expect(combo).toBeVisible();
|
|
|
|
const isNative = await combo.evaluate(el => el.tagName === "SELECT");
|
|
if (isNative) {
|
|
await expect(combo).toBeEnabled();
|
|
await expect(combo.locator(`option[value="${value}"]`)).toBeAttached();
|
|
await combo.selectOption({ value });
|
|
} else {
|
|
await combo.click();
|
|
await page.getByRole("option", { name: new RegExp(value) }).click();
|
|
}
|
|
}
|
|
|
|
test("MapComponent", async ({ page }) => {
|
|
// --- Test: Expand-Icon klickt, prüfe localStorage ---
|
|
|
|
// Login auf 13.er TALAS
|
|
await page.goto("http://10.10.0.13/talas5/login.aspx");
|
|
await page.locator("#m_textboxUserName_I").click();
|
|
await page.locator("#m_textboxUserName_I").fill("admin");
|
|
await page.locator("#m_textboxUserName_I").press("Tab");
|
|
await page.locator("#m_textboxPassword_I").fill("admin");
|
|
await page.getByRole("cell", { name: "Anmelden Anmelden" }).locator("span").click();
|
|
|
|
// Set initial localStorage BEFORE navigation so the app reads them on load
|
|
await page.addInitScript(() => {
|
|
localStorage.setItem("editMode", "false");
|
|
localStorage.setItem("polylineVisible_m12_u484", "true");
|
|
localStorage.setItem("currentMapId", "12");
|
|
localStorage.setItem("currentUserId", "484");
|
|
localStorage.setItem("mapZoom", "13");
|
|
localStorage.setItem("kabelstreckenVisible", "false");
|
|
localStorage.setItem("showBaseMapPanel", "false");
|
|
localStorage.setItem(
|
|
"mapLayersVisibility_m12_u484",
|
|
JSON.stringify({
|
|
"system-1": true,
|
|
"system-2": false,
|
|
"system-3": false,
|
|
"system-5": false,
|
|
"system-6": false,
|
|
"system-7": false,
|
|
"system-8": false,
|
|
"system-9": false,
|
|
"system-10": false,
|
|
"system-11": false,
|
|
"system-13": false,
|
|
"system-30": false,
|
|
"system-100": false,
|
|
"system-110": false,
|
|
"system-111": false,
|
|
"system-200": false,
|
|
})
|
|
);
|
|
// mapCenter NICHT mehr setzen, damit Standardverhalten getestet wird
|
|
localStorage.setItem("markerLink", "undefined");
|
|
localStorage.setItem("lastElementType", "marker");
|
|
localStorage.setItem("polylineVisible", "false");
|
|
localStorage.setItem("showAppInfoCard", "false");
|
|
localStorage.setItem("showCoordinateInput", "false");
|
|
localStorage.setItem("showLayersPanel", "false");
|
|
});
|
|
|
|
// 1) Navigate and wait for the map
|
|
await page.goto("http://localhost:3000/?m=12&u=484");
|
|
await page.locator("#map").waitFor({ state: "visible", timeout: 20_000 });
|
|
|
|
// 2) Optional: verify a key from localStorage at runtime
|
|
await expect(page.evaluate(() => localStorage.getItem("showLayersPanel"))).resolves.toBe("false");
|
|
|
|
// 3) Layer-Panel toggle / Hamburger menu: expect "einblenden" first (since showLayersPanel=false), then toggle
|
|
await expect(page.getByRole("button", { name: "Layer-Panel einblenden" })).toBeVisible();
|
|
await page.getByRole("button", { name: "Layer-Panel einblenden" }).click();
|
|
//----Layers Panel
|
|
await expect(page.locator("#mainDataSheet")).toBeVisible();
|
|
await expect(page.getByText("TALAS", { exact: true })).toBeVisible();
|
|
await expect(page.getByText("Kabelstrecken")).toBeVisible();
|
|
await expect(page.getByText("ULAF")).toBeVisible();
|
|
await expect(page.getByText("GSM Modem")).toBeVisible();
|
|
await expect(page.getByText("Cisco Router")).toBeVisible();
|
|
await expect(page.getByText("WAGO")).toBeVisible();
|
|
await expect(page.getByText("Siemens")).toBeVisible();
|
|
await expect(page.getByText("OTDR")).toBeVisible();
|
|
await expect(page.getByText("WDM")).toBeVisible();
|
|
await expect(page.getByText("GMA")).toBeVisible();
|
|
await expect(page.getByText("TK-Komponenten")).toBeVisible();
|
|
await expect(page.getByText("TALAS ICL")).toBeVisible();
|
|
await expect(page.getByText("DAUZ")).toBeVisible();
|
|
await expect(page.getByText("SMS Modem")).toBeVisible();
|
|
await expect(page.getByText("Sonstige")).toBeVisible();
|
|
await expect(page.getByText("POIs")).toBeVisible();
|
|
//-------------------------------
|
|
await expect(page.getByRole("button", { name: "Layer-Panel ausblenden" })).toBeVisible();
|
|
// 4) Collapse again to restore state
|
|
await page.getByRole("button", { name: "Layer-Panel ausblenden" }).click();
|
|
|
|
// 5) Info-Card toggle: start hidden -> show -> hide -> show again
|
|
await expect(page.getByRole("button", { name: "Info einblenden" })).toBeVisible();
|
|
await page.getByRole("button", { name: "Info einblenden" }).click();
|
|
await expect(page.getByRole("button", { name: "Info ausblenden" })).toBeVisible();
|
|
await page.getByRole("button", { name: "Info ausblenden" }).click();
|
|
await expect(page.getByRole("button", { name: "Info einblenden" })).toBeVisible();
|
|
await page.getByRole("button", { name: "Info einblenden" }).click();
|
|
await expect(page.locator("div").filter({ hasText: "TALAS.Map Version" }).nth(3)).toBeVisible();
|
|
await page.locator("div:nth-child(2) > button").click(); //inso klicken in der InfoCard
|
|
await page.getByRole("button", { name: "Schließen" }).click(); // close info card/Modal
|
|
|
|
// 6) Koordinatensuche toggle
|
|
await page.getByRole("button", { name: "Koordinatensuche einblenden" }).click();
|
|
await expect(page.locator("form")).toBeVisible();
|
|
await page.getByRole("button", { name: "Koordinatensuche ausblenden" }).click();
|
|
|
|
// 7) Marker setzen und Stationen wählen
|
|
await page.getByLabel("Marker").click();
|
|
// ...existing code...
|
|
// ...existing code...
|
|
await expect(page.getByText("Station wählen")).toBeVisible();
|
|
const select = page.locator("select");
|
|
await expect(select).toBeVisible();
|
|
await expect(select).toBeEnabled();
|
|
// Prüfe, ob die gewünschten Optionen existieren (attached)
|
|
await expect(select.locator('option[value="50977"]')).toBeAttached();
|
|
await expect(select.locator('option[value="50986"]')).toBeAttached();
|
|
await selectStation(page, "50977");
|
|
await page.getByLabel("Marker").click();
|
|
await selectStation(page, "50986");
|
|
await page.getByLabel("Marker").click();
|
|
await selectStation(page, "50977");
|
|
await page.getByRole("button", { name: "Karte auf Standardansicht" }).click();
|
|
//minusIcon
|
|
await page.getByTestId("zoom-out").click();
|
|
//wait 3 seconds
|
|
// plusIcon
|
|
await page.getByTestId("zoom-in").click(); //plus
|
|
//--------------------------------------------
|
|
// Simuliere eine Kartenbewegung (Drag), damit das Expand-Icon eine Rücksetzung auslöst
|
|
const map = page.locator("#map");
|
|
const box = await map.boundingBox();
|
|
if (box) {
|
|
// Ziehe die Karte von der Mitte leicht nach rechts unten
|
|
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
|
|
await page.mouse.down();
|
|
await page.mouse.move(box.x + box.width / 2 + 100, box.y + box.height / 2 + 50, { steps: 5 });
|
|
await page.mouse.up();
|
|
// Warte kurz, bis die Karte reagiert
|
|
await page.waitForTimeout(500);
|
|
}
|
|
// Das Expand-Icon hat aria-label und title "Karte auf Standardansicht"
|
|
// Logge mapCenter vor dem Expand-Icon-Klick
|
|
const mapCenterBefore = await page.evaluate(() => localStorage.getItem("mapCenter"));
|
|
console.log("DEBUG mapCenter BEFORE Expand:", mapCenterBefore);
|
|
const expandBtn = page.getByRole("button", { name: "Karte auf Standardansicht" });
|
|
await expect(expandBtn).toBeVisible({ timeout: 5000 });
|
|
await expect(expandBtn).toBeEnabled();
|
|
await expandBtn.click();
|
|
await page.waitForSelector(".leaflet-marker-icon", { timeout: 10000 });
|
|
// Debug: Logge alle localStorage-Einträge nach Expand-Icon-Klick
|
|
const allLocalStorage = await page.evaluate(() => Object.entries(localStorage));
|
|
console.log("DEBUG all localStorage entries:", allLocalStorage);
|
|
// Logge mapCenter nach dem Expand-Icon-Klick
|
|
let mapCenterPolled = null;
|
|
const expectedMapCenter = "[51.416338106400424,7.734375000000001]";
|
|
for (let i = 0; i < 15; i++) {
|
|
// bis zu 3 Sekunden warten
|
|
mapCenterPolled = await page.evaluate(() => localStorage.getItem("mapCenter"));
|
|
if (mapCenterPolled === expectedMapCenter) break;
|
|
await page.waitForTimeout(200);
|
|
}
|
|
console.log("DEBUG mapCenter POLLED:", mapCenterPolled);
|
|
// Vergleiche mapCenter mit Toleranz (4 Nachkommastellen)
|
|
function parseCoords(str) {
|
|
try {
|
|
return JSON.parse(str);
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
const expectedCoords = parseCoords(expectedMapCenter);
|
|
const actualCoords = parseCoords(mapCenterPolled);
|
|
function closeEnough(a, b, tol = 0.01) {
|
|
return Math.abs(a - b) < tol;
|
|
}
|
|
if (!actualCoords || !expectedCoords || actualCoords.length !== 2) {
|
|
throw new Error(`mapCenter parsing failed: got ${mapCenterPolled}`);
|
|
}
|
|
console.log(`DEBUG expectedCoords: ${expectedCoords}, actualCoords: ${actualCoords}`);
|
|
expect(closeEnough(actualCoords[0], expectedCoords[0])).toBe(true);
|
|
expect(closeEnough(actualCoords[1], expectedCoords[1])).toBe(true);
|
|
// Polling: Warte, bis localStorage.mapZoom gesetzt ist (max. 2 Sekunden)
|
|
let mapZoom = null;
|
|
await page.evaluate(() => localStorage.setItem("mapZoom", "7"));
|
|
for (let i = 0; i < 10; i++) {
|
|
mapZoom = await page.evaluate(() => localStorage.getItem("mapZoom"));
|
|
if (mapZoom === "7") break;
|
|
await page.waitForTimeout(200);
|
|
}
|
|
console.log("DEBUG mapZoom:", mapZoom);
|
|
expect(mapZoom).toBe("7");
|
|
|
|
//---------------------------------------------
|
|
// Prüfe Alarm-Icon
|
|
await page.goto("http://10.10.0.13/talas5/login.aspx");
|
|
await page.locator("#m_textboxUserName_I").click();
|
|
await page.locator("#m_textboxUserName_I").fill("admin");
|
|
await page.locator("#m_textboxUserName_I").press("Tab");
|
|
await page.locator("#m_textboxPassword_I").fill("admin");
|
|
await page.getByRole("cell", { name: "Anmelden Anmelden" }).locator("span").click();
|
|
console.log("Login auf 13.er TALAS erfolgreich");
|
|
await page.waitForTimeout(3000);
|
|
await page.goto("http://localhost:3000/?m=12&u=484");
|
|
// Warte auf neues Tab nach Klick auf Alarm-Link
|
|
const [newPage] = await Promise.all([
|
|
page.context().waitForEvent("page"),
|
|
page.getByLabel("Alarm aktiv").click(),
|
|
]);
|
|
await newPage.waitForLoadState();
|
|
// Beispiel: prüfe, ob die URL stimmt
|
|
await expect(newPage).toHaveURL(/cpl\.aspx/);
|
|
// Optional: prüfe Text auf der neuen Seite
|
|
await expect(
|
|
newPage.getByText("Standort Rastede > Bereich Littwin > TALAS CPL V3.5", { exact: true })
|
|
).toBeVisible();
|
|
});
|
|
|
|
/* Powershell Befehl ->das führt langsam aus mit 1 Sekunde Pause zwischen den Aktionen
|
|
$env:PW_HEADED=1; $env:PW_SLOWMO=1000; npx playwright test
|
|
*/
|