如何使用Cypress对Cytoscape.js画布模拟按住Shift的鼠标拖拽操作

问题原因 #

现有代码无法触发拖拽，核心是两个问题：

• 标准拖拽的事件触发流程不完整，缺少中间的mousemove事件，仅触发mousedown+mouseup只会被识别为单击操作
• 未显式在事件参数中声明鼠标左键标识、Shift按键状态，Cytoscape.js的事件监听逻辑依赖这些参数判断组合键操作

修复后代码 #

// 锁定Shift键为按下状态
cy.get('body').type('{shift}', { release: false });

cy.get('canvas').first()
  // 1. 起始位置按下鼠标左键
  .trigger('mousedown', {
    clientX: 100,
    clientY: 100,
    which: 1, // 1代表鼠标左键，Cypress 13+可替换为 button: 0
    shiftKey: true, // 显式声明事件携带Shift按下状态
    force: true,
    bubbles: true
  })
  // 模拟拖拽过程的移动动画
  .wait(800)
  // 2. 触发鼠标移动到目标坐标
  .trigger('mousemove', {
    clientX: 400,
    clientY: 400,
    which: 1,
    shiftKey: true,
    force: true,
    bubbles: true
  })
  .wait(200)
  // 3. 释放鼠标左键
  .trigger('mouseup', { force: true });

// 操作结束后释放Shift键
cy.get('body').type('{shift}');

适配注意事项 #

• 如果你的画布存在视口偏移，可将clientX/clientY替换为offsetX/offsetY直接使用相对于canvas元素自身的坐标
• 如果Cytoscape绑定的是pointer系列事件，可以把所有trigger的事件名替换为pointerdown/pointermove/pointerup，参数保持一致即可

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