CODEWITHSUNDEEP
javaseleniumselenium-webdriverdrag-and-drop
user9218893
user9218893

Reputation: 11

Java - drag and drop not working on selenium 3.8

drag and drop not working on selenium 3.8.

Here is the JS code for the element

This is what I have tried. But it is only selecting the element. Hold and drop is not happening.

WebElement source = driver.findElement(By.xpath("//tbody[@class ='lt-body']//tr[@data-test-id='table-row-id-20']//td[contains(@id,'ember')]//div[contains(@id,'ember')]//*[name()='svg']//*[name()='ellipse']"));
WebElement destination = driver.findElement(By.xpath("//tbody[@class ='lt-body']//tr[@data-test-id='table-row-id-3']//td[contains(@id,'ember')]//div[contains(@id,'ember')]//*[name()='svg']//*[name()='ellipse']"));

Actions builder = new Actions(driver);
int x2 =destination.getLocation().getX();
int y2 = destination.getLocation().getY();
builder.clickAndHold(source);
builder.moveByOffset(x2,y2);
builder.moveToElement(destination);
builder.release();
builder.perform();

Tried this one as well.

builder.clickAndHold(source).moveByOffset(x2,y2).moveToElement(destination).release().build().perform();

Tried with Robot as well. Everytime I can only see both source and destination element getting selected. But not dragged and dropped.

Also tried dragAndDrop of ActionsChain. That too didn't work.

Upvotes: 1

Views: 762

Answers (1)

Chuchoo
Chuchoo

Reputation: 842

Use the following javascript based method.This is very neat way to drag and drop provided two elements are given. This works almost every time. Good luck.

public void dragAndDrop(WebElement from, WebElement to) {
        js.executeScript("function createEvent(typeOfEvent) {\n" + "var event =document.createEvent(\"CustomEvent\");\n"
                + "event.initCustomEvent(typeOfEvent,true, true, null);\n" + "event.dataTransfer = {\n" + "data: {},\n"
                + "setData: function (key, value) {\n" + "this.data[key] = value;\n" + "},\n"
                + "getData: function (key) {\n" + "return this.data[key];\n" + "}\n" + "};\n" + "return event;\n"
                + "}\n" + "\n" + "function dispatchEvent(element, event,transferData) {\n"
                + "if (transferData !== undefined) {\n" + "event.dataTransfer = transferData;\n" + "}\n"
                + "if (element.dispatchEvent) {\n" + "element.dispatchEvent(event);\n"
                + "} else if (element.fireEvent) {\n" + "element.fireEvent(\"on\" + event.type, event);\n" + "}\n"
                + "}\n" + "\n" + "function simulateHTML5DragAndDrop(element, destination) {\n"
                + "var dragStartEvent =createEvent('dragstart');\n" + "dispatchEvent(element, dragStartEvent);\n"
                + "var dropEvent = createEvent('drop');\n"
                + "dispatchEvent(destination, dropEvent,dragStartEvent.dataTransfer);\n"
                + "var dragEndEvent = createEvent('dragend');\n"
                + "dispatchEvent(element, dragEndEvent,dropEvent.dataTransfer);\n" + "}\n" + "\n"
                + "var source = arguments[0];\n" + "var destination = arguments[1];\n"
                + "simulateHTML5DragAndDrop(source,destination);", from, to);

    }

Upvotes: 1

Related Questions