使用Selenium和Python，目标是将元素拖放到目标，如此HTML5测试网站所示。 Selenium也可以通过简单调用ActionChains（驱动程序）方法来实现，如第3.3节中所示here :.但令我沮丧的是，似乎没有为基于HTML5的网站实现该功能，如{硒错误报告中的explained。
好的，是时候找一个解决方案了，有人似乎找到了一个不错的workaround。
问题是一个没有意义的错误。这是我的实施：
import unittest
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
# drag and drop not working with ActionChains and HTML5
from selenium.webdriver import ActionChains
class PythonDragAndDrop(unittest.TestCase):
def setUp(self):
self.driver = webdriver.Firefox()
def test_search(self):
driver = self.driver
driver.get("http://html5demos.com/drag")
self.assertIn("HTML5 Demo: Drag and drop", driver.title)
# workaround
jquery_url = "http://code.jquery.com/jquery-1.11.2.min.js"
driver.set_script_timeout(30)
# load jquery helper
with open("/Users/me/Desktop/dragNDrop/jquery_load_helper.js") as f:
load_jquery_js = f.read()
# load drag and drop helper
with open("/Users/me/Desktop/dragNDrop/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'});")
def tearDown(self):
self.driver.close() # closes one browser tab
# driver.quit() # closes browser and all tabs
if __name__ == "__main__":
unittest.main()
结果是错误：
Traceback (most recent call last):
File "testDragAndDrop.py", line 35, in test_search
driver.execute_async_script(load_jquery_js, jquery_url)
File "/Library/Python/2.7/site-packages/selenium-2.45.0-py2.7.egg/selenium/webdriver/remote/webdriver.py", line 418, in execute_async_script
{'script': script, 'args':converted_args})['value']
File "/Library/Python/2.7/site-packages/selenium-2.45.0-py2.7.egg/selenium/webdriver/remote/webdriver.py", line 175, in execute
self.error_handler.check_response(response)
File "/Library/Python/2.7/site-packages/selenium-2.45.0-py2.7.egg/selenium/webdriver/remote/errorhandler.py", line 166, in check_response
raise exception_class(message, screen, stacktrace)
WebDriverException: Message: illegal character
Stacktrace:
at handleEvaluateEvent (http://html5demos.com/drag:69)
最有可能导致此错误，我该如何解决？
注意：使用Python in Xcode测试Firefox中的拖放功能。
答案 0 :(得分：1)
通过javascript模拟HTML5拖放的建议方法如下。
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)
jquery_file = "D:\\projectfolder\\jquery_load_helper.js"
drag_file = "D:\\projectfolder\\drag_and_drop_helper.js"
# load jquery helper
with open(jquery_file) as f:
load_jquery_js = f.read()
# load drag and drop helper
with open(drag_file) as f:
drag_and_drop_js = f.read()
# load jquery
driver.execute_script(load_jquery_js, jquery_url)
# perform drag&drop
driver.execute_script(drag_and_drop_js + "$('#one').simulateDragDrop({ dropTarget: '#bin'});")
“jquery_load_helper.js”的代码是：
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)
jquery_file = "D:\\Python\\Work\\robot ide\\jquery_load_helper.js"
drag_file = "D:\\Python\\Work\\robot ide\\drag_and_drop_helper.js"
# load jquery helper
with open(jquery_file) as f:
load_jquery_js = f.read()
# load drag and drop helper
with open(drag_file) as f:
drag_and_drop_js = f.read()
# load jquery
driver.execute_script(load_jquery_js, jquery_url)
# perform drag&drop
driver.execute_script(drag_and_drop_js + "$('#one').simulateDragDrop({ dropTarget: '#bin'});")
“drag_and_drop_helper.js”的代码是：
(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);
答案 1 :(得分：-1)
上面给出的解决方案不完整！亲爱的@Bhargav Rao，在您急于删除查询之前请参考以下链接!!
http://seleniumwebdrivertrainings.com/how-to-simulate-html5-drag-and-drop-in-selenium-webdriver/
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]);