wdio v7 Chrome环境下drag and drop功能实现及替代方案问询

wdio v7官方内置的dragAndDrop()方法在Chrome浏览器无法正常生效，核心原因是Chrome高版本调整了CDP（Chrome DevTools Protocol）拖拽事件的触发逻辑，旧版本的API封装不再兼容，以下是两个经过实际验证的可行替代方案：

方案一：通过原生Pointer Action分步模拟拖拽 #

该方案通过Webdriver标准动作接口模拟完整的鼠标拖拽操作，适配绝大多数普通拖拽场景：

• 先定位拖拽源元素与目标放置元素：

const dragSource = await $('#your-drag-element-selector');
const dropTarget = await $('#your-drop-area-selector');

• 调用performActions执行拖拽动作序列：

await browser.performActions([
  {
    type: 'pointer',
    id: 'mouse-pointer',
    parameters: { pointerType: 'mouse' },
    actions: [
      // 移动鼠标到拖拽源中心点
      { type: 'pointerMove', duration: 0, origin: dragSource, x: 0, y: 0 },
      // 按下鼠标左键
      { type: 'pointerDown', button: 0 },
      // 停顿10ms保证事件触发
      { type: 'pause', duration: 10 },
      // 匀速移动到放置目标中心点
      { type: 'pointerMove', duration: 300, origin: dropTarget, x: 0, y: 0 },
      // 停顿10ms保证拖拽状态被目标元素识别
      { type: 'pause', duration: 10 },
      // 松开鼠标左键
      { type: 'pointerUp', button: 0 }
    ]
  }
]);
// 释放动作资源
await browser.releaseActions();

小提示：如果拖拽时页面有动画效果，可适当调大pointerMove的duration参数，或者在动作执行前加等待逻辑保证元素加载完成。

方案二：注入JS触发HTML5原生拖拽事件 #

如果方案一不生效（尤其是针对有自定义事件校验的拖拽组件），可直接在页面注入JS触发完整的拖拽事件链：

await browser.execute((dragSelector, dropSelector) => {
  const src = document.querySelector(dragSelector);
  const target = document.querySelector(dropSelector);
  if(!src || !target) return false;

  // 构造完整拖拽事件序列，携带dataTransfer对象
  const dataTransfer = new DataTransfer();
  const events = [
    new DragEvent('dragstart', { bubbles: true, cancelable: true, dataTransfer }),
    new DragEvent('dragenter', { bubbles: true, cancelable: true, dataTransfer }),
    new DragEvent('dragover', { bubbles: true, cancelable: true, dataTransfer }),
    new DragEvent('drop', { bubbles: true, cancelable: true, dataTransfer }),
    new DragEvent('dragend', { bubbles: true, cancelable: true, dataTransfer })
  ];

  // 按顺序触发事件
  src.dispatchEvent(events[0]);
  target.dispatchEvent(events[1]);
  target.dispatchEvent(events[2]);
  target.dispatchEvent(events[3]);
  src.dispatchEvent(events[4]);
  return true;
}, '#your-drag-element-selector', '#your-drop-area-selector');

小提示：如果你的拖拽组件有自定义的dataTransfer数据校验规则，可在构造事件前往dataTransfer对象中写入对应格式的业务数据即可。

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