Cypress触发mouseover等鼠标事件失效，无法实现同元素内拖移线段功能

你遇到的问题核心是Geoman这类前端图形编辑库的拖拽交互有专属的事件触发逻辑，原有代码仅触发单次mousemove、缺少状态切换等待，不符合库的交互判定规则，按照以下方案调整即可：

可运行的代码示例 #

// 先确认选择器能正确定位到要拖动的圆形控制点，Geoman的控制点通用类名为.pm-vertex-marker
cy.get('.pm-vertex-marker')
  .should('be.visible')
  // 触发鼠标悬停，激活元素交互状态
  .trigger('mouseover', { force: true })
  // 触发鼠标左键按下，同时传which和button参数兼容不同库的事件监听规则
  .trigger('mousedown', { which: 1, button: 0, force: true })
  // 先触发小幅度移动，触发库的拖拽状态激活逻辑（多数编辑库需要检测到位移才会进入拖拽模式）
  .trigger('mousemove', { 
    clientX: 10, 
    clientY: 10, 
    which: 1, 
    button: 0,
    force: true 
  })
  // 等待100ms，确保库完成拖拽状态切换
  .wait(100)
  // 移动到目标位置，推荐用元素相对坐标计算，避免不同窗口尺寸下坐标漂移
  .then($el => {
    const rect = $el[0].getBoundingClientRect()
    // 示例为从当前控制点位置向右下偏移200px，可自行调整偏移值
    return cy.wrap($el).trigger('mousemove', {
      clientX: rect.left + 200,
      clientY: rect.top + 200,
      which: 1,
      button: 0,
      force: true
    })
  })
  // 等待100ms，确保位置更新完成
  .wait(100)
  // 触发鼠标抬起，结束拖拽
  .trigger('mouseup', { force: true })

注意事项 #

• 不要使用固定的pageX/pageY值，不同屏幕尺寸、窗口缩放比例下固定坐标会失效，基于元素自身的getBoundingClientRect计算相对坐标稳定性更高
• 必须至少触发两次mousemove事件：第一次小幅度移动用于激活库的拖拽状态，第二次才是移动到目标位置
• 事件参数同时携带which:1和button:0，覆盖不同库的事件判定规则
• 适当添加短时长的wait，不要让事件触发速度超过前端库的状态切换速度，100ms的延迟不会明显影响测试执行效率

内容的提问来源于stack exchange，提问作者Ben Koren Kruiger