Playwright中mouse.up()在mouse.move()后失效问题排查与解决

我之前也遇到过类似的Canvas绘图测试坑，咱们一步步拆解问题、解决问题：

核心问题分析 #

你遇到的线条全部粘连的情况，大概率是两个原因叠加导致的：

1. 浏览器把长时间按住左键+连续快速移动的操作识别成了拖拽行为，而非绘图操作，导致mouse.up()事件没有被Canvas正确响应；
2. 全局page.mouse的事件可能因为鼠标位置偏移（比如不小心移出Canvas），导致up事件没有被目标元素捕获。

具体解决方案 #

1. 先给Canvas禁用拖拽行为

浏览器默认会对可交互元素（包括Canvas）的长按操作触发拖拽识别，我们可以通过注入JS直接禁用这个行为：

page.goto(file_path)
# 注入代码禁用Canvas拖拽和文本选择，避免干扰绘图
page.evaluate("""
  const canvas = document.querySelector('canvas');
  if (canvas) {
    canvas.draggable = false;
    canvas.addEventListener('dragstart', e => e.preventDefault());
    // 顺便禁用文本选择，防止操作时触发选中文本的行为
    canvas.addEventListener('selectstart', e => e.preventDefault());
  }
""")

2. 把鼠标操作绑定到Canvas元素上，而非全局

全局page.mouse的事件容易出现丢失，直接操作Canvas元素的鼠标对象，能确保down/move/up事件都精准发送到目标元素：

# 获取Canvas元素对象
canvas = page.query_selector('canvas')
# 后续用canvas.mouse替代page.mouse
canvas.mouse.down()
# ... 移动轨迹逻辑 ...
canvas.mouse.up()

3. 调整操作时序，贴近真实用户行为

快速无停顿的操作很容易被浏览器判定为机器人行为，我们可以做这些优化：

• 给slow_mo设置合理值（比如10ms），让所有鼠标操作有轻微延迟；
• 给mouse.move添加duration参数，模拟人类平滑移动鼠标的过程；
• 每条线绘制完成后加短暂停顿，模拟用户抬手后的间隔。

4. 优化WindMouse参数，让轨迹更自然

如果WindMouse生成的点太密集或移动步长过大，也可能触发浏览器的拖拽识别，适当调小M_0（最大步长）和D_0（目标距离阈值），让轨迹更平缓。

修改后的完整代码 #

def test_drawing_board():
    rel_path = r"/mats/drawing_board.html"
    file_path = "".join([r"file://", os.getcwd(), rel_path])
    with sync_playwright() as playwright:
        # 调整slow_mo到10ms，模拟真实操作的轻微延迟
        browser = playwright.chromium.launch(headless=False, slow_mo=10)
        page = browser.new_page()
        page.mouse.move(400,50) # 初始鼠标位置定位
        page.goto(file_path)

        # 禁用Canvas的拖拽和文本选择行为
        page.evaluate("""
          const canvas = document.querySelector('canvas');
          if (canvas) {
            canvas.draggable = false;
            canvas.addEventListener('dragstart', e => e.preventDefault());
            canvas.addEventListener('selectstart', e => e.preventDefault());
          }
        """)

        start_point = 100
        x_end = 1200
        canvas = page.query_selector('canvas')
        for y in range(100, 1000, 100):
            points = []
            # 优化WindMouse参数，生成更贴近人类的平缓轨迹
            wm(start_point, y, x_end, y, M_0=10, D_0=8, move_mouse=lambda x, y: points.append([x, y]))

            # 绑定Canvas元素执行鼠标操作
            canvas.mouse.down()
            for idx, point in enumerate(points):
                # 第一个点直接跳转，后续点加duration实现平滑移动
                canvas.mouse.move(point[0], point[1], duration=5 if idx > 0 else 0)
            canvas.mouse.up()
            # 每条线之间停顿100ms，模拟用户操作间隔
            page.wait_for_timeout(100)

        browser.close()

额外排查点 #

如果以上方法还没解决问题，你可以：

• 检查WindMouse生成的点是否都在Canvas范围内，过滤掉超出边界的点；
• 开启Playwright的Trace Viewer（browser = playwright.chromium.launch(tracing={"screenshots": True, "snapshots": True})），回放查看鼠标事件的触发情况，确认mouse.up()是否真的被执行。

内容的提问来源于stack exchange，提问作者Andrea