Drag and Drop action doesn't release the draggable element

2,025 views
Skip to first unread message

Denis Ah-Kang

unread,
Nov 27, 2013, 12:25:43 AM11/27/13
to webd...@googlegroups.com
Hi everyone,

I'm trying to automate a simple DnD action using the firefox driver. The "drag" part works well but for some reason, the element being dragged is not released in the target element.
Here's the code I'm using:

- python script
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
driver = webdriver.Firefox()
driver.get("http://<hostname>/dnd.html")
start = driver.find_element_by_id("drag1");
target = driver.find_element_by_id("div1");
from selenium.webdriver import ActionChains
action_chains = ActionChains(driver)
action_chains.drag_and_drop(start, target).perform()

- HTML (dnd.html)
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data=ev.dataTransfer.getData("Text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
  <img id="drag1" src="https://groups.google.com/forum/google.png" draggable="true" ondragstart="drag(event)"/>
  <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" style="width:100px;height:100px;border:1px solid;"></div>
</body>
</html>


The weird thing here is that the script works very well on: http://jqueryui.com/resources/demos/droppable/default.html (element correctly released).
The code doesn't seem very different to me.

Am I missing something here?

Thanks for your help,

Denis

David

unread,
Nov 28, 2013, 5:43:33 PM11/28/13
to webd...@googlegroups.com
As a last resort, you could use javascript simulated drag & drop rather than native drag & drop Selenium support. I know the javascript technique will always work. And you'd need that for SafariDriver as well.

Denis Ah-Kang

unread,
Dec 2, 2013, 6:25:57 AM12/2/13
to webd...@googlegroups.com
I'm not sure I understand what you mean by "javascript simulated DnD". Are you talking about the simulate plugin jQuery provides?

If not, do you have a code sample I could use?

thanks,

Denis

David

unread,
Dec 2, 2013, 5:34:01 PM12/2/13
to webd...@googlegroups.com

Denis Ah-Kang

unread,
Dec 5, 2013, 1:12:33 AM12/5/13
to webd...@googlegroups.com
Unfortunately, this doesn't seem to work for me. I don't even get the drag part now. Here's the code I'm using. Am I missing something here?

    driver.get("http://html5demos.com/drag");  

    WebElement LocatorFrom=driver.findElement(By.id("one"));  
    WebElement LocatorTo=driver.findElement(By.id("bin"));  

    String xto=Integer.toString(LocatorTo.getLocation().x);
    String yto=Integer.toString(LocatorTo.getLocation().y);
    ((JavascriptExecutor)driver).executeScript("function simulate(f,c,d,e){var b,a=null;for(b in eventMatchers)if(eventMatchers[b].test(c)){a=b;break}if(!a)return!1;document.createEvent?(b=document.createEvent(a),a==\"HTMLEvents\"?b.initEvent(c,!0,!0):b.initMouseEvent(c,!0,!0,document.defaultView,0,d,e,d,e,!1,!1,!1,!1,0,null),f.dispatchEvent(b)):(a=document.createEventObject(),a.detail=0,a.screenX=d,a.screenY=e,a.clientX=d,a.clientY=e,a.ctrlKey=!1,a.altKey=!1,a.shiftKey=!1,a.metaKey=!1,a.button=1,f.fireEvent(\"on\"+c,a));return!0} var eventMatchers={HTMLEvents:/^(?:load|unload|abort|error|select|change|submit|reset|focus|blur|resize|scroll)$/,MouseEvents:/^(?:click|dblclick|mouse(?:down|up|over|move|out))$/}; " +
      "simulate(arguments[0],\"mousedown\",0,0); simulate(arguments[0],\"mousemove\",arguments[1],arguments[2]); simulate(arguments[0],\"mouseup\",arguments[1],arguments[2]);",                                                   
      LocatorFrom,xto,yto);

David

unread,
Dec 6, 2013, 7:00:52 PM12/6/13
to webd...@googlegroups.com
Your problem, at least in the last post, is choice of application to test against. Selenium WebDriver doesn't yet (fully) support HTML5 features like HTML5-based drag & drop. You're safer to test against an application using a more traditional drag & drop implementation. This would likely apply to both the native Actions API of WebDriver as well as the javascript simulation as well.

See this example and test site I chose for testing drag & drop support. The example uses the native Actions API and is in PHP. But for your reference, you only need to use the same site & locators to test the javascript simulation (or even native Actions API) against in Java, etc.

Denis Ah-Kang

unread,
Dec 12, 2013, 12:06:25 AM12/12/13
to webd...@googlegroups.com
Thanks for your reply David. Unfortunately, I need to find a way to do a Drag and Drop using full HTML5 dnd.

Shailaja

unread,
Jan 8, 2014, 7:10:08 PM1/8/14
to webd...@googlegroups.com
Hi David,

Just wondering whether you have found any solution for this?  I am also looking for the solution...

Thanks for the help!
-Shailaja

David

unread,
Jan 9, 2014, 8:56:41 PM1/9/14
to webd...@googlegroups.com
FYI, there's a bug filed for HTML5 DnD by the way: https://code.google.com/p/selenium/issues/detail?id=3604

David

unread,
Jan 14, 2014, 3:00:49 PM1/14/14
to webd...@googlegroups.com
See my comment in this thread about Selenium issue 3604. There's workarounds mentioned there that you can try.
Reply all
Reply to author
Forward
0 new messages