Selenium: Selenium Actions drag and drop not working on chrome browser

[abh7nav]

Meta -

OS: OSX

Selenium Version: 2.53.0

Browser: Chrome

Browser Version: 55.0.2883.95 (64-bit)

JQuery version: 1.7

Expected Behavior - Element should be dragged and dropped over another element

Actual Behavior - Nothing happens

Steps to reproduce -

I have used below commands for performing drag and drop but none of them helps:
a.) builder.clickAndHold(Source).moveToElement(Destination).click(Destination).release().build().perform();
b.) builder.clickAndHold(Source).build().perform();
Thread.sleep(5000);
builder.click(Destination).build().perform();
builder.release(Destination).build().perform();
c. )builder.clickAndHold(Source).release(Destination).build().perform();
d.) builder.dragAndDrop(Source, Destination).build().perform();

I also used solutions provided in https://bugs.chromium.org/p/chromedriver/issues/detail?id=841
But none of them have helped me.

I read somewhere to use drag_and_drop_helper.js but before using it I want to make sure this is only solution available as of date ?

I also see there is a bug related to this problem already in the system but I dont see any update on it. https://github.com/seleniumhq/selenium-google-code-issue-archive/issues/3604#c9

Can anyone help me out with this issue.

[barancev]

For issues please provide a concise reproducible test case and describe what results you are seeing and what results you expect.

See CONTRIBUTING.md

[abh7nav]

@barancev Test steps are as below:

1. Login to portal
2. Navigate to one tab link
3. Click on add new template (feature of product being tested)
4. Drag one icon onto other icon to create a group (This never happens)
5. Specify group name - It does not find element to specify name.

On step 4, it never drags the element to its destination neither it throws any error. I tried using following to perform drag and drop and none helped:

a.) builder.clickAndHold(Source).moveToElement(Destination).click(Destination).release().build().perform();
b.) builder.clickAndHold(Source).build().perform();
Thread.sleep(5000);
builder.click(Destination).build().perform();
builder.release(Destination).build().perform();
c. )builder.clickAndHold(Source).release(Destination).build().perform();
d.) builder.dragAndDrop(Source, Destination).build().perform();

Please let me know if any further information is required.

[abh7nav]

Is there any update for this ?

[AutomatedTester]

For issues please provide a concise reproducible test case and describe what results you are seeing and what results you expect. Please read what is meant by concise reproducible test case. This bug has no html to reproduce nor a public url. Closing until that is done.

See CONTRIBUTING.md

[abh7nav]

The application which I am using is internal and confidential hence I would not be able to provide URL. Following are the steps which I have performed :+1: Test steps are as below:

• Login to portal
• Navigate to one tab link
• Click on add new template (feature of product being tested)
• Drag one icon onto other icon to create a group (This never happens)
• Specify group name - It does not find element to specify name.
• On step 4, it never drags the element to its destination neither it throws any error. I tried using following to perform drag and drop and none helped:

a.) ```
builder.clickAndHold(Source).moveToElement(Destination).click(Destination).release().build().perform();
b.) builder.clickAndHold(Source).build().perform();
Thread.sleep(5000);
builder.click(Destination).build().perform();
builder.release(Destination).build().perform();
c. )builder.clickAndHold(Source).release(Destination).build().perform();
d.) builder.dragAndDrop(Source, Destination).build().perform();
Please let me know if any further information is required.

```

[gerixx]

Here a simple Java example showing the issue (nothing happens, but the columns blocks should change their position) using the public demo page from the-internet, tried with Chrome 56, chromedriver 2.27 and Selenium 3.0.1.

```java
System.setProperty("webdriver.chrome.driver", ".../Chrome/2.27/chromedriver.exe");

DesiredCapabilities capabilities = DesiredCapabilities.chrome();
ChromeDriver driver = new ChromeDriver(capabilities);

driver.get("http://the-internet.herokuapp.com/drag_and_drop");

WebElement colA = driver.findElement(By.id("column-a"));
WebElement colB = driver.findElement(By.id("column-b"));

Actions dragAndDrop = new Actions(driver);
dragAndDrop.dragAndDrop(colA, colB).perform();

// alternative code same issue:
// dragAndDrop.clickAndHold(colA).moveToElement(colB).release().perform();
```

[JamesZoft]

I can reproduce this with the given code.
Chrome ver: 56
Chromedriver ver: 2.27
Selenium ver: 3.0.1

[abh7nav]

@Jarob22 @gerixx They have closed this issue, can you open new issue with all relevant details and paste its issue number here.

[JamesZoft]

It can easily be reopened now a reproduceable test case has been provided.

