0

I am trying to automate drag and drop functionality in IE11 using Selenium Web Driver in Java. I am somehow able to achieve it on Chrome, but it's not happening in IE.

Before further explanation here is how I'm dragging and dropping:

Actions builder = new Actions(driver);
builder.clickAndHold(sourceElement)
 .moveToElement(targetElement)
 .release(targetElement)
 .build().perform();

In IE: Instead of dragging and dropping it selects all the text from source to destination element. I thought this might be because it's pickup up the wrong element and tried the operation with some relevant parent and child elements but didn't work.

In Chrome: Works damn smooth.

In Firefox: Just performs click on holds and while dragging throws, element no longer attached to DOM exception. This might be because, I am dragging a row from a grid (kendo grid) and since dragging a row from a grid is not possible our devs have implemented it in such a way that when you drag a row a new dynamic element is created which moves along.

Just to add on more details:

  1. I have already tried dragAndDrop() and other Javacript options.
  2. I'm using the latest version of selenium and updated IE.
  3. Our grid uses HTML5 components and I've discovered that there are few issues already there (not sure about what all issues though), but still since my scenario was working in one browser I hope this is not one of those issues.
  4. I have made it possible somehow using Robot class but it is too unreliable and behaves weird, I would prefer giving up than using it.

Any help will be appreciated!

Prateek
  • 1,145
  • 1
  • 8
  • 21

1 Answers1

2

One solution if it's an HTML5 drag and drop is to simulate it with some javascript. Here is a working example that drops an item to a bin:

final String JS_DnD =
"var src=arguments[0],tgt=arguments[1];var dataTransfer={dropEffe" +
"ct:'',effectAllowed:'all',files:[],items:{},types:[],setData:fun" +
"ction(format,data){this.items[format]=data;this.types.append(for" +
"mat);},getData:function(format){return this.items[format];},clea" +
"rData:function(format){}};var emit=function(event,target){var ev" +
"t=document.createEvent('Event');evt.initEvent(event,true,false);" +
"evt.dataTransfer=dataTransfer;target.dispatchEvent(evt);};emit('" +
"dragstart',src);emit('dragenter',tgt);emit('dragover',tgt);emit(" +
"'drop',tgt);emit('dragend',src);";

WebDriver driver = new InternetExplorerDriver();
driver.get("http://html5demos.com/drag");

WebElement ele_source = driver.findElement(By.id("two"));
WebElement ele_target = driver.findElement(By.id("bin"));

// drag and drop item two into the bin
((JavascriptExecutor)driver).executeScript(JS_DnD, ele_source, ele_target);
Florent B.
  • 41,537
  • 7
  • 86
  • 101
  • Hi Florent, thanks for the answer. As mentioned I've already tried out javascript options. Same problem, works on chrome for my application but not on IE. – Prateek Mar 29 '16 at 11:14
  • This example works with IE11, so your DnD implementation is probably not HTML5 compliant. The best way to find a solution here would be to analyse the page. – Florent B. Mar 29 '16 at 11:30
  • I didn't say your example didn't work. The example works for the site you are referring to, but not with my application. The problem is something else. The difference here is a new element is getting created while dragging (as mentioned in the question). The details I've added in the question is not based on assumptions, I've confirmed relevant details before posting question. Never mind, Thank for putting in your time to help me out, please do let me know if there is something you think I might be missing. – Prateek Mar 29 '16 at 11:38
  • Have you tried to send the drop event once the new element is created? – Florent B. Mar 29 '16 at 11:44
  • Can't do it without a reproducible example. Can you create one on Fiddle? – Florent B. Mar 29 '16 at 13:00