Playwright : ausgewählte Element rot färben

playwright/utils/mouse-overlay.ts

@@ -0,0 +1,24 @@
+// Adds a visual mouse cursor overlay so movements are visible in videos/traces
+// Source idea: Playwright docs / community gist
+export async function installMouseOverlay(
+  page: import("@playwright/test").Page
+) {
+  await page.addInitScript(() => {
+    const style = document.createElement("style");
+    style.innerHTML = `
+      .__pw-mouse__ { pointer-events: none; position: fixed; left: 0; top: 0; z-index: 2147483647; width: 20px; height: 20px; background: rgba(0,0,0,0.7); border-radius: 50%; transform: translate(-50%, -50%); transition: transform 0.02s linear; }
+      .__pw-mouse__.down { background: rgba(0,0,0,0.95); }
+    `;
+    document.head.appendChild(style);
+
+    const dot = document.createElement("div");
+    dot.className = "__pw-mouse__";
+    document.body.appendChild(dot);
+
+    window.addEventListener("mousemove", (e) => {
+      dot.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;
+    });
+    window.addEventListener("mousedown", () => dot.classList.add("down"));
+    window.addEventListener("mouseup", () => dot.classList.remove("down"));
+  });
+}