In addition, this test also failed on IE. Adding a wait for visible before the first find didn't help - IE never found it and the wait timed out.

[abh7nav]

@Jarob22 Actually, @AutomatedTester is a member and he has closed this issue hence I cannot reopen this. Only he will be able to do so. That is why I asked to open a new issue.

[JamesZoft]

I'm aware of that, I've asked him to reopen. Just wait a little while. :)

[abh7nav]

Thanks @Jarob22

[AutomatedTester]

@gerixx

Please log chromedriver issues with the chromedriver project.

https://sites.google.com/a/chromium.org/chromedriver/help

Please be sure to include a completely reproducible test script for them, without a way to reproduce the issue you are seeing there is no good way for them to fix the problem. A reproducible test script includes a WebDriver script and a link to the page in question. If you can not provide a link, create one using jsfiddle.net

[gerixx]

@AutomatedTester

I added a sample containing reproducible code using public HTML as a comment to an existing defect: https://bugs.chromium.org/p/chromedriver/issues/detail?id=841

Hope that helps, thanks and cheers!

[GurekamSidhu]

For anybody looking to drag and drop on chrome, this function can help you do that. /**
* This method is used to locate text by a tag name and then by an attribute
*
* @param dragElement : The WebElement to be dragged
* @param dropElement : The WebElement, where to drop the draggedElement
*/
public static void dragDropJavaScript(WebElement dragElement, WebElement dropElement) throws InterruptedException { String startDrag = getWebCSSSelector(dragElement); String endDrag = getWebCSSSelector(dropElement); String fileContents = "!function t(e,r,n){function a(i,u){if(!r[i]){if(!e[i]){var s=\"function\"==typeof require&&require;if(!u&&s)return s(i,!0);if(o)return o(i,!0);var c=new Error(\"Cannot find module '\"+i+\"'\");throw c.code=\"MODULE_NOT_FOUND\",c}var f=r[i]={exports:{}};e[i][0].call(f.exports,function(t){var r=e[i][1][t];return a(r?r:t)},f,f.exports,t,e,r,n)}return r[i].exports}for(var o=\"function\"==typeof require&&require,i=0;i<n.length;i++)a(n[i]);return a}({1:[function(t,e,r){var n=t(\"./src/index.js\");\"function\"==typeof define&&define(\"dragMock\",function(){return n}),window.dragMock=n},{\"./src/index.js\":5}],2:[function(t,e,r){function n(t,e){var r=t.indexOf(e);r>=0&&t.splice(r,1)}var a=function(){this.dataByFormat={},this.dropEffect=\"none\",this.effectAllowed=\"all\",this.files=[],this.types=[]};a.prototype.clearData=function(t){t?(delete this.dataByFormat[t],n(this.types,t)):(this.dataByFormat={},this.types=[])},a.prototype.getData=function(t){return this.dataByFormat[t]},a.prototype.setData=function(t,e){return this.dataByFormat[t]=e,this.types.indexOf(t)<0&&this.types.push(t),!0},a.prototype.setDragImage=function(){},e.exports=a},{}],3:[function(t,e,r){function n(){}function a(t,e,r){if(\"function\"==typeof e&&(r=e,e=null),!t||\"object\"!=typeof t)throw new Error(\"Expected first parameter to be a targetElement. Instead got: \"+t);return{targetElement:t,eventProperties:e||{},configCallback:r||n}}function o(t,e,r){e&&(e.length<2?r&&e(t):e(t,t.type))}function i(t,e,r,n,a,i){e.forEach(function(e){var s=u.createEvent(e,a,n),c=e===r;o(s,i,c),t.dispatchEvent(s)})}var u=t(\"./eventFactory\"),s=t(\"./DataTransfer\"),c=function(){this.lastDragSource=null,this.lastDataTransfer=null,this.pendingActionsQueue=[]};c.prototype._queue=function(t){this.pendingActionsQueue.push(t),1===this.pendingActionsQueue.length&&this._queueExecuteNext()},c.prototype._queueExecuteNext=function(){if(0!==this.pendingActionsQueue.length){var t=this,e=this.pendingActionsQueue[0],r=function(){t.pendingActionsQueue.shift(),t._queueExecuteNext()};0===e.length?(e.call(this),r()):e.call(this,r)}},c.prototype.dragStart=function(t,e,r){var n=a(t,e,r),o=[\"mousedown\",\"dragstart\",\"drag\"],u=new s;return this._queue(function(){i(n.targetElement,o,\"drag\",u,n.eventProperties,n.configCallback),this.lastDragSource=t,this.lastDataTransfer=u}),this},c.prototype.dragEnter=function(t,e,r){var n=a(t,e,r),o=[\"mousemove\",\"mouseover\",\"dragenter\"];return this._queue(function(){i(n.targetElement,o,\"dragenter\",this.lastDataTransfer,n.eventProperties,n.configCallback)}),this},c.prototype.dragOver=function(t,e,r){var n=a(t,e,r),o=[\"mousemove\",\"mouseover\",\"dragover\"];return this._queue(function(){i(n.targetElement,o,\"drag\",this.lastDataTransfer,n.eventProperties,n.configCallback)}),this},c.prototype.dragLeave=function(t,e,r){var n=a(t,e,r),o=[\"mousemove\",\"mouseover\",\"dragleave\"];return this._queue(function(){i(n.targetElement,o,\"dragleave\",this.lastDataTransfer,n.eventProperties,n.configCallback)}),this},c.prototype.drop=function(t,e,r){var n=a(t,e,r),o=[\"mousemove\",\"mouseup\",\"drop\"],u=[\"dragend\"];return this._queue(function(){i(n.targetElement,o,\"drop\",this.lastDataTransfer,n.eventProperties,n.configCallback),this.lastDragSource&&i(this.lastDragSource,u,\"drop\",this.lastDataTransfer,n.eventProperties,n.configCallback)}),this},c.prototype.then=function(t){return this._queue(function(){t.call(this)}),this},c.prototype.delay=function(t){return this._queue(function(e){window.setTimeout(e,t)}),this},e.exports=c},{\"./DataTransfer\":2,\"./eventFactory\":4}],4:[function(t,e,r){function n(t,e){for(var r in e)e.hasOwnProperty(r)&&(t[r]=e[r]);return t}function a(t,e,r){\"DragEvent\"===e&&(e=\"CustomEvent\");var a=window[e],o={view:window,bubbles:!0,cancelable:!0};n(o,r);var i=new a(t,o);return n(i,r),i}function o(t,e,r){var a;switch(e){case\"MouseEvent\":a=document.createEvent(\"MouseEvent\"),a.initEvent(t,!0,!0);break;default:a=document.createEvent(\"CustomEvent\"),a.initCustomEvent(t,!0,!0,0)}return r&&n(a,r),a}function i(t,e,r){try{return a(t,e,r)}catch(n){return o(t,e,r)}}var u=t(\"./DataTransfer\"),s=[\"drag\",\"dragstart\",\"dragenter\",\"dragover\",\"dragend\",\"drop\",\"dragleave\"],c={createEvent:function(t,e,r){var n=\"CustomEvent\";t.match(/^mouse/)&&(n=\"MouseEvent\");var a=i(t,n,e);return s.indexOf(t)>-1&&(a.dataTransfer=r||new u),a}};e.exports=c},{\"./DataTransfer\":2}],5:[function(t,e,r){function n(t,e,r){return t[e].apply(t,r)}var a=t(\"./DragDropAction\"),o={dragStart:function(t,e,r){return n(new a,\"dragStart\",arguments)},dragEnter:function(t,e,r){return n(new a,\"dragEnter\",arguments)},dragOver:function(t,e,r){return n(new a,\"dragOver\",arguments)},dragLeave:function(t,e,r){return n(new a,\"dragLeave\",arguments)},drop:function(t,e,r){return n(new a,\"drop\",arguments)},delay:function(t,e,r){return n(new a,\"delay\",arguments)},DataTransfer:t(\"./DataTransfer\"),DragDropAction:t(\"./DragDropAction\"),eventFactory:t(\"./eventFactory\")};e.exports=o},{\"./DataTransfer\":2,\"./DragDropAction\":3,\"./eventFactory\":4}]},{},[1]);"; ((JavascriptExecutor) SharedBase.getWebDriver()).executeScript("eval(arguments[0]);", fileContents); boolean dragMockExists = (boolean) ((JavascriptExecutor) SharedBase.getWebDriver()).executeScript("return !!window.dragMock;"); if (dragMockExists == false) { throw new InterruptedException("Unable to add the drag mock to the driver"); } ((JavascriptExecutor) SharedBase.getWebDriver()).executeScript("var startEle = document.querySelector('" + startDrag + "'); var endEle = document.querySelector('" + endDrag + "');var wait = 150; window.dragMock.dragStart(startEle).delay(wait).dragEnter(endEle).delay(wait).dragOver(endEle).delay(wait).drop(endEle).then(arguments[arguments.length - 1]);"); }

