Selenium Java实现拖拽功能时点击后无法放入指定目标位置如何解决

失效核心原因 #

你当前的写法将每个拖拽动作拆分单独执行，多数浏览器不会将离散的鼠标事件识别为合法的拖拽交互流程，此外如果元素不在可视区域、前端使用自定义拖拽框架，也会导致原生Actions拖拽无效。

可直接复用的修复方案 #

• 方案1：合并动作链执行（优先尝试，适配绝大多数原生拖拽场景）
  先将两个元素滚动到可视区域，再把所有拖拽动作合并为单次动作链执行，添加必要停顿避免事件触发过快：

  // 滚动元素到可视区域中心
  ((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView({block: 'center'});", drag);
  ((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView({block: 'center'});", Drop);
  // 等待元素状态稳定
  Thread.sleep(150);
  
  Actions actions = new Actions(driver);
  actions.clickAndHold(drag)
        .pause(200)
        .moveToElement(Drop)
        .pause(200)
        .release(Drop)
        .build()
        .perform();
  

• 方案2：JS模拟拖拽事件（适配使用SortableJS、Vue.Draggable等自定义拖拽框架的场景）
  直接通过JS触发拖拽相关的自定义事件，兼容性比原生Actions更好：

  JavascriptExecutor js = (JavascriptExecutor) driver;
  // 注入拖拽模拟方法并执行
  js.executeScript("" +
        "const simulateDragDrop = (source, target) => {\n" +
        "  const createDragEvent = (type) => {\n" +
        "    const evt = new CustomEvent(type, {bubbles: true, cancelable: true});\n" +
        "    evt.dataTransfer = {data: {}, setData: (k,v) => evt.dataTransfer.data[k] = v, getData: k => evt.dataTransfer.data[k]};\n" +
        "    return evt;\n" +
        "  };\n" +
        "  source.dispatchEvent(createDragEvent('dragstart'));\n" +
        "  target.dispatchEvent(createDragEvent('dragover'));\n" +
        "  target.dispatchEvent(createDragEvent('drop'));\n" +
        "  source.dispatchEvent(createDragEvent('dragend'));\n" +
        "}" +
        "simulateDragDrop(arguments[0], arguments[1]);", drag, Drop);
  

• 方案3：坐标偏移拖拽（适配需要精准控制拖拽落点的场景）
  直接计算两个元素的中心坐标偏移量执行拖拽：

  int targetX = Drop.getLocation().x + Drop.getSize().width / 2 - drag.getLocation().x;
  int targetY = Drop.getLocation().y + Drop.getSize().height / 2 - drag.getLocation().y;
  new Actions(driver).dragAndDropBy(drag, targetX, targetY).build().perform();
  

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