How to perform drag and drop on HTML5 element using Selenium 3.141.59 + Java

Question

I am unable to perform drag and drop on HTML5 element using Selenium 3.141.59 + java (1.8). I have tried other solutions(through JavaScriptExecutor) as well which are mentioned in this group. But no solutions are working. Could you please help me to provide a concrete solution for my issue.

I am using Selenium(3.141.59) + Java (1.8) + Cucumber Framework + Selenium Grid (4)

I have followed the discussion but it is for python but I need a solution in Java.

As per the comment on your other question, "update the question with the text based relevant HTML and your code trials", in other words what you have tried so far and the results in each case. Otherwise your question is at risk of being closed. — Luke Woodward, Feb 19 '22 at 21:13

undetected Selenium · Answer 1 · 2022-02-22T23:45:35.517

0

To perform dragAndDrop() as an example within the website you need to induce WebDriverWait for the elementToBeClickable() and you can use the following locator strategies:

Using XPATH:

driver.get("http://www.dhtmlgoodies.com/scripts/drag-drop-custom/demo-drag-drop-3.html")
WebElement  drag = new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//div[starts-with(@id, 'box') and text()='Rome']")));
WebElement  drop = new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//div[starts-with(@id, 'box') and text()='South Korea']")));
new Actions(driver).dragAndDrop(drag, drop).build().perform();

edited Feb 22 '22 at 23:45

answered Feb 19 '22 at 21:18

undetected Selenium

183,867
41
278
352

i tried to implement the same as you have mentioned, but it is not working. Are you sure will it work for HTML5 non native / semantic element? – Satyabrata Das Feb 22 '22 at 23:44
@SatyabrataDas There was a typo, corrected it now. Checkout the updated answer and let me know the status. – undetected Selenium Feb 22 '22 at 23:46
yes i knew the typo , so i corrected it by myself and tested as well. But it is not working – Satyabrata Das Feb 22 '22 at 23:48

score 0 · Answer 2 · answered Nov 21 '22 at 03:42

I had the same issue with selenium 4. And I found this javascript works for me. I cannot find the link of the discussion but the code snippet below:

WebElement From = driver.findElement(By.xpath(Source_locator));
WebElement To = driver.findElement(By.xpath(Target_locator));;
    
    //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);

How to perform drag and drop on HTML5 element using Selenium 3.141.59 + Java

2 Answers2