public static String getWebCSSSelector(WebElement element) {
    final String JS_BUILD_CSS_SELECTOR =
            "for(var e=arguments[0],n=[],i=function(e,n){if(!e||!n)return 0;f" +
                    "or(var i=0,a=e.length;a>i;i++)if(-1==n.indexOf(e[i]))return 0;re" +
                    "turn 1};e&&1==e.nodeType&&'HTML'!=e.nodeName;e=e.parentNode){if(" +
                    "e.id){n.unshift('#'+e.id);break}for(var a=1,r=1,o=e.localName,l=" +
                    "e.className&&e.className.trim().split(/[\\s,]+/g),t=e.previousSi" +
                    "bling;t;t=t.previousSibling)10!=t.nodeType&&t.nodeName==e.nodeNa" +
                    "me&&(i(l,t.className)&&(l=null),r=0,++a);for(var t=e.nextSibling" +
                    ";t;t=t.nextSibling)t.nodeName==e.nodeName&&(i(l,t.className)&&(l" +
                    "=null),r=0);n.unshift(r?o:o+(l?'.'+l.join('.'):':nth-child('+a+'" +
                    ")'))}return n.join(' > ');";

    return (String) ((JavascriptExecutor) SharedBase.getWebDriver()).executeScript(JS_BUILD_CSS_SELECTOR, element);
}

