Drag and Drop in Selenium

Selenium WebDriver is a powerful tool that is widely used for web application testing. It has many features that make it an excellent choice for testing web applications, including the ability to automate drag and drop operations. In this article, we will explore the basics of drag and drop in Selenium WebDriver.

Drag and Drop in Selenium

Drag and drop is a common interaction pattern in modern web applications. It involves clicking and holding an element with the mouse cursor, moving it to a new location, and then releasing it. Drag and drop testing is the process of testing this interaction pattern to ensure that it works as expected.

Selenium WebDriver provides a simple and intuitive way to automate drag and drop testing. It offers several methods that allow you to simulate drag and drop interactions using the mouse cursor. In the following sections, we will explore the different methods provided by WebDriver for drag and drop testing.

Ways to drag and drop in Selenium

Method 1: Using Actions Class

The Actions class in Selenium WebDriver provides a way to simulate complex user interactions, including drag and drop operations. It allows you to create a sequence of actions that can be executed on a web page. To use the Actions class for drag and drop testing, you need to create an instance of the class and then use its dragAndDrop() method.

Here’s an example of using the Actions class for drag and drop testing:

Actions actions = new Actions(driver);
WebElement source = driver.findElement(By.id("source"));
WebElement target = driver.findElement(By.id("target"));
actions.dragAndDrop(source, target).build().perform();

In this example, we create an instance of the Actions class and then use its dragAndDrop() method to simulate a drag and drop operation. We specify the source and target elements using their IDs, which are obtained using the By.id() method. Finally, we call the build() method to create the sequence of actions and the perform() method to execute them.

Method 2: Using DragAndDrop() Method

The DragAndDrop() method is a simple and intuitive way to perform drag and drop operations in Selenium WebDriver. It allows you to specify the source and target elements using their IDs, and then simulates the drag and drop interaction.

Here’s an example of using the DragAndDrop() method for drag and drop testing:

WebElement source = driver.findElement(By.id("source"));
WebElement target = driver.findElement(By.id("target"));
Actions builder = new Actions(driver);
builder.clickAndHold(source).moveToElement(target).release().build().perform();

In this example, we use the DragAndDrop() method to simulate a drag and drop operation. We specify the source and target elements using their IDs, which are obtained using the By.id() method. We then use the Actions class to create a sequence of actions that simulate the click and hold, move to the target, and release interactions. Finally, we call the build() method to create the sequence of actions and the perform() method to execute them.

Method 3: Using JavaScriptExecutor

The JavaScriptExecutor interface in Selenium WebDriver allows you to execute JavaScript code on a web page. It provides a way to simulate drag and drop interactions using JavaScript code.

Here’s an example of using the JavaScriptExecutor interface for drag and drop testing:

JavascriptExecutor js = (JavascriptExecutor) driver;
WebElement source = driver.findElement(By.id("source"));
WebElement target = driver.findElement(By.id("target"));
String script = "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) {\event.data[key] = value;\n" +
"},\n" +
"getData: function (key) {\n" +
"return event.data[key];\n" +
"}\n" +
"};\n" +
"return event;\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" +
"function simulateDragAndDrop(sourceNode, destinationNode) {\n" +
"var dragStartEvent = createEvent('dragstart');\n" +
"dispatchEvent(sourceNode, dragStartEvent);\n" +
"var dropEvent = createEvent('drop');\n" +
"dispatchEvent(destinationNode, dropEvent, dragStartEvent.dataTransfer);\n" +
"var dragEndEvent = createEvent('dragend');\n" +
"dispatchEvent(sourceNode, dragEndEvent, dropEvent.dataTransfer);\n" +
"}\n" +
"var source = arguments[0];\n" +
"var target = arguments[1];\n" +
"simulateDragAndDrop(source, target);";
js.executeScript(script, source, target);

In this example, we use the JavaScriptExecutor interface to execute a custom JavaScript function that simulates a drag and drop operation. The function creates three custom events: dragstart, drop, and dragend. It then dispatches these events on the source and target elements using the dispatchEvent() method. Finally, we call the simulateDragAndDrop() function and pass the source and target elements as arguments.

Difference between Drag and Drop vs Action Class Build

Methods of Action Class

The Actions class in Selenium provides a variety of methods for performing complex interactions with web elements. Here are some of the most commonly used methods of the Actions class:

1. click(): Clicks on the specified web element.

2. sendKeys(): Sends the specified keys to the active element on the page.

3. moveToElement(): Moves the mouse pointer to the center of the specified element.

4. contextClick(): Performs a right-click on the specified element.

5. doubleClick(): Performs a double-click on the specified element.

6. dragAndDrop(): Drags an element from its current position to the center of another element, then drops it.

7. dragAndDropBy(): Drags an element from its current position by the specified offset and drops it.

8. keyDown(): Presses a specified key down on the keyboard.

9. keyUp(): Releases a specified key on the keyboard.

Conclusion

In conclusion, drag and drop is an important aspect of web application testing. Selenium WebDriver provides several methods that allow you to automate drag and drop. The Actions class, DragAndDrop() method, and JavaScriptExecutor interface are all effective ways to simulate drag and drop interactions. By using these methods, you can ensure that your web application works as expected and provides a great user experience.