Playwright的page.drag_and_drop()无法用于元素，因其依赖DOM可拖拽属性和原生drag事件，而canvas是位图渲染区、无独立DOM节点；必须用mouse.move()+mouse.down()+mouse.up()模拟坐标路径，并修正bounding_box、逻辑/像素比例、DPR缩放及渲染延迟。
Canvas元素无法直接用page.drag_and_drop()的原因
Playwright的drag_and_drop()方法依赖DOM元素的可拖拽属性和事件绑定，而<canvas></canvas>是位图渲染区，内部图形不对应独立DOM节点——它没有draggable="true"，也不触发dragstart/dragend原生事件。调用drag_and_drop()会抛出TimeoutError: element not interactable或静默失败。
用mouse.move() + mouse.down() + mouse.up()模拟拖拽路径
必须绕过DOM交互，转为底层鼠标坐标操作。关键点在于：坐标必须相对于canvas左上角（而非视口），且需考虑canvas的CSS缩放、滚动偏移、devicePixelRatio影响。
- 先用
canvas.bounding_box()获取canvas在视口中的真实位置（含缩放/滚动修正） - 用
canvas.evaluate()读取canvas的width/height属性（非CSS宽高），算出逻辑坐标到像素坐标的映射比例 - 将目标起始/结束逻辑坐标（如画布内(100, 50) → (300, 120)）转换为视口像素坐标，再传给
mouse.move() - 务必在
mouse.down()前加page.wait_for_timeout(50)，避免因渲染延迟导致点击落空
# 示例：拖拽canvas内一个逻辑坐标(100,50)到(300,120)
box = canvas.bounding_box()
canvas_width = canvas.evaluate("el => el.width")
canvas_height = canvas.evaluate("el => el.height")
scale_x = box["width"] / canvas_width
scale_y = box["height"] / canvas_height
<p>start_x = box["x"] + 100 <em> scale_x
start_y = box["y"] + 50 </em> scale_y
end_x = box["x"] + 300 <em> scale_x
end_y = box["y"] + 120 </em> scale_y</p><p>page.mouse.move(start_x, start_y)
page.wait_for_timeout(50)
page.mouse.down()
page.mouse.move(end_x, end_y, steps=20) # steps越多轨迹越平滑
page.mouse.up()
处理高DPR设备（如Mac Retina屏）的坐标偏移
Playwright默认以CSS像素为单位，但canvas在高DPR下实际绘制分辨率翻倍。若忽略这点，鼠标会落在目标区域外侧——比如你计算出的(200,100)在Retina屏上对应物理像素(400,200)，但mouse.move()只移动到(200,100)，相当于偏移一半。
- 用
page.evaluate("window.devicePixelRatio")获取当前DPR - 将最终计算出的视口坐标乘以DPR，再传给
mouse.move() - 注意：仅对
mouse.move()/mouse.down()等坐标操作生效；bounding_box()返回值已是CSS像素，无需额外除DPR
为什么不能用page.locator("canvas").click()代替？
click()只能触发单点事件，无法模拟持续按住+移动的过程。Canvas拖拽通常依赖mousedown→mousemove（多次）→mouseup这一事件流，中间的mousemove必须携带实时坐标，且频率需接近人手操作（约15–30ms间隔）。直接click()或hover()只会触发初始点的click，后续移动无响应。
立即学习“Python免费学习笔记（深入）”；
真正要复现拖拽行为，必须分步控制鼠标状态和位置，任何试图“跳过中间步骤”的写法都会在复杂Canvas应用（如Figma克隆、白板工具）中失效。
