Drag and Drop not working with chrome webdriver in java

Question

Enter image description here I have the following code for drag and drop an item from one location to another location

By sourceLocatorDragAndDrop = By.cssSelector("#available_objects_parent tbody tr td:eq(4)");

By destinationLocatorDragAndDrop = By.cssSelector("#assigned_objects_parent table tbody");

Actions action = new Actions(webDriver);   

action.dragAndDrop(webDriver.findElement(sourceLocatorDragAndDrop) ,webDriver.findElement(destinationLocatorDragAndDrop)).build().perform();

This code gives the following error:

org.openqa.selenium.InvalidSelectorException: invalid selector: An invalid or illegal selector was specified (Session info: chrome=74.0.3729.131) (Driver info: chromedriver=2.46.628402 (536cd7adbad73a3783fdc2cab92ab2ba7ec361e1),platform=Windows NT 10.0.17134 x86_64) (WARNING: The server did not provide any stacktrace information)

Can anyone tell how to fix this issue?

if this is popup or dialog box , Please use Thread.sleep(millis); for small time as , popup or dialog box take time to render , mean while for xpath you copy from browser id not valid , once your dialog box or popup render your code will work fine — Amit Rai, May 15 '19 at 04:46

score 3 · Answer 1 · answered May 15 '19 at 05:13

You can use JavaScript also:-

Because in HTML5 Action draganddrop function is not working,I use javascript and its working fine for me:-

    WebElement From = driver.findElement(By.id("sourceImage"));
    WebElement To = driver.findElement(By.id("targetDiv"));

    //HTML 5 
    final String java_script =
            "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);";

    ((JavascriptExecutor)driver).executeScript(java_script, From, To);

And using Actions the code is below:-

WebElement From = driver.findElement(By.id("sourceImage"));
WebElement To = driver.findElement(By.id("targetDiv"));

Actions builder = new Actions(driver);
Action dragAnddrop = builder.clickAndHold(From)
                        .moveToElement(To)
                        .release(To)
                        .build();
dragAnddrop.perform();

Use firefox IDE for finding xpath. For more information go through this link.

I am getting the below error for the second snippet which is with Actions. any clue why this happens.. org.openqa.selenium.WebDriverException: unknown error: Element is not clickable at point (472, 9041) — Piyum Rangana, May 15 '19 at 15:15
because of element is not visible to click or the page is getting refreshed before it is clicking the element or the element is click able but there is a spinner/overlay on top of it ... go through this link https://stackoverflow.com/a/19763087/4513879 — Pradnya Bolli, May 16 '19 at 04:28
This is great - your javascript solution using the JavaScriptExecutor is what I used. I am using Selenium in C# instead of Java, but its pretty much the same. One correction though - in the JS, **this.types.append** should actually be **this.types.push** (as this.types is an array in the JS, and so should use push) — Clay, May 23 '19 at 22:20

score 1 · Answer 2 · answered May 15 '19 at 04:29

1

It seems you are using wrong cssSelector. You always can validate xpath in chrome developer options. Please go through below link. Please provide html code for the sourceLocatorDragAndDrop and destinationLocatorDragAndDrop so that we can understand what went wrong.

https://yizeng.me/2014/03/23/evaluate-and-validate-xpath-css-selectors-in-chrome-developer-tools/

answered May 15 '19 at 04:29

Shyamk327

26
7

This should be more of a comment. – cruisepandey May 15 '19 at 04:32
1

Sorry for that, I don't have privilege to comment, as I am a new contributor. So I gave suggestion to validate cssselector. – Shyamk327 May 15 '19 at 04:33

score 1 · Answer 3 · answered May 15 '19 at 04:46

1

:eq() is a JQuery selector, not cssselector. Selenium doesn't recognize it. The closest match is :nth-child()

By sourceLocatorDragAndDrop = By.cssSelector("#available_objects_parent tbody tr td:nth-child(4)");

answered May 15 '19 at 04:46

Guy

46,488
10
44
88

score 0 · Answer 4 · edited Jun 28 '21 at 18:35

0

For C#, I used this code based on the help of @Pradnya Bolli above, and it works well:

Actions act = new Actions(Driver);
Actions myDragAndDrop = (Actions)act.ClickAndHold(From).MoveToElement(To).Release(To).Build();
myDragAndDrop.Perform();

edited Jun 28 '21 at 18:35

Oliver Jan Krylow

1,758
15
22

answered Jun 28 '21 at 10:33

Vu Nguyen

1

Dheeraj · Answer 5 · 2020-12-02T21:21:36.337

-1

I also tried different options. Eventually this one worked. Actions actions = new Actions(driver); actions.clickAndHold().moveByOffset(0, 100).moveToElement(, 0, 100).release().build().perform(); Thread.sleep(3000);

Added sleep to wait for element to be dragged before starting further actions.

edited Dec 02 '20 at 21:21

answered Dec 02 '20 at 05:09

Dheeraj

1
1

Drag and Drop not working with chrome webdriver in java

5 Answers5