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

问题描述

我使用的是Python 2.7和Selenium 2.44。

我想在Selenium WD中自动拖放操作，但根据其他相关帖子 HTML5中的操作不受Selenium的支持有什么办法来模拟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（）
  

，它没有起作用。

解决方案

是的，HTML5拖放目前由Selenium支持：

• 问题3604：使用Selenium Webdriver进行HTML5拖放

建议的解决方法之一是模拟HTML5通过JavaScript拖放：

• 下载 drag_and_drop_helper.js


• 通过 execute_script（）在源上调用 simulateDragDrop（）函数来执行脚本c $ c>元素通过目标元素作为 dropTarget



示例代码：

  with open（drag_and_drop_helper.js）as f： 
 js = f.read（）
 
 driver.execute_script（js +$（'＃one'）。simulateDragDrop（{dropTarget：'#bin'}）;）
  

问题是它不会在你的情况下按原样，因为它需要 jQuery 。

---

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

完成工作例如在Python中：

 从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（）
 
＃加载拖放帮助
与open（drag_and_drop_helper.js）为f：
 drag_and_drop_js = f.read（）
 
＃load jQuery 
 driver.execute_async_script（load_jquery_js，jquery_url）
 
＃执行拖放
 driver.execute_script（drag_and_drop_js +$（'＃one'）。simulateDragDrop（{dropTarget：'＃ bin'}）;）
  

其中 jquery_load_helper.js 包含：

  / **动态加载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]）; 
  

结果之前/之后：

< img src =https://i.stack.imgur.com/FQ33Ab.png/>

I am using Python 2.7 and Selenium 2.44.

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?

Here is the code I tried:

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()

and it did not work.

解决方案

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

• Issue 3604: HTML5 Drag and Drop with Selenium Webdriver

One of the suggested workarounds is to simulate HTML5 drag and drop via JavaScript:

• 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

Sample code:

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

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

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

---

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

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'});")

where jquery_load_helper.js contains:

/** 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 result:

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