如何在JavaScript版Selenium中实现dragAndDrop拖拽功能

1. 官方原生dragAndDrop()方法（基础通用场景） #

Selenium的Actions类内置的dragAndDrop()方法是官方提供的标准实现，直接传入源元素和目标元素即可完成拖拽，适配大部分标准拖拽场景，拖拽排序场景可直接调用。
代码示例：

const { Builder, By, Actions } = require('selenium-webdriver');

async function dragSortDemo() {
  let driver = await new Builder().forBrowser('chrome').build();
  try {
    await driver.get('你的拖拽排序页面地址');
    // 定位要拖拽的源元素
    const sourceEle = await driver.findElement(By.id('sort-item-1'));
    // 定位要拖拽到的目标位置元素
    const targetEle = await driver.findElement(By.id('sort-item-3'));

    // 执行拖拽操作
    const actions = driver.actions({ async: true });
    await actions.dragAndDrop(sourceEle, targetEle).perform();
  } finally {
    await driver.quit();
  }
}
dragSortDemo();

注意：该方法依赖浏览器原生拖拽事件支持，部分自定义封装的拖拽组件可能出现触发失效的情况，可使用下面的兼容方案

2. 分步模拟鼠标事件（兼容自定义拖拽组件场景） #

如果原生方法失效，可以把拖拽动作拆分为「按下源元素→移动到目标位置→释放鼠标」三步手动实现，适配绝大多数自定义拖拽排序组件：
代码示例：

async function customDragAndDrop(source, target, driver) {
  const actions = driver.actions({ async: true });
  // 按下鼠标左键选中源元素，停留100ms避免组件识别异常
  await actions.move({ origin: source }).press().pause(100).perform();
  // 移动鼠标到目标元素位置，设置偏移量+停留避免速度太快组件不识别
  await actions.move({ origin: target, x: 5, y: 5 }).pause(200).perform();
  // 释放鼠标完成拖拽
  await actions.release().perform();
}

// 调用示例
//  await customDragAndDrop(sourceEle, targetEle, driver);

3. JS注入触发HTML5原生拖拽事件（特殊场景兜底方案） #

如果是绑定了H5原生dragstart/dragover/drop事件的拖拽场景，前面两种方法都触发失败的话，可以直接注入JS代码手动触发拖拽事件：
代码示例：

async function html5DragAndDrop(source, target, driver) {
  await driver.executeScript(`
    function createEvent(type, options) {
      const event = new DragEvent(type, {
        bubbles: true,
        cancelable: true,
        view: window,
        ...options
      });
      return event;
    }
    const dataTransfer = new DataTransfer();
    // 触发源元素拖拽开始事件
    source.dispatchEvent(createEvent('dragstart', { dataTransfer }));
    // 触发目标区域拖拽经过事件
    target.dispatchEvent(createEvent('dragover'));
    // 触发目标区域释放事件
    target.dispatchEvent(createEvent('drop', { dataTransfer }));
    // 触发源元素拖拽结束事件
    source.dispatchEvent(createEvent('dragend'));
  `, source, target);
}

• 拖拽排序场景优先测试第一种原生方法，无效的话依次尝试第二种、第三种方案即可覆盖99%的场景
• 实现时可以根据自己使用的组件特性调整pause的停留时间，避免操作太快导致组件识别异常

内容的提问来源于stack exchange，提问作者Pyae Phyo Sie