如何在Cypress中通过坐标实现Canvas元素的Shift+拖放操作？

你的原代码存在两个主要问题：

1. click方法的参数语法错误（缺少逗号分隔键值对），且拖放流程无需提前执行click，直接从mousedown触发即可
2. 事件触发时未明确坐标参数的传递格式，导致Canvas的拖拽逻辑无法识别事件

修正后的基础实现代码 #

cy.get('canvas')
  // 在起始坐标按下鼠标
  .trigger('mousedown', { clientX: 100, clientY: 100, force: true })
  // 模拟连续移动（贴近真实用户操作，部分Canvas逻辑需要连续移动事件才响应）
  .trigger('mousemove', { clientX: 150, clientY: 150, force: true })
  .trigger('mousemove', { clientX: 200, clientY: 200, force: true })
  // 在目标坐标松开鼠标
  .trigger('mouseup', { clientX: 200, clientY: 200, force: true })
  // 可选：触发mouseleave完成事件闭环
  .trigger('mouseleave', { clientX: 200, clientY: 200, force: true })

关键注意事项 #

• 若需基于Canvas内部坐标计算（比如Canvas存在页面偏移），可先获取Canvas的位置信息转换坐标：

cy.get('canvas').then($canvas => {
  const rect = $canvas[0].getBoundingClientRect();
  // 把Canvas内部的相对坐标转换为屏幕绝对坐标
  const startX = rect.left + 100;
  const startY = rect.top + 100;
  const endX = rect.left + 200;
  const endY = rect.top + 200;

  cy.wrap($canvas)
    .trigger('mousedown', { clientX: startX, clientY: startY, force: true })
    .trigger('mousemove', { clientX: endX, clientY: endY, force: true })
    .trigger('mouseup', { clientX: endX, clientY: endY, force: true });
});

• 添加force: true参数：跳过Cypress的元素可交互性检查，因为Canvas上的拖拽目标并非DOM节点，常规检查会阻止事件触发
• 严格遵循事件顺序：mousedown → mousemove → mouseup，这是原生拖拽事件的标准触发流程

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