Python With Selenium: Drag And Drop From File System To Webdriver?

I have to automate a web-application, which contains a drag and drop area for uploading files from the local file system. My test environment is developed using Python. For the aut

Solution 1:

Here's the python version of the trick with input injection via script.

JS_DROP_FILE = """
    var target = arguments[0],
        offsetX = arguments[1],
        offsetY = arguments[2],
        document = target.ownerDocument || document,
        window = document.defaultView || window;

    var input = document.createElement('INPUT');
    input.type = 'file';
    input.onchange = function () {
      var rect = target.getBoundingClientRect(),
          x = rect.left + (offsetX || (rect.width >> 1)),
          y = rect.top + (offsetY || (rect.height >> 1)),
          dataTransfer = { files: this.files };

      ['dragenter', 'dragover', 'drop'].forEach(function (name) {
        var evt = document.createEvent('MouseEvent');
        evt.initMouseEvent(name, !0, !0, window, 0, 0, 0, x, y, !1, !1, !1, !1, 0, null);
        evt.dataTransfer = dataTransfer;
        target.dispatchEvent(evt);
      });

      setTimeout(function () { document.body.removeChild(input); }, 25);
    };
    document.body.appendChild(input);
    return input;
"""defdrag_and_drop_file(drop_target, path):
    driver = drop_target.parent
    file_input = driver.execute_script(JS_DROP_FILE, drop_target, 0, 0)
    file_input.send_keys(path)

As drop_target pass it some element visible on the page.

The approach is to invoke a javascript using selenium's execute_script function to emulate drag and drop events. The code works as following:

1. selenium invokes javascript code
2. javascript creates input element and attaches it to DOM
3. javascript attaches a handler to the input which emulates mouse events that happens when user actually drops a file, namely dragenter, dragover, drop.
4. selenium updates the input with the path to the file. At this point the handler from step 2 is invoked and it emulates drag and drop events.

Solution 2:

I know this may be a late answer but just in case for people who find the answer!

If you are using Chrome please go to this site to download the Chrome driver. (Try to find your chrome version thru this and choose the suitable one)

There's still another thing you will need to do I'll show it right now

---

First: Download chrome driver and copy the Xpath

Step 1: Go to the site you want and copy fullXPath of your "drag and drop", by right click on the drag and drop area then hit the inspect.

Plz do this twice just in case it inspects the right place

Step 2: You will see the highlight color, again right-click on them

then you will find "copy" -> "copy fullXpath"

Finally, let's code

Wait!!! Just one more suggestion plz : If you see something goes wrong with pasting the "Xpath" or "link to the folder" for example

you might use ' ' instead of " "

from selenium import webdriver
driver = webdriver.Chrome('D:\Folder\chromedriver')
driver.get('https://exmaple.com')
drag_&_drop = driver.find_element_by_xpath('paste-the-full-xpath-here')
drag_&_drop.send_keys('D:\Folder\picture.png')
#python 3.9