Drag and drop hierarchical list using selenium webdriver in java
Drag and drop hierarchical list using selenium webdriver in java
Github link: https://github.com/dbushell/Nestable
Demo link:- http://dbushell.github.io/Nestable/
I want to drag and drop a hierarchical list using selenium webdriver in java. See the demo link for more details.
I have tried the following things: -
- Get the original item
- Create a div with class = dd-placeholder
- Drag the original element and drop the newly created div element
Error: - Unable to delete original element of newly created div element.
How can i do this. Is it possible to use selenium webdriver.
Note: See demo link
source to share
I found that the drag and drop functionality is slightly different depending on which browser you are using, and I had to add an offset to the drop location to make it work in Chrome Firefox and IE consistently.
This is a C # snippet, but java should be similar. The target in this case is a placeholder div that I inserted with JS, just like your approach
Actions act = new Actions(WebDriver);
act.ClickAndHold(source);
act.MoveToElement(target);
act.MoveByOffset(0, 5); //Minimum 1 pixel offset for Chrome, 5 for IE
act.Release(source);
act.Build().Perform();
source to share
This method drags and removes a web element from location to another using Javascript. Don't mess with your javascript :). Just use this method by specifying and from parameters. 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);
}
source to share