element is dragged correctly but not dropped at the specified target instead, displayed with the mouse pointer

[Nishant-Taksande]

🐛 Bug Report

I am using Actions class for doing drag and drop via below methods:
dragAndDrop(From, To);
dragAndDropBy(From, X, Y);
clickAndHold(From).moveToElement(To).build().perform();

Source element is dragged correctly but not dropped at the locations specified by "To" / "X,Y"

Mac:Chrome: Dragged item is displayed along with the mouse pointer.
Win: Chrome: Nothing is displayed (Drag / drop)

Video of script execution with audio, please check

https://monosnap.com/file/28tj483msnno2lwMCZKZvvTdarGNEI

To Reproduce

Please find below script code

Test script or set of commands reproducing this issue

System.setProperty("webdriver.chrome.driver", "driver78");
driver = new ChromeDriver();
driver.get("https://www.seleniumeasy.com/test/drag-and-drop-demo.html");
From = driver.findElement(By.xpath("//div[@id='todrag']//span[text()='Draggable 1']"));
To = driver.findElement(By.xpath("//div[@id='mydropzone']"));

AppLibrary.sleep(3000);
Actions act = new Actions(driver);
act.dragAndDrop(From, To).build().perform();

AppLibrary.sleep(3000);
Actions act1 = new Actions(driver);
act1.clickAndHold(From).moveToElement(To).build().perform();

Environment

OS: Win, OS X
Browser: Chrome 77-78, FireFox 70
Language Bindings version: <2.53.0 - 4.0.0-alpha-3>

[stevepryde]

I am having this exact issue. I've spent hours trying to debug this and haven't made any progress.

Selenium docker image: selenium/standalone-firefox-debug:3.141.59-zinc (same with the chrome one)
OS: Manjaro Linux - up-to-date
python: 3.8, selenium 3.141.0 python lib

I get the same behaviour using both the python lib and my Rust lib thirtyfour (I'm trying to write tests for it, but drag and drop isn't working properly due to this issue).

elem1 = driver.find_element_by_id("dragitem1")
elem2 = driver.find_element_by_id("dragdrop-result")
ac = ActionChains(driver).drag_and_drop(elem1, elem2).perform()

Drag and drop works fine outside of selenium if I do it manually in either Chrome or Firefox (both Linux). But it does not work via selenium.

As the above post says:

1. it begins dragging ok
2. then the dragged item appears where the actual visible mouse cursor happens to be rather than the drop location
3. it does not drop the item
4. if I manually move the mouse while the automation is running, the dragged item is still attached to the mouse cursor, until I click the left mouse button.

[Nishant-Taksande]

@stevepryde
can you share what gui toolkit is used by your application

• if it is HTML5, i have a complex workaround which works.
  example:
  http://the-internet.herokuapp.com/drag_and_drop

• if it is in vue.js nuxt, it won't work
  example:
  https://sortablejs.github.io/Vue.Draggable/#/simple

[stevepryde]

I'm using yew (rust/wasm framework) but otherwise the front-end is not using any other framework. I'm also using purecss.io but I don't think that is the problem.

[adrianer]

Same as #7782 ?

[stevepryde]

@adrianer yes I think it is

[nidhidadwal]

I am having the same issue with Selenium tests using Java on Chrome browser where I am using actions.dragAndDrop(sourceElement,targetElement).perform();

Source element is dragged correctly but dropped where ever the mouse cursor is . If some how I can make it work on the browser it will still fail when I run test as headless which the ultimate requirement for the test.

[Danc2050]

I have this issue at my work as well... so far I have only tried out the IDE piece of it.

[v3g3t4x]

News on this issue? I have the same with Java + Chrome and Firefox. It's a Selenium issue or a Chrome issue?

[Danc2050]

@v3g3t4x I used Pom Builder to find a better XPath and it solved my issue...but the issue still exists in Chrome and/or Selenium. To clarify, my original version is 84.0.4147.125 and I am using the Selenium IDE.

[v3g3t4x]

My xpath is correct...I think it's a more complex issue. I open new issue with 2 example, please check #8624

[AutomatedTester]

Duplicate of #8003