Pricing
TABLE OF CONTENTS
Blog TOC Banner

How To Drag and Drop in Selenium? A Complete Guide

 

Here’s an easy-to-understand and straight-to-the-point guide to drag and drop in Selenium.

 

Command to do drag-and-drop in Selenium

Drag and drop always involves 2 objects: source object (the object that is dropped) and the target object (the destination). Make sure to define those objects before you write the drag-and-drop.
 

Guide 1. Drag and drop in Selenium in Java

The command for you:

Actions actions = new Actions(driver); actions.dragAndDrop(sourceElement, targetElement).perform();

 

Here’s the full example code:

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Actions;

public class DragAndDropExample {
    public static void main(String[] args) {
        // Set the path to your WebDriver
        System.setProperty("webdriver.chrome.driver", "/path/to/chromedriver");

        WebDriver driver = new ChromeDriver();
        driver.get("https://example.com"); // Replace with your target URL

        // Locate the elements to drag and drop
        WebElement sourceElement = driver.findElement(By.id("source-element-id"));
        WebElement targetElement = driver.findElement(By.id("target-element-id"));

        // Perform drag and drop
        Actions actions = new Actions(driver);
        actions.dragAndDrop(sourceElement, targetElement).perform();

        // Close the browser
        driver.quit();
    }
}

 

Guide 2. Drag and drop in Selenium in Python

Here’s the command you need to use:

actions = ActionChains(driver) actions.drag_and_drop(source_element, target_element).perform()

 

In Python, you need to import the ActionChains library to perform drag and drop. Here’s the full code:
 

from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains

# Set the path to your WebDriver
driver = webdriver.Chrome(executable_path='/path/to/chromedriver')

# Open the target webpage
driver.get('https://example.com')  # Replace with your target URL

# Locate the elements to drag and drop
source_element = driver.find_element_by_id('source-element-id')
target_element = driver.find_element_by_id('target-element-id')

# Perform drag and drop
actions = ActionChains(driver)
actions.drag_and_drop(source_element, target_element).perform()

# Close the browser
driver.quit()

 

Guide 3. Drag and drop in Selenium in Javascript

Here’s the command you need to use:
 

let actions = driver.actions({ bridge: true }); await actions.dragAndDrop(sourceElement, targetElement).perform(); } finally { await driver.quit(); }

 

Here’s a full example: 
 

const { Builder, By } = require('selenium-webdriver');
const { Actions } = require('selenium-webdriver/lib/input');

async function dragAndDrop() {
    let driver = await new Builder().forBrowser('chrome').build();

    try {
        await driver.get('https://example.com'); // Replace with your target URL

        let sourceElement = await driver.findElement(By.id('source-element-id'));
        let targetElement = await driver.findElement(By.id('target-element-id'));

        let actions = driver.actions({ bridge: true });
        await actions.dragAndDrop(sourceElement, targetElement).perform();
    } finally {
        await driver.quit();
    }
}

dragAndDrop();

 

Guide 4. Drag and drop objects in Katalon Studio

In the Katalon Studio, you can leverage keyword libraries to do the drag-and-drop for you instead of writing code. 
 

Download and Start Testing With Katalon For Free 
 

Let’s give our test case a name, a description, and some tags to categorize it:

How to create a new test case in Katalon Studio
 

Katalon follows the Page Object Model framework. All test objects are stored in a centralized Object Repository that you can access whenever you want. As you can see here, we are testing the HTML5 Demo Drag and Drop page. In this page, there are 5 objects that will be dropped into the bin.

 

Test cases are stored in Katalon's Object Repository in a hierarchical fashion
 

As you capture and add more and more objects to the Repository, test authoring becomes easier and faster. Test suites, data files, and test reports are also stored here for a unified view.
 

To capture those objects, you can navigate to the Spy Web utility on the nav bar of Katalon Studio:

Spy Web utility in Katalon Studio
 

Enter the URL of the webpage you want to capture objects, choose your desired browser, and click Start.

Object Spy in Katalon Studio to capture objects
 

Katalon then opens up an instance of the browser for you. As you right-click on an object (or hover on it then press Alt + ` on Windows or Options + ` on Mac), you capture it into Katalon Studio’s Object Repository. 

Capture Object in Katalon Studio for drag-and-drop test creation
 

Click Save and you are ready to create any tests with these objects.

Captured objects are stored in Katalon's Object repository
 

Now you can start to leverage Katalon’s extensive keyword library to craft a full test case. Simply choose Add to browse keywords. Here we are using:

  1. OpenBrowser: open up a browser to a certain URL (which is https://ui.vision/demo/webtest/dragdrop in our case)
  2. Drag And Drop By Offset: drag the object (a_one) by a certain number of pixels (which is -300 pixels horizontally and 0 pixel vertically)
  3. Verify Element Not Present: check that the object we’ve just dropped has disappeared
  4. CloseBrowser: close the browser, clean the environment, and exit the test.

You may notice that we are using the same pair of 2nd and 3rd keywords for 5 objects. You can effortlessly drag-and-drop the objects from the Object Repository and put them in the IDE to create this test case.
 

Katalon keywords to drag and drop in Selenium
 

Now let’s run the test case:


Start Testing With Katalon Today