如何在 Playwright 中为鼠标随机移动创建鼠标轨迹效果？

Question

我正在使用 Playwright 来自动化浏览器交互，并希望创建一种视觉效果，即鼠标在屏幕上随机移动时留下痕迹，模仿自然的光标移动。我想添加一个简单的光标轨迹效果，其中一个小点或圆圈跟随鼠标移动的位置。

我找到了一个参考，它不能解决我的问题。这是我的代码：

import asyncio
import random
from playwright.async_api import async_playwright, Page


async def move_cursor_randomly(page: Page, duration: int = 10):
    """
    Moves cursor randomly within the viewport for the specified duration.
    """
    viewport_size = page.viewport_size
    width = viewport_size["width"]
    height = viewport_size["height"]

    end_time = asyncio.get_event_loop().time() + duration
    while asyncio.get_event_loop().time() < end_time:
        x = random.randint(0, width)
        y = random.randint(0, height)

        await page.mouse.move(x, y, steps=random.randint(10, 30))

        await draw_cursor_trail(page, x, y)

        await asyncio.sleep(random.uniform(1, 3)) # to mimic randomness


async def draw_cursor_trail(page: Page, x, y):
    """
    supposed to draw a cursor trail at the specified coordinates.
    """
    await page.evaluate("""
        (x, y) => {
            const trail = document.createElement('div');
            trail.style.position = 'absolute';
            trail.style.left = `${x}px`;
            trail.style.top = `${y}px`;
            trail.style.width = '10px';
            trail.style.height = '10px';
            trail.style.borderRadius = '50%';
            trail.style.backgroundColor = 'blue';
            trail.style.zIndex = '9999';
            document.body.appendChild(trail);

            setTimeout(() => {
                trail.remove();
            }, 1000);
        }
    """, arg=(x, y))

但是，当我运行此程序时，轨迹并未按预期显示，并且鼠标移动似乎跳跃或不平滑。现在这并不重要，因为我们更专注于让痕迹出现。 P.S -> 屏幕顶部有一个蓝点在闪烁，我怀疑这就是踪迹。如果是这样那么为什么它不跟随光标。我太困惑了rn！！

Answer 1

根据@ggorlen的建议和一系列重试，我终于让它工作了。 这是在鼠标所在位置生成红点的基本代码。无论您走到哪里，它都会继续跟随您的鼠标，300 毫秒后红点就会消失，从而留下痕迹。

await page.evaluate(
        """
            // First we create the styles
            const style = document.createElement('style');
            style.innerHTML = `
                .cursor-trail {
                    position: fixed;
                    width: 10px;  /* Size */
                    height: 10px;
                    background-color: red;  /* Color */
                    border-radius: 50%;
                    pointer-events: none;
                    z-index: 10000;
                    opacity: 0.5;
                    transition: opacity 0.3s, transform 0.3s;
                }
            `;
            document.head.appendChild(style);

            // Then we append an event listener for the trail
            document.addEventListener('mousemove', (event) => {
                const trailDot = document.createElement('div');
                trailDot.classList.add('cursor-trail');
                document.body.appendChild(trailDot);

                trailDot.style.left = `${event.clientX}px`;
                trailDot.style.top = `${event.clientY}px`;

                // after 300ms we fade out and remove the trail dot
                setTimeout(() => {
                    trailDot.style.opacity = '0';
                    setTimeout(() => trailDot.remove(), 300);
                }, 50);
            });
        """
    )

然后，如果你将它与这样的函数混合，剧作家会随机移动你的光标，红点会跟随它 ->

async def move_cursor_randomly(page: Page, duration: int = 10):
    """
    Moves the cursor randomly within the viewport for the specified duration.
    A cursor trail is drawn at each new cursor position.
    """
    viewport_size = page.viewport_size
    width = viewport_size["width"]
    height = viewport_size["height"]

    await page.evaluate(
        """
            // First we create the styles
            const style = document.createElement('style');
            style.innerHTML = `
                .cursor-trail {
                    position: fixed;
                    width: 10px;  /* Size */
                    height: 10px;
                    background-color: red;  /* Color */
                    border-radius: 50%;
                    pointer-events: none;
                    z-index: 10000;
                    opacity: 0.5;
                    transition: opacity 0.3s, transform 0.3s;
                }
            `;
            document.head.appendChild(style);

            // Then we append an event listener for the trail
            document.addEventListener('mousemove', (event) => {
                const trailDot = document.createElement('div');
                trailDot.classList.add('cursor-trail');
                document.body.appendChild(trailDot);

                trailDot.style.left = `${event.clientX}px`;
                trailDot.style.top = `${event.clientY}px`;

                // after 300ms we fade out and remove the trail dot
                setTimeout(() => {
                    trailDot.style.opacity = '0';
                    setTimeout(() => trailDot.remove(), 300);
                }, 50);
            });
        """
    )

    end_time = asyncio.get_event_loop().time() + duration
    while asyncio.get_event_loop().time() < end_time:
        x = min(random.randint(0, width), width)
        y = min(random.randint(0, height), height)

        await page.mouse.move(x, y, steps=random.randint(10, 30))
        await asyncio.sleep(random.uniform(1, 3))