Test: playwright done

.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.806
+NEXT_PUBLIC_APP_VERSION=1.6.807
 NEXT_PUBLIC_CPL_MODE=json   # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)
 

.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.806
+NEXT_PUBLIC_APP_VERSION=1.6.807
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,8 @@
+## [1.6.807] – 2025-09-02
+
+- test: refactoring playwright test structure
+
+---
 ## [1.6.806] – 2025-09-02
 
 - fix: Detailansicht Modal sichtbar beim klicken

jsconfig.json

@@ -5,7 +5,8 @@
       "@/*": ["*"],
       "@/redux/*": ["redux/*"],
       "@/utils/*": ["utils/*"],
-      "@/components/*": ["components/*"]
+      "@/components/*": ["components/*"],
+      "@playwright/*": ["playwright/*"]
     }
   },
   "include": [

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.806",
+  "version": "1.6.807",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cpl-v4",
-      "version": "1.6.806",
+      "version": "1.6.807",
       "dependencies": {
         "@fontsource/roboto": "^5.1.0",
         "@headlessui/react": "^2.2.4",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.806",
+  "version": "1.6.807",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3000",

playwright.config.ts

@@ -21,7 +21,7 @@ export default defineConfig({
 
   use: {
     baseURL: "http://localhost:3000",
-    headless: true,
+    headless: false,
     launchOptions: { args: ["--no-sandbox", "--disable-dev-shm-usage"] },
     viewport: { width: 1920, height: 1080 },
     video: "on",

playwright/tests/pages/meldungen/meldungenTest.ts

@@ -1,5 +1,6 @@
 import type { Locator, Page } from "@playwright/test";
 import { expect } from "@playwright/test";
+import { highlightAndExpectVisible } from "@playwright/utils/highlight";
 
 export async function runMeldungenTest(page: Page) {
   await page.goto("/meldungen");
@@ -178,42 +179,3 @@ export async function runMeldungenTest(page: Page) {
 }
 
 //---------------------------------------------------------------------
-
-export async function highlightAndExpectVisible(
-  page: Page,
-  locator: Locator,
-  durationMs = 800
-) {
-  // CSS nur einmal pro Page injizieren
-  const alreadyInjected = await page.evaluate(
-    () => (window as any).__pwForceCssInjected === true
-  );
-
-  if (!alreadyInjected) {
-    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;
-    });
-  }
-
-  // Erst prüfen, ob das Element sichtbar ist, sonst bricht der Test sauber ab
-  await expect(locator).toBeVisible({ timeout: 10000 });
-  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();
-}

playwright/utils/highlight.ts

@@ -7,16 +7,27 @@ export async function highlightAndExpectVisible(
   durationMs = 800
 ) {
   // CSS nur einmal pro Page injizieren
-  if (!(await page.evaluate(() => (window as any).__pwForceCssInjected))) {
+  const alreadyInjected = await page.evaluate(
+    () => (window as any).__pwForceCssInjected === true
+  );
+
+  if (!alreadyInjected) {
     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; }
+        .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;
     });
   }
+
+  // Erst prüfen, ob das Element sichtbar ist, sonst bricht der Test sauber ab
+  await expect(locator).toBeVisible({ timeout: 10000 });
   const els = await locator.elementHandles();
   for (const el of els) {
     await el.evaluate((node: unknown, ms: number) => {
@@ -25,5 +36,6 @@ export async function highlightAndExpectVisible(
       window.setTimeout(() => n.classList.remove("pw-force-outline"), ms);
     }, durationMs);
   }
+
   await expect(locator).toBeVisible();
 }

tsconfig.json

@@ -43,7 +43,8 @@
       "@/utils/*": ["./utils/*"],
       "@/components/*": ["./components/*"],
       "@/services/*": ["./services/*"],
-      "@/types/*": ["./types/*"]
+      "@/types/*": ["./types/*"],
+      "@playwright/*": ["playwright/*"]
     }
   },