---Advertisement---

Drag and Drop in Selenium WebDriver with Practical Examples Great 2025

By Manisha

Updated On:

---Advertisement---
Drag and Drop in Selenium WebDriver

πŸ‘‰How to Drag and Drop in Selenium WebDriver (Complete Guide)

Drag and Drop in Selenium : Modern web applications often support drag-and-drop functionality to allow users to move UI elements interactively. Selenium WebDriver supports automating such interactions using the Actions class.

In this guide, you will learn how to perform drag and drop in Selenium using two powerful methods: dragAndDrop() and dragAndDropBy(). We’ll explore both concepts with real-world scenarios and Java code samples.


  1. What is Drag and Drop in Selenium?
  2. Syntax of Drag and Drop Methods
  3. Scenario 1: Drag and Drop using dragAndDrop()
  4. Scenario 2: Drag and Drop using dragAndDropBy()
  5. How to Find X and Y Pixel Coordinates
  6. Scenario 3: Drag Multiple Elements and Verify Output
  7. Summary

πŸ‘‰ What is Drag and Drop in Selenium?

Drag and Drop in Selenium: Drag and drop is a user interaction that allows elements to be moved from one location to another. Selenium provides the Actions class, which simulates user actions like mouse clicks, movement, keyboard input, and drag-and-drop operations.


πŸ‘‰ Syntax of Drag and Drop Methods

Selenium offers two main methods to perform drag-and-drop actions:

  • source: Element to be dragged
  • target: Element where the source will be dropped

java

Actions actions = new Actions(driver);

actions.dragAndDrop(sourceElement, targetElement).build().perform();


  • source: Element to drag
  • xOffset: Horizontal pixel offset
  • yOffset: Vertical pixel offset

java

actions.dragAndDropBy(sourceElement, 100, 50).build().perform();


πŸ‘‰ Scenario 1: Drag and Drop Using dragAndDrop()

In this example, we will drag the “BANK” element and drop it into the “DEBIT SIDE” block.

java

WebDriver driver = new FirefoxDriver();

driver.get(“https://example-dragdrop.com”);

WebElement source = driver.findElement(By.xpath(“//a[text()=’BANK’]”));

WebElement target = driver.findElement(By.id(“bank-debit-side”));

Actions actions = new Actions(driver);

actions.dragAndDrop(source, target).build().perform();

  • Load the URL in Firefox browser
  • Locate the drag element (BANK)
  • Locate the drop target (DEBIT SIDE)
  • Perform the drag and drop operation

πŸ‘‰ Scenario 2: Drag and Drop Using dragAndDropBy()

This method is used when the drop location is based on pixel offset, rather than a specific WebElement.

java

WebDriver driver = new ChromeDriver();

driver.get(“https://example-dragdrop.com”);

WebElement source = driver.findElement(By.xpath(“//a[text()=’BANK’]”));

Actions actions = new Actions(driver);

// Move element by 100 pixels right and 50 pixels down

actions.dragAndDropBy(source, 100, 50).build().perform();


πŸ‘‰How to Find Pixel Coordinates (x, y):

  1. Open the URL in Chrome or Firefox
  2. Open Developer Tools (F12)
  3. Click the Element Selector Tool (mouse icon)
  4. Hover over your target element
  5. Use the tooltip or right-click β†’ Inspect to view coordinates

You can also use browser extensions like “PixelZoomer” or “Page Ruler” to get precise values.


πŸ‘‰ Scenario 3: Drag Multiple Elements and Verify Output

In this scenario, we drag multiple elements like BANK, SALES, and 500, drop them in appropriate targets, and verify a success message.

java

WebDriver driver = new ChromeDriver();

driver.get(“https://example-dragdrop.com”);

Actions actions = new Actions(driver);

actions.dragAndDrop(driver.findElement(By.id(“bank”)), driver.findElement(By.id(“debit-side”))).perform();

actions.dragAndDrop(driver.findElement(By.id(“sales”)), driver.findElement(By.id(“credit-side”))).perform();

actions.dragAndDrop(driver.findElement(By.id(“amount”)), driver.findElement(By.id(“amount-block”))).perform();

// Verify message

WebElement message = driver.findElement(By.id(“success-message”));

if (message.isDisplayed()) {

    System.out.println(“Drag and Drop operations were successful!”);

}


πŸ‘‰Summary

Here’s a quick summary of what you’ve learned:

MethodDescription
dragAndDrop()Drag and drop element using WebElements
dragAndDropBy()Drag element using x, y pixel offset

  • Use the Actions class to simulate drag-and-drop behavior.
  • Use developer tools to inspect or measure pixel positions.
  • Always validate the results using output messages or element state.

πŸ‘‰ SEO Keywords to Target:

  • Selenium drag and drop tutorial
  • How to automate drag and drop in Selenium
  • Selenium Actions class example
  • dragAndDrop vs dragAndDropBy
  • Selenium WebDriver Java examples

Click To Open

πŸ‘‰Tutorial-25:Β Selenium C# Tutorial
πŸ‘‰Tutorial-26:Β Object Repository in Selenium WebDriver
πŸ‘‰Tutorial-27:Β How to Scroll a Web Page in Selenium
πŸ‘‰Tutorial-28:Β Sikuli Integration with Selenium WebDriver
πŸ‘‰Tutorial-29:Β Master XPath in Selenium
πŸ‘‰Tutorial-30:Β Selenium Waits
πŸ‘‰Tutorial-31:Β Right Click and Double Click in Selenium WebDriver
πŸ‘‰Tutorial-32:Β How to Handle Proxy Authentication in Selenium
πŸ‘‰Tutorial-33:Β Comprehensive Guide to Exception Handling in Selenium

Testing Selenium Download

Selenium Firefox Profile

Leave a Comment

Index