如何在 Selenium Webdriver 中模拟 HTML5 拖放? [英] How to simulate HTML5 Drag and Drop in Selenium Webdriver?

问题描述

我使用的是 Python 2.7 和 Selenium 2.44.

I am using Python 2.7 and Selenium 2.44.

我想在 Selenium WD 中自动化拖放操作，但根据其他相关帖子Selenium 尚不支持 HTML5 中的操作.有没有办法在Python中模拟拖放?

I want to automate drag and drop action in Selenium WD but according to other related posts Actions in HTML5 are not supported by Selenium yet. Is there any way to simulate drag and drop in Python?

这是我试过的代码:

driver = webdriver.Firefox()
driver.get("http://html5demos.com/drag")
target = driver.find_element_by_id("one")
source = driver.find_element_by_id("bin")
actionChains = ActionChains(driver)
actionChains.drag_and_drop(target, source).perform()

它没有用.

推荐答案

是的，Selenium 目前不支持 HTML5拖放":

Yes, HTML5 "drag&drop" is not currently supported by Selenium:

• 问题 3604:使用 Selenium Webdriver 进行 HTML5 拖放
一个>

建议的解决方法之一是模拟 HTML5 拖动和通过 JavaScript 删除:

• 下载drag_and_drop_helper.js
• 通过execute_script() 在传递target 的source 元素上调用simulateDragDrop() 函数来执行脚本元素作为 dropTarget

• download drag_and_drop_helper.js
• execute the script via execute_script() calling simulateDragDrop() function on a source element passing the target element as a dropTarget

示例代码:

with open("drag_and_drop_helper.js") as f:
    js = f.read()

driver.execute_script(js + "$('#one').simulateDragDrop({ dropTarget: '#bin'});")

问题是它不会在您的情况下按原样"工作，因为它需要 jQuery.

The problem is that it won't work in your case "as is" since it requires jQuery.

现在我们需要弄清楚如何动态加载jQuery.幸运的是，有一个解决方案.

Now we need to figure out how to dynamically load jQuery. Thankfully, there is a solution.

完整的 Python 工作示例:

Complete working example in Python:

from selenium import webdriver

jquery_url = "http://code.jquery.com/jquery-1.11.2.min.js"

driver = webdriver.Firefox()
driver.get("http://html5demos.com/drag")
driver.set_script_timeout(30)

# load jQuery helper
with open("jquery_load_helper.js") as f:
    load_jquery_js = f.read()

# load drag and drop helper
with open("drag_and_drop_helper.js") as f:
    drag_and_drop_js = f.read()

# load jQuery
driver.execute_async_script(load_jquery_js, jquery_url)

# perform drag&drop
driver.execute_script(drag_and_drop_js + "$('#one').simulateDragDrop({ dropTarget: '#bin'});")

其中 jquery_load_helper.js 包含:

/** dynamically load jQuery */
(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]);

结果之前/之后:

这篇关于如何在 Selenium Webdriver 中模拟 HTML5 拖放?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！