Software Development

Selenium Drag And Drop Example

Drag-and-drop is a common user interface action in web applications that involves selecting an element and moving it to another location. Selenium WebDriver provides support for simulating drag-and-drop interactions using the Actions class. This article will demonstrate how to implement drag-and-drop in Selenium with Java, covering the key steps and providing code examples.

1. What is Drag and Drop in Selenium?

Drag and drop in Selenium refers to automating the action of selecting an element, dragging it to a new location, and dropping it there. This is achieved using the Actions class, with methods like dragAndDrop(), clickAndHold(), and moveToElement(). It is commonly used to test interactive UI elements such as sortable lists, file uploads, or draggable components, ensuring that the drag-and-drop functionality works correctly across different browsers.

2. Setting Up Your Selenium Environment

Before exploring the drag-and-drop functionality, you must have a Java IDE like Netbeans IDE, IntelliJ IDEA, or Eclipse, the Selenium WebDriver dependencies included in your project, and a browser driver such as ChromeDriver properly installed.

Here is a simple Maven dependency for Selenium:

<dependency>
    <groupId>org.seleniumhq.selenium</groupId>
    <artifactId>selenium-java</artifactId>
    <version>4.27.0</version>
</dependency>
<dependency>
    <groupId>io.github.bonigarcia</groupId>
    <artifactId>webdrivermanager</artifactId>
    <version>5.9.2</version>
</dependency>

3. Example: Drag and Drop in Selenium

In this article, we are using the demo page from https://jqueryui.com/droppable/ to perform and test the drag-and-drop functionality. The following code sets up a Selenium WebDriver instance, navigates to the test page containing drag-and-drop elements, and initializes the Actions class.

public class SeleniumDragAndDropDemo {

    public static void main(String[] args) {
        // Initialize the WebDriver
        WebDriver driver = new ChromeDriver();
        try {
            // Navigate to the drag-and-drop demo page
            driver.get("https://jqueryui.com/droppable/");
            driver.manage().window().maximize();

            // Switch to the iframe containing the draggable elements
            driver.switchTo().frame(driver.findElement(By.className("demo-frame")));

            // Locate the draggable and droppable elements
            WebElement source = driver.findElement(By.id("draggable"));
            WebElement target = driver.findElement(By.id("droppable"));

            // Initialize the Actions class
            Actions actions = new Actions(driver);

            // Perform drag-and-drop action
            actions.dragAndDrop(source, target).perform();
            System.out.println("Drag-and-drop action performed successfully!");
        } finally {
            driver.quit();
        }
    }
}

This code initializes a Selenium WebDriver using ChromeDriver and navigates to the drag-and-drop demo page. After maximizing the browser window, it switches to an iframe containing the draggable elements using the driver.switchTo().frame() method. The draggable and droppable elements are located using driver.findElement() with their respective IDs, “draggable” and “droppable”.

The Actions class is then initialized to simulate the drag-and-drop action, with the dragAndDrop() method applied to the source (draggable element) and target (droppable element). After performing the action with perform(), a success message is printed. Finally, the driver.quit() method ensures the browser is closed once the operation completes, even if an exception occurs.

4. Example: Using Click-and-Hold for Drag-and-Drop

In some scenarios, the dragAndDrop() method might not work due to custom JavaScript implementations on the webpage. In such cases, we can use the clickAndHold(), moveToElement(), and release() methods to achieve the same result.

// Perform drag-and-drop using click-and-hold
actions.clickAndHold(source)
       .moveToElement(target)
       .release()
       .build()
       .perform();

In the above code snippet, the clickAndHold() method starts a click-and-hold action on the source element, followed by moveToElement() which moves the cursor to the target element. The release() method then releases the mouse button, completing the drag and drop process. Finally, build() constructs the action chain, and perform() executes the entire action sequence.

5. Conclusion

In this article, we explored how to implement drag-and-drop functionality in Selenium using the Actions class. We covered the essential steps, including initializing the WebDriver, locating draggable and droppable elements, and performing the drag-and-drop action using methods like dragAndDrop(), clickAndHold(), and moveToElement(). By automating drag-and-drop actions, Selenium enables efficient and reliable testing of web applications, ensuring that dynamic elements behave as expected across various browsers.

6. Download the Source Code

This article focused on implementing drag-and-drop actions using Selenium.

Download
You can download the full source code of this example here: selenium drag and drop

Omozegie Aziegbe

Omos Aziegbe is a technical writer and web/application developer with a BSc in Computer Science and Software Engineering from the University of Bedfordshire. Specializing in Java enterprise applications with the Jakarta EE framework, Omos also works with HTML5, CSS, and JavaScript for web development. As a freelance web developer, Omos combines technical expertise with research and writing on topics such as software engineering, programming, web application development, computer science, and technology.
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Back to top button