[mratliffncino]

Has this been resolved yet? Thanks.

[dianhua1560]

+1. Having the same issue here, drag and drop doesn't work in Chrome.

Versions:
---- Python 2.7.10
---- nosetest 2.7
---- chromedriver 2.29
---- selenium 3.4.0
---- chrome 58.0.3029.110
---- VM windows 7

[GurekamSidhu]

I don't think it has been resolved, but i managed to kind of implement a hack using Javascript executor on Java and the functions are put in the comments above. I used this to help me https://github.com/andywer/drag-mock

[dianhua1560]

@GurekamSidhu I did see your comments. Unfortunately, I use python to do the tests and if you can update your comment to be more readable that would be great.

Thanks.

[arashkevich25]

I write tests on codeception and too have problem with drag and drop on chrome... who know how I can resolve this issue ?

[zhelanov]

ChromeDriver doesn't yet support the Actions commands. The Java language binding translates the Actions requests into corresponding mouse events before sending them to ChromeDriver, however there is no guarantee the translated mouse events are completely equivalent to the original Actions request.

Source - Chromium bugtracker

[Phil-87]

I had a similar issue after a recent Chrome update. Drag and drop worked with Chrome version 59.0.3071.86, but not 61.0.3163.79. I have found a workaround - the original drag and drop code (C#) was:

Actions builder = new Actions(Driver.Browser.Instance);
IAction dragAndDrop = builder.ClickAndHold(fromElement)
    .MoveToElement(toElement)
    .Release(toElement)
    .Build();
dragAndDrop.Perform();

After the Chrome update, tests which drag elements off the bottom of the screen started failing, but I noticed moving the mouse while the test was running would allow the drag and drop to work. I added a "MoveByOffset" into the actions which fixed the problem, so the working code is:

Actions builder = new Actions(Driver.Browser.Instance);
IAction dragAndDrop = builder.ClickAndHold(fromElement)
    .MoveByOffset(-1, -1)
    .MoveToElement(toElement)
    .Release(toElement)
    .Build();
dragAndDrop.Perform();

I know this isn't a perfect solution but it does seem to fix the problem.

[jenniferdnn]

I tried on Version 61.0.3163.91 chrome, drag and drop by clickAndHold, totally no reaction. I also tried on firefox 55.0.3 , the element moves a little bit, then stops.
Is there any updates for this?

[armitagemderivitec]

I can confirm that the issue exists on the latest versions of Chrome (61.0.3163.91) and the C# nuget packages WebDriver (3.5.2) and ChromeDriver (2.32.0).

Is this being looked at as we are having to disable tests in our CI pipeline?

[spasero]

Thanks @Phil-87 !
This workaround also works with Java language.

[Ocramius]

Experiencing the same issue in PHP after an upgrade of my testing environment, but don't have a way to fix that with the usual Behat\Mink\Driver\Selenium2Driver.

Wondering if a downgrade will do for now...

[philipfong]

I'm experiencing the same thing with Chrome 62 / selenium-webdriver 3.6.0 / chromedriver 2.33

[gayvoronskaya]

And I have the same problem.
drag and drop does not always work. For the lowest element on the page, drag and drop does not occur.
The element is taken and transferred to the right place, but in the right place it is not

[aCarpenter]

Running into this same issue on Chrome 62.0.3202.75 and Chromedriver 2.33.2

[sachinwarang]

@spasero Can you share the java code which worked for you. I tried solution provide by @Phil-87 !!!

Actions builder = new Actions(Driver.Browser.Instance);
IAction dragAndDrop = builder.ClickAndHold(fromElement)
.MoveByOffset(-1, -1)
.MoveToElement(toElement)
.Release(toElement)
.Build();
dragAndDrop.Perform();

[spasero]

@sachinwarang here is my code in Java :
final Actions action = new Actions(mDriver);
action.clickAndHold(eltSource)
.moveByOffset(-1, -1) // To fix issue with drag and drop in Chrome V61.0.3163.79
.moveToElement(eltDestination, eltDestination.getLocation().getX()+eltDestination.getSize().getWidth()/2, eltDestination.getLocation().getY()+eltDestination.getSize().getHeight()/2)
.release(eltDestination)
.build()
.perform();

[sachinwarang]

Thanks @spasero for sharing the code. It doesn't worked for me.
But look like my problem is bit different. In my case, its dragging incorrect element to destination in Chrome browser. Which working fine for firefox.
Any suggestion to set the x,y co-ordinate for Source element just like destination.

[summerflavor]

Is this fixed, being blocked by this.

[dvasilev86]

still reproducible, chrome 64 / selenium 3.8.1 / driver 2.35

[100400824]

这个问题快要折磨死俺了。。。

[oliver-was-here]

Edit

Found a related issue here: https://github.com/SeleniumHQ/selenium/issues/5429

Feel free to disregard this comment. But for posterity.

Original comment

I'm seeing the same issue while running tests in Java that are executed using chromedriver.

Selenium: 3.6.0
ChromeDriver: 2.36
Chrome: 64.0
OS: OSX Sierra, 10.12.6
Java 8

It would appear that the moveTo... and moveBy... do not pass mouse events to chromedriver, but they are instead executed with respect to the position of the OS's cursor (Apologies if this doesn't make sense, I am blissfully ignorant to how cursor events are passed to chromedriver, but I assume that Selenium Actions should have nothing to do with the location of my cursor.)

