使用4teamwork/cypress-drag-drop插件同区域拖拽测试失效问题

潜在原因 #

• 偏移量方向错误：你当前配置的deltaY: -100代表向上移动100像素，与你需要将第一个元素拖到第三个元素下方的目标方向完全相反，自然无法实现预期效果；且未考虑元素实际高度，偏移量数值也不符合实际移动距离要求。
• 插件方法使用错误：该拖拽插件的核心调用方法为.drag()，而非.move()，方法名误用会导致拖拽逻辑未被插件正确触发。
• 事件监听匹配问题：如果页面原生拖拽逻辑的事件绑定在可拖拽区域内部的<span>元素上，直接选中父级#drag-index-0触发操作，可能不会被事件监听器识别。
• 事件流不完整：若你使用的.move()方法未完整触发mousedown→mousemove→mouseup的拖拽全流程事件，页面的拖拽排序逻辑不会响应对应的操作。

修复方案 #

优先使用插件自带的目标定位方式，无需手动计算偏移量，稳定性更高：

cy.get('#drag-index-0')
  .drag('#drag-index-2', {
    force: true,
    position: 'bottom' // 指定放置到目标元素的下方位置
  })

如果必须使用偏移量实现，先获取单个元素高度后再计算正确的向下偏移值：

cy.get('#drag-index-0').then($source => {
  const singleItemHeight = $source.outerHeight()
  // 向下移动2个元素的高度+少量间距，即可放到第三个元素下方
  cy.get('#drag-index-0')
    .move({
      deltaX: 0,
      deltaY: singleItemHeight * 2 + 10,
      force: true
    })
})

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