Webdriver.io环境下angular gridster组件执行拖拽操作失败问题咨询

根因说明 #

拖拽不生效核心是angular gridster组件自身有拖拽触发阈值、专属事件监听逻辑，原生拖拽方法和之前的指针操作没有匹配组件的事件触发要求，加上窗口状态异常可能导致坐标偏移。

前置校验项 #

• 关闭Headless模式、禁止浏览器最小化，启动测试后先执行await browser.maximizeWindow()确保窗口全屏，避免坐标计算偏移
• 确认拖拽源元素和目标元素都已渲染完成，可加await srcEle.waitForExist({timeout: 5000})和await desEle.waitForExist({timeout: 5000})做前置等待

可用实现方案 #

方案1：适配组件事件规则的pointer操作（优先使用） #

// 先获取拖拽源和目标元素的坐标信息
const srcRect = await srcEle.getRect()
const desRect = await desEle.getRect()

await browser.performActions([
  {
    type: 'pointer',
    id: 'mouse1',
    parameters: { pointerType: 'mouse' },
    actions: [
      // 移动到源元素中心位置，避免点到元素边缘无法触发拖拽
      { type: 'pointerMove', duration: 100, x: Math.round(srcRect.x + srcRect.width/2), y: Math.round(srcRect.y + srcRect.height/2) },
      // 按下鼠标左键
      { type: 'pointerDown', button: 0 },
      // 停留50ms激活元素拖拽状态，匹配gridster的拖拽触发阈值
      { type: 'pause', duration: 50 },
      // 先小幅度移动10px，触发gridster的拖拽开始识别逻辑
      { type: 'pointerMove', duration: 100, origin: 'pointer', x: 10, y: 0 },
      { type: 'pause', duration: 50 },
      // 移动到目标元素中心位置
      { type: 'pointerMove', duration: 200, x: Math.round(desRect.x + desRect.width/2), y: Math.round(desRect.y + desRect.height/2) },
      // 停留100ms让gridster完成位置校验和布局预计算
      { type: 'pause', duration: 100 },
      // 松开鼠标左键完成放置
      { type: 'pointerUp', button: 0 }
    ]
  }
])
// 操作完成后加停留等待gridster布局更新
await browser.pause(300)

方案2：JS注入触发事件兜底 #

如果pointer操作仍不生效，可直接注入JS触发gridster监听的拖拽事件：

await browser.execute((srcEle, desEle) => {
  // 构造符合gridster监听规则的拖拽事件
  const dragStart = new DragEvent('dragstart', { bubbles: true, cancelable: true })
  const drag = new DragEvent('drag', { bubbles: true, cancelable: true })
  const drop = new DragEvent('drop', { bubbles: true, cancelable: true })
  const dragEnd = new DragEvent('dragend', { bubbles: true, cancelable: true })
  
  srcEle.dispatchEvent(dragStart)
  srcEle.dispatchEvent(drag)
  desEle.dispatchEvent(drop)
  srcEle.dispatchEvent(dragEnd)
}, srcEle, desEle)

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