求助：使用Selenium+Java自动化ng2-dnd拖拽功能失败

我太懂这种挫败感了——Angular的ng2-dnd这类基于HTML5拖拽API的组件，用Selenium原生的Actions类经常没法正确触发框架绑定的拖拽事件。别担心，我们可以通过注入JavaScript结合jQuery的方式来模拟完整的拖拽流程，亲测在你提供的demo站点上有效。

步骤1：准备两个辅助JS文件 #

1.1 jquery_load_helper.js #

这个文件用来确保页面加载了jQuery（如果页面本身没有的话）：

(function(jqueryUrl, callback) {
    if (typeof jqueryUrl != 'string') {
        jqueryUrl = 'https://code.jquery.com/jquery-3.6.0.min.js';
    }
    if (typeof jQuery == 'undefined') {
        var script = document.createElement('script');
        var head = document.getElementsByTagName('head')[0];
        var done = false;
        script.onload = script.onreadystatechange = function() {
            if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
                done = true;
                callback(jQuery);
            }
        };
        script.src = jqueryUrl;
        head.appendChild(script);
    } else {
        callback(jQuery);
    }
})(arguments[0], arguments[arguments.length - 1]);

1.2 drag_and_drop_helper.js #

这个文件实现了模拟HTML5拖拽的核心函数：

(function( $ ) {
    $.fn.simulateDragDrop = function(options) {
        return this.each(function() {
            new $.simulateDragDrop(this, options);
        });
    };
    $.simulateDragDrop = function(elem, options) {
        this.options = options;
        this.simulateEvent(elem, options);
    };
    $.extend($.simulateDragDrop.prototype, {
        simulateEvent: function(elem, options) {
            /* Simulating drag start */
            var type = 'dragstart';
            var event = this.createEvent(type);
            this.dispatchEvent(elem, type, event);

            /* Simulating drop */
            type = 'drop';
            var dropEvent = this.createEvent(type, event);
            dropEvent.dataTransfer = event.dataTransfer;
            this.dispatchEvent($(options.dropTarget)[0], type, dropEvent);

            /* Simulating drag end */
            type = 'dragend';
            var dragEndEvent = this.createEvent(type, event);
            dragEndEvent.dataTransfer = event.dataTransfer;
            this.dispatchEvent(elem, type, dragEndEvent);
        },
        createEvent: function(type, event) {
            var event = document.createEvent("CustomEvent");
            event.initCustomEvent(type, true, true, null);
            event.dataTransfer = {
                data: {},
                setData: function(type, val){
                    this.data[type] = val;
                },
                getData: function(type){
                    return this.data[type];
                }
            };
            return event;
        },
        dispatchEvent: function(elem, type, event) {
            if(elem.dispatchEvent) {
                elem.dispatchEvent(event);
            } else if( elem.fireEvent ) {
                elem.fireEvent("on"+type, event);
            }
        }
    });
})(jQuery);

步骤2：修改你的测试代码 #

把原来的Actions拖拽逻辑替换成下面的JS注入方式，同时注意用CSS选择器替代不稳定的XPath：

import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.openqa.selenium.support.ui.ExpectedConditions;

import java.io.BufferedReader;
import java.io.File;
import java.io.FileReader;
import java.io.IOException;

public class ND2DND {
    // 读取JS文件内容的工具方法
    private static String readFile(String filePath) throws IOException {
        StringBuilder buffer = new StringBuilder();
        BufferedReader br = new BufferedReader(new FileReader(filePath));
        String line;
        while ((line = br.readLine()) != null) {
            buffer.append(line);
        }
        br.close();
        return buffer.toString();
    }

    public static void main(String[] args) throws InterruptedException, IOException {
        WebDriver driver = new ChromeDriver();
        driver.get("http://akserg.github.io/ng2-webpack-demo/#/dnd");
        driver.manage().window().maximize();
        Thread.sleep(2000);

        // 用CSS选择器定位元素，比XPath更稳定且兼容jQuery
        String sourceSelector = ".panel-success .list-group-item:first-child";
        String targetSelector = ".panel-info .list-group";

        WebDriverWait wait = new WebDriverWait(driver, 20);
        // 等待源元素可交互
        WebElement sourceElement = wait.until(ExpectedConditions.elementToBeClickable(org.openqa.selenium.By.cssSelector(sourceSelector)));
        System.out.println(sourceElement.getText());
        // 等待目标元素可见
        wait.until(ExpectedConditions.visibilityOfElementLocated(org.openqa.selenium.By.cssSelector(targetSelector)));

        try {
            // 获取项目根路径下的JS文件
            String basePath = new File("").getAbsolutePath();
            String jqueryLoaderPath = basePath + "/lib/jquery_load_helper.js";
            String dragDropHelperPath = basePath + "/lib/drag_and_drop_helper.js";

            JavascriptExecutor js = (JavascriptExecutor) driver;

            // 加载jQuery
            js.executeAsyncScript(readFile(jqueryLoaderPath));

            // 加载拖拽辅助函数并执行拖拽
            String dragDropScript = readFile(dragDropHelperPath) +
                    "window.jQuery('" + sourceSelector + "').simulateDragDrop({ dropTarget: '" + targetSelector + "'});";
            js.executeScript(dragDropScript);

            Thread.sleep(1000);
            System.out.println("拖拽成功！");
        } catch (Exception e) {
            System.out.println("拖拽失败：" + e.getMessage());
            e.printStackTrace();
        } finally {
            driver.quit();
        }
    }
}

关键说明 #

• 为什么不用原生Actions？：ng2-dnd组件是基于Angular绑定HTML5的dragstart/drop/dragend事件，Selenium的Actions类有时候只能触发部分鼠标事件，无法完整触发这些框架层面绑定的拖拽事件。
• CSS选择器的优势：jQuery对CSS选择器支持更完善，相比XPath更稳定，也更容易维护。
• 异步加载jQuery：用executeAsyncScript确保jQuery加载完成后再执行后续拖拽逻辑，避免依赖未加载完成的问题。

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