如何在 Selenium Webdriver 中模拟 HTML5 拖放？

Question

我正在使用 Python 2.7 和 Selenium 2.44。

我想在 Selenium WD 中自动拖放 操作，但根据其他相关帖子Selenium 不支持 HTML5 中的操作 还。 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()

但没有成功。

Answer 1

是的，HTML5 "drag&drop" 目前不支持 Selenium:

Issue 3604: HTML5 Drag and Drop with Selenium Webdriver

其中一个 suggested workarounds 是 模拟 HTML5 拖放 通过 JavaScript:

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

示例代码：

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

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

问题是它在你的情况下不起作用 "as is" 因为它 需要 jQuery.

现在我们需要搞清楚如何动态加载jQuery。谢天谢地，there is a solution.

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]);

Before/after 结果：

Answer 2

Java 版本低于 commit

https://github.com/vikramvi/Selenium-Java/commit/a1354ca5854315fded8fc80ba24a4717927d08c7

Answer 3

在 python 中找到了工作示例（未使用 jquery_load_helper.js）- https://gist.github.com/rcorreia/2362544#gistcomment-2708388

制作人员：Kelanmomo

如 alecxe 所述：下载 drag_and_drop_helper.js

# coding = utf-8
from selenium import webdriver
import os
from time import sleep

driver = webdriver.Chrome()
driver.implicitly_wait(10)
driver.get('http://the-internet.herokuapp.com/drag_and_drop')

with open(os.path.abspath('drag_and_drop_helper.js'), 'r') as js_file:
    line = js_file.readline()
    script = ''
    while line:
        script += line 
        line = js_file.readline()

driver.execute_script(script + "$('#column-a').simulateDragDrop({ dropTarget: '#column-b'});")
sleep(2)
driver.quit()

如何在 Selenium Webdriver 中模拟 HTML5 拖放？

How to simulate HTML5 Drag and Drop in Selenium Webdriver?

html

python

selenium

drag-and-drop

selenium-webdriver