WebDriver Drag-and-Drop does not work on the page

Question

I have a very simple test

 @Test
 void dragAndDrop()
 {
     driver.get("https://www.testandquiz.com/selenium/testing.html");
     driver.manage().window().maximize();
     WebElement source = driver.findElement(By.id("sourceImage"));
     WebElement target = driver.findElement(By.id("targetDiv"));
     builder.dragAndDrop(source, target).perform();
 }

The test passes without any exceptions. However, it does not perform drag-and-drop. I tried on Chrome, Firefox, and Edge. Appreciate any help.

Thank you, Wilfred. It works. However, it's complicated solution. I'm not good in JavaScript. I'm wondering, can we stay within Java?.Once again, thank you for your help. — Vladimir, Jun 25 '20 at 08:04
Selenium will have to give us a fix for this, until then we have to use the JS way, Also this isn't as complicated as you think. You just have to use the script and you don't have to necessarily know what's inside and how it works. — Wilfred Clement, Jun 25 '20 at 08:18

undetected Selenium · Answer 1 · 2020-06-25T13:16:10.710

The HTML of the WebElement which you want to dragAndDrop() contains the attribute draggable=true

draggable

draggable is a attribute that indicates whether an element can be dragged, either with native browser behavior or the HTML Drag and Drop API. draggable can have the following values:

true: the element can be dragged.
false: the element cannot be dragged.

If this attribute is not set, its default value is auto which means drag behavior is the default browser behavior: only text selections, images, and links can be dragged. For other elements, the event ondragstart must be set for drag and drop to work.

Native HTML5 Drag and Drop

Eric Bidelman in the article Native HTML5 Drag and Drop mentioned, making an object draggable is simple as you only need to set the draggable=true attribute on the element you want to make moveable. As an example:

<div id="cols">
  <div class="col" draggable="true"><header>X</header></div>
  <div class="col" draggable="true"><header>Y</header></div>
  <div class="col" draggable="true"><header>Z</header></div>
</div>

To enable other types of content to be draggable you can leverage the HTML5 DnD APIs. However, using CSS3 you can spruce up the markup to look like columns and adding cursor gives users a visual indicator that something is moveable but most browsers will create a ghost image of the content being dragged and draggable won't do anything. Some browser, FF in particular will require that some data be sent in the drag operation.

Further, Remy Sharp in the article Dragging Anything mentioned:

The HTML 5 spec says it should be as simple as adding the following attributes to the markup of the elements in question:

draggable="true"

However, this doesn’t work completely for Safari or Firefox. For Safari you need to add the following style to the element:

[draggable=true] {
  -khtml-user-drag: element;
}

This will start working in Safari, and as you drag it will set a default, empty value with the dataTransfer object. However, Firefox won’t allow you to drag the element unless you manually set some data to go with it.

Thank you for the long comment. I still did not get how to fix drag-and-drop in my code. Both elements have the following code: — Vladimir, Jun 25 '20 at 07:30
@Vladimir I saw the HTML, it contains `draggable="true"`. You need to wait for the fix to be available. At this point I would avoid suggesting a JS based workaround which would be an overkill. — undetected Selenium, Jun 25 '20 at 07:35

Wilfred Clement · Accepted Answer · 2020-06-25T07:19:41.177

There are issues with Drag and Drop in Selenium interacting with HTML5, I've tried using the following Actions class methods on HTML5 pages but they never seem to work

dragAndDrop() | clickAndHold() | moveToElement() | release()

On the other hand you can use a JS script

String filePath = "C:\\Users\\Wilfred\\Desktop\\drag_and_drop_helper.js";
        StringBuffer buffer = new StringBuffer();

        String line;
        BufferedReader br = new BufferedReader(new FileReader(filePath));
        while ((line = br.readLine()) != null)
            buffer.append(line);

        String javaScript = buffer.toString();
        javaScript = javaScript + "$('#sourceImage').simulateDragDrop({ dropTarget: '#targetDiv'});";
        ((JavascriptExecutor) driver).executeScript(javaScript);

The same method doesn't work on this link and we had to resort to robot class which I wouldn't suggest. You can find more information here

WebDriver Drag-and-Drop does not work on the page

2 Answers2

draggable

Native HTML5 Drag and Drop

Linked