25 lines
1.1 KiB
TypeScript
25 lines
1.1 KiB
TypeScript
// 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"));
|
|
});
|
|
}
|