2

In several threads here, there is a work-around posted for selenium drag and drop with pages that use HTML5 for drag and drop. This work-around involves using javascript to simulate the drag and drop, for example Unable to perform HTML5 drag and drop using javascript for Selenium WebDriver test, and https://gist.github.com/rcorreia/2362544. This solution works well on this page, http://the-internet.herokuapp.com/drag_and_drop.

The general approach is to read the javascript file here (https://gist.github.com/rcorreia/2362544#file-drag_and_drop_helper-js) into a string, referred to as 'jsfile' below.

then in selenium (with java), pass in the css selectors for the source and the destination, where #column-a is the id of the source and #column-b is the target.

 ((JavascriptExecutor) driver).executeScript(jsfile +"$('#column-a').simulateDragDrop({ dropTarget: '#column-b'});");

It works like a champ on that page.

However, a similar approach does not seem to work on this page, https://crossbrowsertesting.github.io/drag-and-drop.html. Nothing happens when I run

 ((JavascriptExecutor) driver).executeScript(jsfile +"$('#draggable').simulateDragDrop({ dropTarget: '#droppable'});");

I have pages that seem to behave like this second page (eg no drag and drop). As a first step in understanding this, I'd like to get an idea why this approach does not seem to work in the latter case here.

JackhammersForWeeks
  • 955
  • 1
  • 9
  • 21
  • HI @JackhammersForWeeks same questions asked many times but no proper answer see below questions [https://stackoverflow.com/questions/61316093/using-actions-able-to-select-element-but-not-able-drag-element-to-particular-loc](https://stackoverflow.com/questions/61316093/using-actions-able-to-select-element-but-not-able-drag-element-to-particular-loc) [https://stackoverflow.com/questions/60939363/selenium-java-drag-and-drop-trying-to-drag-and-drop](https://stackoverflow.com/questions/60939363/selenium-java-drag-and-drop-trying-to-drag-and-drop) – Mani Apr 21 '20 at 07:45

1 Answers1

0

On re-testing https://crossbrowsertesting.github.io/drag-and-drop.html, it looks like the straight-forward use of the Actions class does the trick for drag and drop. In the particular app that I am testing, which is set up with some additional code to help with accessibility, I was able to get drag and drop happening by setting focus on the first element and hitting the return key, then setting the focus on the target element and hitting return again. I am fairly sure that this is custom event handling, so may not work in other applications. Just in case, I've posted code here which does this in selenium.

 public void dndHtml5(String xPathSource, String xPathDestination) {
    clickEnterKeyOnElement(xPathSource);
    clickEnterKeyOnElement(xPathDestination);
}

public void clickEnterKeyOnElement(String xPath) {
    setFocusOnElement(xPath);
    WebElement target=element(xPath);
    target.sendKeys(Keys.ENTER);
}

public void setFocusOnElement(String xPath) {
    WebElement element = element(xPath);
    Actions actions = new Actions(driver);
    actions.moveToElement(element).build().perform();
}

public WebElement element(String xPath){
    return driver.findElementByXPath(xPath);
}
JackhammersForWeeks
  • 955
  • 1
  • 9
  • 21
  • Would you like to try on "https://www.seleniumeasy.com/test/drag-and-drop-demo.html", I've been following questions on SO that involves drag and drop and I've been trying to achieve this in the afore mentioned link but in vain. I've tried using the Action class, custom JS executors and all efforts in vain. I'd be delighted to see drag and drop working in the given link – Wilfred Clement Apr 22 '20 at 18:11
  • I tried, but no luck on seleniumeasy.com/test/drag-and-drop-demo.html. Using rcorreia's JS. I'm able to drag the items from the draggable list, but they appear as undefined in the list of dropped items. As you indicated, the Actions class did not do the job either. Seems like some other sort of custom JS drag and drop method is needed, but I don't have much idea how to approach it. Here is a page with html5 drag and drop, https://www.w3schools.com/html/html5_draganddrop.asp, and rcorreia's jS works well, passing in "div#div1 img" for the draggable element, and #div2 for the target. – JackhammersForWeeks Apr 22 '20 at 23:40
  • Second thats, The drag and drop of Actions class work for some pages and so does rcorreia's JS script as well, I am really surprised why its hard to achieve this on seleniumeasy site but seems like both of us hit a dead end and we'll wait until someone gets it working. Thanks for the try :) – Wilfred Clement Apr 23 '20 at 09:11