
π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.
Table of Contents
- What is Drag and Drop in Selenium?
- Syntax of Drag and Drop Methods
- Scenario 1: Drag and Drop using dragAndDrop()
- Scenario 2: Drag and Drop using dragAndDropBy()
- How to Find X and Y Pixel Coordinates
- Scenario 3: Drag Multiple Elements and Verify Output
- 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:
1οΈβ£ dragAndDrop(source, target)
- 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();
2οΈβ£ dragAndDropBy(source, xOffset, yOffset)
- 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 Code Example:
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();
Code Breakdown:
- 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 Code Example:
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):
- Open the URL in Chrome or Firefox
- Open Developer Tools (F12)
- Click the Element Selector Tool (mouse icon)
- Hover over your target element
- 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 Code Example:
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:
Method | Description |
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