使用Selenium拖放HTML5

Question

我想知道我应该使用Selenium的driver.executeScript是什么脚本，以便能够将元素拖放到html5上？

我有一个html5页面，我想在其中拖放一个元素，现在我正在运行它，但仍然无法正常工作：

JavascriptExecutor js = (JavascriptExecutor)driver;     

js.executeAsyncScript("(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, {});
        dropEvent.dataTransfer = event.dataTransfer;
        this.dispatchEvent($(options.dropTarget)[0], type, dropEvent);

        /Simulating drag end/
        type = 'dragend';
        var dragEndEvent = this.createEvent(type, {});
        dragEndEvent.dataTransfer = event.dataTransfer;
        this.dispatchEvent(elem, type, dragEndEvent);
    },
    createEvent: function (type) {
        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);");  

此后，我

Answer 1

在此之前，我必须先运行一个脚本才能使它工作：

js.executeAsyncScript("(function(jqueryUrl, callback) {
if (typeof jqueryUrl != 'string') {
    jqueryUrl = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.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;
            script.onload = script.onreadystatechange = null;
            head.removeChild(script);
            callback();
        }
    });
    script.src = jqueryUrl;
    head.appendChild(script);
}
else {
    callback();
}
})(arguments[0], arguments[arguments.length - 1]);
");   

Answer 2

尝试使用以下代码进行操作：

public static  void dragAndDropViaJQueryHelper(WebDriver driver, String dragSourceJQuerySelector, String dropTargetJQuerySelector) {
        String jqueryScript = "(function( jquery ) {\r\n" + 
                "        jquery.fn.simulateDragDrop = function(options) {\r\n" + 
                "                return this.each(function() {\r\n" + 
                "                        new jquery.simulateDragDrop(this, options);\r\n" + 
                "                });\r\n" + 
                "        };\r\n" + 
                "        jquery.simulateDragDrop = function(elem, options) {\r\n" + 
                "                this.options = options;\r\n" + 
                "                this.simulateEvent(elem, options);\r\n" + 
                "        };\r\n" + 
                "        jquery.extend(jquery.simulateDragDrop.prototype, {\r\n" + 
                "                simulateEvent: function(elem, options) {\r\n" + 
                "                        /*Simulating drag start*/\r\n" + 
                "                        var type = 'dragstart';\r\n" + 
                "                        var event = this.createEvent(type);\r\n" + 
                "                        this.dispatchEvent(elem, type, event);\r\n" + 
                "\r\n" + 
                "                        /*Simulating drop*/\r\n" + 
                "                        type = 'drop';\r\n" + 
                "                        var dropEvent = this.createEvent(type, {});\r\n" + 
                "                        dropEvent.dataTransfer = event.dataTransfer;\r\n" + 
                "                        this.dispatchEvent(jquery(options.dropTarget)[0], type, dropEvent);\r\n" + 
                "\r\n" + 
                "                        /*Simulating drag end*/\r\n" + 
                "                        type = 'dragend';\r\n" + 
                "                        var dragEndEvent = this.createEvent(type, {});\r\n" + 
                "                        dragEndEvent.dataTransfer = event.dataTransfer;\r\n" + 
                "                        this.dispatchEvent(elem, type, dragEndEvent);\r\n" + 
                "                },\r\n" + 
                "                createEvent: function(type) {\r\n" + 
                "                        var event = document.createEvent(\"CustomEvent\");\r\n" + 
                "                        event.initCustomEvent(type, true, true, null);\r\n" + 
                "                        event.dataTransfer = {\r\n" + 
                "                                data: {\r\n" + 
                "                                },\r\n" + 
                "                                setData: function(type, val){\r\n" + 
                "                                        this.data[type] = val;\r\n" + 
                "                                },\r\n" + 
                "                                getData: function(type){\r\n" + 
                "                                        return this.data[type];\r\n" + 
                "                                }\r\n" + 
                "                        };\r\n" + 
                "                        return event;\r\n" + 
                "                },\r\n" + 
                "                dispatchEvent: function(elem, type, event) {\r\n" + 
                "                        if(elem.dispatchEvent) {\r\n" + 
                "                                elem.dispatchEvent(event);\r\n" + 
                "                        }else if( elem.fireEvent ) {\r\n" + 
                "                                elem.fireEvent(\"on\"+type, event);\r\n" + 
                "                        }\r\n" + 
                "                }\r\n" + 
                "        });\r\n" + 
                "})(jQuery);";
        ((JavascriptExecutor) driver).executeScript(jqueryScript);
        String dragAndDropScript = "jQuery('" + dragSourceJQuerySelector + "').simulateDragDrop({ dropTarget: '" + dropTargetJQuerySelector + "'});";
        ((JavascriptExecutor) driver).executeScript(dragAndDropScript);
    }

只需将您的css或xpath选择器作为参数传递给method。
希望对您有帮助。

Answer 3

这仅在将以下属性添加到Source和Destination元素时有效：

((IJavaScriptExecutor)driver).ExecuteScript("arguments[0].setAttribute('ondragstart','dragstart(event)')", source);
((IJavaScriptExecutor)driver).ExecuteScript("arguments[0].setAttribute('ondrop','drop(event)')", dest);
((IJavaScriptExecutor)driver).ExecuteScript("arguments[0].setAttribute('ondragover','dragend(event)')", dest);