Selenium Webdriver - Unable To Drag And Drop Element In Ie11

I am trying to drag and drop an element from side panel to form. Drag and drop code what I wrote is like below. Actions builder = new Actions(driver); builder.dragAndDrop(source, t

Solution 1:

Seems like a known issue with IE11 that no one has been able to fix.

There's a relevant GitHub issue opened in the Selenium repository, but it's been closed due to lack of a working, reproducible example:

https://github.com/SeleniumHQ/selenium/issues/6354

Other users on StackExchange have been seeing this problem since 2016, with no real resolution:

Unable to Automate Drag and Drop for IE11 : Selenium WebDriver (no working resolution)

https://sqa.stackexchange.com/questions/22534/why-drag-and-drop-is-not-working-in-selenium-webdriver/26500 (no accepted answer, but a few upvotes on one)

My guess is IE driver is just flaky, and drag and drop may work on some websites, but not others, for unknown reasons. You may have better luck opening a GitHub issue in the Selenium repository, and provide a working code sample / URL where drag and drop is absolutely not working, all of the time.

Solution 2:

Drag and drop is problematic now with Selenium. Here a simulation of drag and drop is described: How to simulate HTML5 Drag and Drop in Selenium Webdriver?

Solution 3:

I tried with the answer in this thread: Unable to Automate Drag and Drop for IE11 : Selenium WebDriver (which also mentioned by Christine). It can work well in IE11 with the test page in the code and the drag and drop page of w3schools. You only need to replace the website url of your owns and the two elements' ids with your owns in the code.

----------------------------------------------------------------Edit--------------------------------------------------------------

The website you provided is about jQuery drag&drop. It's different from HTML5 drag&drop. Besides, the drag&drop elements is in an iframe. We need to use switchTo() to reach the iframe at first. You could check the code below, it can work well in IE:

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver; 
import org.openqa.selenium.ie.InternetExplorerDriver; 
import org.openqa.selenium.WebElement; 
import org.openqa.selenium.interactions.Actions;

publicclassIEauto {
    publicstaticvoidmain(String[] args) { 

     //add the IE web driver path here.. 
      System.setProperty("webdriver.ie.driver","C:\\yourpath\\IEDriverServer_x64_3.14.0\\IEDriverServer.exe");             
      WebDriverdriver=newInternetExplorerDriver(); 

     //replace the URL of the web page here.. 
      driver.get("https://jqueryui.com/droppable/"); 
     //int size = driver.findElements(By.tagName("iframe")).size();
      driver.switchTo().frame(0);

      WebElementele_source= driver.findElement(By.id("draggable"));
      WebElementele_target= driver.findElement(By.id("droppable"));

      Actionsbuilder=newActions(driver);
      builder.dragAndDrop(ele_source, ele_target).build().perform();
    } 
}

The result is like this:

Solution 4:

I have also faced the same issue. Please find below custom java-script function for drag & drop.

1) Create DragDrop.js file and paste below code in it

functioncustomEvent(typeOfEvent) {
    var event = document.createEvent("CustomEvent");
    event.initCustomEvent(typeOfEvent, true, true, null);
    event.dataTransfer = {
        data: {},
        setData: function (key, value) {
            this.data[key] = value;
        },
        getData: function (key) {
            returnthis.data[key];
        }
    };
    return event;
}
functiondispatchEvent(element, event, transferData) {
    if (transferData !== undefined) {
        event.dataTransfer = transferData;
    }
    if (element.dispatchEvent) {
        element.dispatchEvent(event);
    } elseif (element.fireEvent) {
        element.fireEvent("on" + event.type, event);
    }
}
functionexecuteDrageAndDrop(element, target) {
    var dragStartEvent = customEvent('dragstart');
    dispatchEvent(element, dragStartEvent);
    var dropEvent = customEvent('drop');
    dispatchEvent(target, dropEvent, dragStartEvent.dataTransfer);
    var dragEndEvent = customEvent('dragend');
    dispatchEvent(element, dragEndEvent, dropEvent.dataTransfer);
}

2) Using below code we can call above custom function(Below is C# code)

stringscript= System.IO.File.ReadAllText(@"{filepath of DragDrop.js file}");
script = script + "executeDrageAndDrop(arguments[0], arguments[1])";
IJavaScriptExecutorexecutor= (IJavaScriptExecutor)driver;

IWebElementsource= driver.findElement(By......);
IWebElementtarget= driver.findElement(By......);

executor.ExecuteScript(script, source, target);

Note: For Java - Convert above C# code into Java and try it. I have tried above code and it is working for IE, Edge, and Chrome browsers.