Add Playwright configuration and end-to-end tests; update dependencies and ignore files

sholtkamp · sholtkamp · commit 3f2ac93aecf3 · 2025-07-21T10:14:23.000+02:00
diff --git a/.gitignore b/.gitignore
@@ -15,3 +15,4 @@
 /.externalToolBuilders/
 /package-lock.json
 /gulpfile.overrides.js
+src/test/end-to-end/test/snapshots/local
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
         "@conterra/ct-mapapps-typings": "~4.18.3",
         "@conterra/mapapps-mocha-runner": "1.1.1",
         "@conterra/reactivity-core": "^0.4.0",
+        "@playwright/test": "^1.52.0",
         "@types/chai": "4.3.10",
         "@types/license-checker": "^25.0.6",
         "@types/mocha": "10.0.4",
diff --git a/playwright.config.ts b/playwright.config.ts
@@ -0,0 +1,88 @@
+/*
+ * Copyright (C) con terra GmbH
+ */
+import {
+    defineConfig,
+    devices,
+    PlaywrightTestConfig
+} from "@playwright/test";
+import { env } from "process";
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const baseURL = env.BASE_URL || "http://localhost:9090";
+const testDir = env.TESTS_DIR || "./src/test/end-to-end/test";
+const outputDir = env.TARGET_DIR || "./target/playwright/output";
+
+const isCI = !!env.CI;
+
+const snapshotsFolder = env.SNAPSHOTS_DIR || "./src/test/end-to-end/test/snapshots/local";
+
+const config: PlaywrightTestConfig = {
+    testDir,
+    outputDir: `${outputDir}/results`,
+
+    snapshotPathTemplate: `${snapshotsFolder}/{testFileName}-snapshots/{arg}-{projectName}{ext}`,
+
+    /* Run tests in files in parallel */
+    fullyParallel: true,
+    /* Retry on CI only */
+    retries: isCI ? 1 : 0,
+    /* Fail the build on CI if you accidentally left test.only in the source code. */
+    forbidOnly: isCI,
+    /* Opt out of parallel tests on CI. */
+    workers: isCI ? 1 : 2,
+
+    /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+    use: {
+        /* Base URL to use in actions like `await page.goto('/')`. */
+        baseURL,
+
+        /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+        trace: "on-first-retry"
+    },
+
+    /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+    reporter: [
+        [
+            "html",
+            {
+                outputFolder: `${outputDir}/reports/html`,
+                open: isCI ? "never" : "always"
+            }
+        ],
+        ["junit", { outputFile: `${outputDir}/reports/junit/results.xml` }]
+    ],
+
+    expect: {
+        toHaveScreenshot: {
+            maxDiffPixelRatio: 0.1,
+            threshold: 0.05
+        },
+        // increased timeout (default is 5000)
+        // pro: less flaky tests, no need to wait for network state
+        // con: longer test duration where assertions are failing
+        timeout: 30000
+    },
+
+    /* Configure projects for major browsers */
+    projects: [
+        {
+            name: "Desktop Chrome",
+            use: {
+                ...devices["Desktop Chrome"],
+                launchOptions: {
+                    // enable WEBGL for headless tests
+                    args: isCI
+                        ? ["--disable-gpu"]
+                        : []
+                },
+                viewport: { width: 1920, height: 1080 }
+            }
+        }
+    ],
+
+    timeout: isCI ? 120000 : 30000
+};
+export default defineConfig(config);
diff --git a/pom.xml b/pom.xml
@@ -544,6 +544,7 @@
         <skip.apps.upload>true</skip.apps.upload>
         <!-- enable this if "upload" profile should pre-optimize apps -->
         <triggerPreOptimization>false</triggerPreOptimization>
+        <client.config.warnOnSlowGraphicsPerformance>false</client.config.warnOnSlowGraphicsPerformance>
     </properties>
     <profiles>
         <profile>
