Is there a way to achieve drag and drop for Magento image upload using Selenium?

Question

I am trying to automate product upload on magento using python and selenium, however i am running into problem uploading images.

I have tried to target the input tag with id="fileupload"

driver.find_element_by_id("fileupload").send_keys('C:\\Users\\PC\\Desktop\\Code\\magento-bot\\image1.png')  

It seems to work because when i place the mouse pointer on the upload area the file name shows up, but after submiting there is no image.

I have also tried to click the upload area then select file to upload by doing this:

uploadElement = driver.find_element_by_xpath('//html/body/div[2]/main/div[2]/div/div/div/div[2]/div[5]/div[2]/fieldset/div/div[2]/div[1]/div[1]/div[1]')
uploadElement.click()
driver.switch_to.active_element().send_keys(os.getcwd()+"\image1.png)

but i end up with this error 'FirefoxWebElement' object is not callable Lastly, i tried to simulate drag and drop like this:

element = os.getcwd()+"\image1.png"
target = bot.find_element_by_id('fileupload')
ActionChains(bot).drag_and_drop(element, target).perform

but i get the error below

AttributeError("move_to requires a WebElement")

Any help will be appreciated.

Answer 1

Probably duplicate of below

Python with Selenium: Drag and Drop from file system to webdriver?

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)

See below thread as well

Selenium: Drag and Drop from file system to WebDriver?

How to simulate HTML5 Drag and Drop in Selenium Webdriver?

Answer 2

The interim solution to my problem is AutoIt.

Big thanks to @KunduK How to upload image with angular components using python selenium

I targeted the xpath of the image upload area then autoit did the rest with the code below:

autoit.win_wait_active("File Upload",5)
if autoit.win_exists("File Upload"):
   autoit.control_send("File Upload","Edit1",filepath+"{ENTER}")```