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 drop) and the target object (the destination). Make sure to define those target 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 representative 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 family DragAndDropExample {& nbsp; & nbsp; & nbsp; public static void main (String [] args) {& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; // Set the path to your WebDriver & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; System.setProperty (`` webdriver.chrome.driver '', `` /path/to/chromedriver ''); & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; WebDriver driver = new ChromeDriver (); & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; driver.get (`` https: //example.com ''); // Replace with your quarry URL & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; // Locate the factor to drag and drop & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; WebElement sourceElement = driver.findElement (By.id (`` source-element-id '')); & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; WebElement targetElement = driver.findElement (By.id (`` target-element-id '')); & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; // Perform drag and drop & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; Actions actions = new Actions (driver); & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; actions.dragAndDrop (sourceElement, targetElement) .perform (); & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; // Close the browser & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; driver.quit (); & nbsp; & nbsp; & nbsp;}}

Guide 2. Drag and driblet 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 itinerary to your WebDriver driver = webdriver.Chrome (executable_path='/path/to/chromedriver ') # Open the target webpage driver.get ('https: //example.com ') & nbsp; # Replace with your target URL # Locate the element 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 driblet actions = ActionChains (driver) actions.drag_and_drop (source_element, target_element) .perform () # Close the browser driver.quit ()

Guide 3. Drag and fall in Selenium in Javascript

Here ’ s the bid you need to use:
 

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

SUSA automates exploratory testing with persona-driven behavior, catching bugs that scripted automation misses.

Here ’ s a full example: & nbsp;
 

const {Builder, By} = require ('selenium-webdriver '); const {Actions} = require ('selenium-webdriver/lib/input '); async function dragAndDrop () {& nbsp; & nbsp; & nbsp; let driver = await new Builder () .forBrowser ('chrome ') .build (); & nbsp; & nbsp; & nbsp; try {& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; await driver.get ('https: //example.com '); // Replace with your target URL & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; let sourceElement = await driver.findElement (By.id ('source-element-id ')); & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; let targetElement = await driver.findElement (By.id ('target-element-id ')); & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; let actions = driver.actions ({bridge: true}); & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; await actions.dragAndDrop (sourceElement, targetElement) .perform (); & nbsp; & nbsp; & nbsp;} finally {& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; await driver.quit (); & nbsp; & nbsp; & nbsp;}} dragAndDrop ();

Guide 4. Drag and drop objects in Katalon Studio

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

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

Katalon follows the Page Object Model framework. All examination objects are store in a centralized Object Repository that you can entree whenever you want. As you can see here, we are try the & nbsp;HTML5 Demo Drag and Drop & nbsp;page. In this page, there are 5 target that will be dropped into the bin.

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

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

Enter the URL of the webpage you want to capture objects, choose your desired browser, and chink & nbsp;Start.

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

Click & nbsp;Save & nbsp;and you are ready to create any tests with these aim.

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

1. OpenBrowser: open up a browser to a certain URL (which is & nbsp;https: //ui.vision/demo/webtest/dragdropin our case)
2. Drag And Drop By Offset: drag the object (a_one) by a certain number of pixels (which is -300 pixel horizontally and 0 pel 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 perish the exam.

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

Now let ’ s run the tryout case: