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
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;
"""
def drag_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:
dragenter
, dragover
, drop
.