diff --git a/screenshot.JPG b/screenshot.JPG
diff --git a/screenshot.png b/screenshot.png
diff --git a/src/main/js/apps/sample/app.json b/src/main/js/apps/sample/app.json
diff --git a/src/main/js/apps/sample/nls/bundle.js b/src/main/js/apps/sample/nls/bundle.js
@@ -17,58 +17,6 @@ module.exports = {
     root: {
         apptitle: "Charting Sample",
         map: {
-            koeln1: {
-                title: "Basic Data",
-                districts: {
-                    title: "City Districts",
-                    text: "Cologne's city district <b>{STV_NAME}</b>."
-                },
-                boroughs: {
-                    title: "Boroughs",
-                    text: "Boroughs <b>{NAME}</b> is located in Cologne's precints {STADTBEZIR}."
-                },
-                precints: {
-                    title: "Precints",
-                    text: "Cologne's precint {NAME}."
-                }
-            },
-            koeln2: {
-                title: "Education and Culture",
-                description: "List of all libraries, museums and schools in Cologne.",
-                libraries: {
-                    title: "Libraries"
-                },
-                museums: {
-                    title: "Museums",
-                    text: "Museum <b>{NAME}</b> is located in Cologne's boroughs {STADTTEIL}."
-                },
-                schools: {
-                    title: "Schools"
-                }
-            },
-            koeln3: {
-                title: "Recreation",
-                sights: {
-                    title: "Tourist Attractions",
-                    titleSingle: "Tourist Attraction",
-                    text: "Tourist attraction <b>{NAME}</b> is located in Cologne's borough {STADTTEIL}."
-                },
-                playgrounds: {
-                    title: "Playgrounds- and Sports Areas",
-                    text: "<b>{Spielplatzname}</b> is located in Cologne's borough {Stadtteil}.",
-                    baskets: "Basketball Baskets",
-                    goals: "Soccer Goals",
-                    tables: "Ping-Pong Tables",
-                    walls: "Goal Wall",
-                    skate: "Skating",
-                    misc: "Miscellaneous"
-                },
-                places: {
-                    title: "Places of Event",
-                    titleSingle: "Place of Event",
-                    text: "<b>{NAME}</b> is a {expression/carrier} place of event."
-                }
-            },
             basemaps: {
                 gray: "Street Map (gray)",
                 streets: "Street Map",
diff --git a/src/main/js/apps/sample/nls/de/bundle.js b/src/main/js/apps/sample/nls/de/bundle.js
@@ -16,59 +16,6 @@
 module.exports = {
     apptitle: "Charting Sample",
     map: {
-        koeln1: {
-            title: "Basisdaten",
-            districts: {
-                title: "Stadtviertel",
-                text: "Das K\xF6lner Stadtviertel <b>{STV_NAME}</b>."
-            },
-            boroughs: {
-                title: "Stadtteile",
-                text: "Der Stadtteil <b>{NAME}</b> liegt im K\xF6lner Stadtbezirk {STADTBEZIR}."
-            },
-            precints: {
-                title: "Stadtbezirke",
-                text: "Der K\xF6lner Stadtbezirk <b>{NAME}</b>."
-            }
-        },
-        koeln2: {
-            title: "Bildung und Kultur",
-            description: "Liste aller Bibliotheken, Museen und Schulen in Köln.",
-            libraries: {
-                title: "Bibliotheken"
-            },
-            museums: {
-                title: "Museen",
-                text: "Das Museum <b>{NAME}</b> liegt im K\xF6lner Stadtteil {STADTTEIL}."
-            },
-            schools: {
-                title: "Schulen",
-                text: ""
-            }
-        },
-        koeln3: {
-            title: "Freizeit",
-            sights: {
-                title: "Sehensw\xFCrdigkeiten",
-                titleSingle: "Sehensw\xFCrdigkeit",
-                text: "Die Sehensw\xFCrdigkeit <b>{NAME}</b> liegt im K\xF6lner Stadtteil {STADTTEIL}."
-            },
-            playgrounds: {
-                title: "Spiel- und Sportpl\xE4tze",
-                text: "<b>{Spielplatzname}</b> liegt im K\xF6lner Stadtteil {Stadtteil}.",
-                baskets: "Basketballk\xF6rbe",
-                goals: "Fussballtore",
-                tables: "Tischtennis Tische",
-                walls: "Torwand",
-                skate: "Skaten",
-                misc: "Sonstiges"
-            },
-            places: {
-                title: "Veranstaltungsorte",
-                titleSingle: "Veranstaltungsort",
-                text: "<b>{NAME}</b> ist ein {expression/carrier} Veranstaltungsort."
-            }
-        },
         basemaps: {
             gray: "Stra\xDFenkarte (grau)",
             streets: "Stra\xDFenkarte",
diff --git a/src/test/end-to-end/test/api.ts b/src/test/end-to-end/test/api.ts
@@ -0,0 +1,15 @@
+/*
+ * Copyright (C) con terra GmbH
+ */
+
+export interface Rectangle {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+
+export interface Point {
+    x: number;
+    y: number;
+}
diff --git a/src/test/end-to-end/test/common/testUtils.ts b/src/test/end-to-end/test/common/testUtils.ts
@@ -0,0 +1,33 @@
+/*
+ * Copyright (C) con terra GmbH
+ */
+import { expect, Locator, Page } from "@playwright/test";
+
+/**
+ * Allows to test if a screenshot matches an expected screenshot using custom timeouts and intervals.
+ */
+export async function expectToMatchScreenshot(
+    element: Page | Locator,
+    screenshotName: string,
+    options?: { timeout?: number, intervals?: number[] }
+): Promise<void> {
+    await expect(async () => {
+        await expect(element).toHaveScreenshot(screenshotName);
+    }).toPass({
+        ... options
+    });
+}
+
+/**
+ * Waits until the div with the class "map__loading-info" is not loading anymore.
+ */
+export async function waitForMap(page: Page): Promise<void> {
+    await page.waitForLoadState('networkidle');
+    await page.waitForFunction(() => {
+        const loadingInfo = document.querySelector(".map__loading-info");
+        if (!loadingInfo) {
+            return false;
+        }
+        return !loadingInfo.classList.contains("map__loading-info--is-loading");
+    });
+}
diff --git a/src/test/end-to-end/test/components/map-canvas.ts b/src/test/end-to-end/test/components/map-canvas.ts
@@ -0,0 +1,40 @@
+/*
+ * Copyright (C) con terra GmbH
+ */
+import { Locator, Page } from "@playwright/test";
+import { waitForMap } from "../common/testUtils";
+import { Point, Rectangle } from "../api";
+
+export class MapCanvas {
+    readonly canvas: Locator;
+    readonly page: Page;
+    constructor(page: Page) {
+        this.page = page;
+        this.canvas = page.locator("canvas");
+    }
+
+    async clickOnMap(location: Point): Promise<void> {
+        await this.canvas.click({ position: location });
+    }
+
+    async drawLine(from: Point, to: Point): Promise<void> {
+        await this.canvas.click({ position: from });
+        await this.canvas.dblclick({ position: to });
+    }
+
+    async drawRectangle(rectangle: Rectangle): Promise<void> {
+        await this.page.mouse.move(rectangle.left, rectangle.top);
+        await this.page.mouse.down();
+        await this.page.waitForTimeout(100);
+        await this.page.mouse.move(
+            rectangle.left + rectangle.width,
+            rectangle.top + rectangle.height
+        );
+        await this.page.mouse.up();
+        await this.page.waitForTimeout(100);
+    }
+
+    async loaded(): Promise<void> {
+        await waitForMap(this.page);
+    }
+}
diff --git a/src/test/end-to-end/test/components/selection-ui.ts b/src/test/end-to-end/test/components/selection-ui.ts
@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) con terra GmbH
+ */
+
+import { Page } from "@playwright/test";
+
+
+export class SelectionUi {
+    readonly page: Page;
+    constructor(page: Page) {
+        this.page = page;
+    }
+    async selectType(type: "rectangle" | "mapExtent"): Promise<void> {
+        const selectionLabel =
+            type === "rectangle" ? "Rectangle" : "Kartenausschnitt";
+        const selectionButton = this.page.getByRole("button", {
+            name: selectionLabel,
+            exact: true
+        });
+        const isPressed =
+            (await selectionButton.getAttribute("aria-pressed")) === "true";
+
+        if (!isPressed) {
+            await selectionButton.click();
+            const isPressed =
+                (await selectionButton.getAttribute("aria-pressed")) === "true";
+            if (!isPressed) {
+                throw new Error("Failed to start spatial selection");
+            }
+        }
+    }
+
+    async executeSelection(): Promise<void> {
+        await this.page.getByLabel("Auswahl ausführen").click();
+    }
+}
diff --git a/src/test/end-to-end/test/screenshot.spec.ts b/src/test/end-to-end/test/screenshot.spec.ts
@@ -0,0 +1,38 @@
+///
+/// Copyright (C) 2023 con terra GmbH (info@conterra.de)
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///         http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { test } from '@playwright/test';
+
+import { expectToMatchScreenshot } from './common/testUtils';
+import { MapCanvas } from "./components/map-canvas";
+import { SelectionUi } from './components/selection-ui';
+
+// test used to generate a screenshot for the bundle documentation
+test('Create Screenshot for GitHub Page', async ({ page }) => {
+    await page.goto('http://localhost:9090/');
+    await page.getByRole("button", { name: "Spatial Selection" }).click();
+
+    const selectionUi = new SelectionUi(page);
+    await selectionUi.selectType("rectangle");
+
+    const canvas = new MapCanvas(page);
+    await canvas.loaded();
+    await canvas.drawRectangle({ top: 50, left: 50, width: 1050, height: 1050 });
+
+    await expectToMatchScreenshot(page, "screenshot.png", {
+        timeout: 10000
+    });
+});
diff --git a/src/test/resources/application.properties b/src/test/resources/application.properties
