拖放无法在 Java 中使用 chrome webdriver

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?

Answer 1

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.

Answer 2

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/

Answer 3

: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)");

Answer 4

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.

Answer 5

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();