Here is a partially completed test to reproduce. Set a breakpoint on the moveToElement line. The red list item should appear at the location of your OS's cursor (as it has been "grabbed") and it seems to lose awareness of where it is dropping the element.

Full disclosure this is a cobbled together example that I have not run, but it should be enough info to quickly chalk together a simple test. http://jsbin.com/cujubutovu/edit?html,css,js,output contains simple frontend code to operate on.

System.setProperty("webdriver.chrome.driver", ".../Chrome/2.36/chromedriver.exe");

DesiredCapabilities capabilities = DesiredCapabilities.chrome();
ChromeDriver driver = new ChromeDriver(capabilities);

driver.get("http://jsbin.com/cujubutovu/edit?html,css,js,output");   // simple example frontend

WebElement item1 = driver.findElement(By.id("item-1"));
WebElement item3 = driver.findElement(By.id("item-3"));

Actions actions = new Actions(driver);

actions
   .clickAndHold(item1)
   .moveToElement(item3)      // !!! SET BREAKPOINT HERE !!!
   .release()
   .perform();

[hristo-vrigazov]

How come this is closed when there is a simple case and it does indeed happen?

[lmtierney]

Because it is an issue with Chromedriver and not selenium

[elfia]

Hi,
I see a lot of people commented here, thanks a lot because your comments helped me to solve the drag and drop problem for old Firefox. Here is my solution after one day of experimenting:

`
// the driver

    WebDriver driver = jira().getTester().getDriver();

    // Element which needs to drag.
    WebElement from = driver.findElements(By.tagName("th")).get(1);

    // Element on which need to drop.
    WebElement to = driver.findElements(By.tagName("th")).get(3);

    // Using Action class for drag and drop.
    Actions act = new Actions(driver);

    // drag and drop.
    act.clickAndHold(from).build().perform();
    Timeout.waitFor(1).seconds();
    act.moveToElement(to).build().perform();
    Timeout.waitFor(1).seconds();
    act.moveByOffset(-1, -1).build().perform();
    Timeout.waitFor(1).seconds();
    act.release().build().perform();`

For me the drop part wasn't working. As the from element moves to the target the indication with dashed square for drop doesn't show and on release the from element was going back to its original position. Then I set the act.moveByOffset(-1, -1) right after the act.moveToElement(to) and the dashed square appeared and release() was saved to the new position.
The timeouts are because for some reason (my firefox and selenium are old) it was working only on Debug, but if i just play the test it wasn't working. For you maybe you will not need the Timout.

Thanks again to all the people who posted here!