1

Using Selenium and Python, the goal is to drag and drop an element to a target, as shown with this HTML5 test website. Selenium should be able to do that too with a simple call to an ActionChains(driver) method, as shown here in section 3.3: . However, to my dismay it appears that the functionality is not implemented for HTML5 based websites, as explained in a selenium bug report.

Ok, time for a solution, and someone appears to have found a nice workaround.

Problem is an error that does not make sense. Here is my implementation:

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

The result is an error: 

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)

What is most likely causing this error, and how might I fix it?

Note: Using Python in Xcode to test Drag and Drop functionality in Firefox.

Community
  • 1
  • 1
H_H
  • 495
  • 1
  • 7
  • 13

2 Answers2

1

The suggested way to simulate HTML5 drag and drop via javascript is as follows.

  1. You need to have the both the files “jquery_load_helper.js” and “drag_and_drop_helper.js” in your project directory.
  2. Try to give the full path of the files as shown in the code below.

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

Code for “jquery_load_helper.js” is:

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

Code for “drag_and_drop_helper.js” is:

(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);
Shaik
  • 342
  • 2
  • 9
-1

Content of 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]);
meager
  • 209,754
  • 38
  • 307
  • 315
dhawanaseem
  • 11
  • 3