How to automate drag & drop functionality using Selenium WebDriver in java?

  • 2
    can we have an accepted answer please – nullpointer May 19 '16 at 5:02
  • How this question never got closed to this point I don't understand...and so many upvotes??? No demonstration of research, no code samples, ... this is give me teh codez. – JeffC Jul 18 '16 at 16:31

13 Answers 13

I used below piece of code. Here dragAndDrop(x,y) is a method of Action class. Which takes two parameters (x,y), source location, and target location respectively

try {
                System.out.println("Drag and Drom started :");
                Thread.sleep(12000);
                Actions actions = new Actions(webdriver);
                WebElement srcElement = webdriver.findElement(By.xpath("source Xpath"));
                WebElement targetElement = webdriver.findElement(By.xpath("Target Xpath"));
                actions.dragAndDrop(srcElement, targetElement); 
                actions.build().perform();
                System.out.println("Drag and Drom complated :");
            } catch (Exception e) {
                System.out.println(e.getMessage());
                resultDetails.setFlag(true);
            }

There is a page documenting Advanced User Interactions; which has a lot of great examples on how to generate a sequence of actions, you can find it here

// Configure the action
Actions builder = new Actions(driver);

builder.keyDown(Keys.CONTROL)
   .click(someElement)
   .click(someOtherElement)
   .keyUp(Keys.CONTROL);

// Then get the action:
Action selectMultiple = builder.build();

// And execute it:
selectMultiple.perform();   

or

Actions builder = new Actions(driver);

Action dragAndDrop = builder.clickAndHold(someElement)
   .moveToElement(otherElement)
   .release(otherElement)
   .build();

dragAndDrop.perform();
  • 2
    Isn't .moveToElement(otherElement) unnecessary when you use .release(otherElement)? – Tim Büthe May 11 '15 at 13:45
  • builder.keyDown(Keys.CONTROL) .click(someElement) .click(someOtherElement) .keyUp(Keys.CONTROL); // Then get the action: Action selectMultiple = builder.build(); // And execute it: selectMultiple.perform(); Is this code for drag and drop? I think, it's for multiple selection. – Ripon Al Wasim Apr 6 '17 at 13:21

Selenium has pretty good documentation. Here is a link to the specific part of the API you are looking for:

WebElement element = driver.findElement(By.name("source"));

WebElement target = driver.findElement(By.name("target"));

(new Actions(driver)).dragAndDrop(element, target).perform();

This is to drag and drop a single file, How to drag and drop multiple files.

import com.thoughtworks.selenium.Selenium;
import org.openqa.selenium.firefox.FirefoxProfile;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.By;
//-------------------------------------------------------------------------
import org.openqa.selenium.WebElement;
import org.openqa.selenium.interactions.Actions;
import org.openqa.selenium.interactions.Action;    /*
      Move only
      @param o WebElement  to move
      @param d WebElement  destination element
    */
    m.drag={o,d->
       def lo=o.location;
       def ld=d.location;
       int di=ld.y - lo.y;
       int inc,lim
       if (di<0) 
       { inc=-1
         lim=ld.y+d.size.height
       }
       else
       { inc=1
         lim=ld.y
       }
       def fes={
                int act=o.location.y;
                println "act=${act} ${lim}";
                if (inc > 0)
                  return !(act>lim)
                else 
                  return !(act<lim)
               }
         def b =new Actions(driver);
            b.clickAndHold(o).perform();
            while ( fes() ){
              b.moveByOffset(0,inc);b.perform();sleep(20);
            }
            //
            b.release(m.ori).perform();
    }//drag

Try this one:

    Actions builder = new Actions(fDriver);
    builder.keyDown(Keys.CONTROL)
        .click(element)
        .dragAndDrop(element, elementDropped)
        .keyUp(Keys.CONTROL);

        Action selected = builder.build();

        selected.perform();

Selenium has so many options to perform drag and drop.

In Action class we have couple of method which will perform the same task.

I have listed the possible solution please have a look.

http://learn-automation.com/drag-and-drop-in-selenium-webdriver-using-actions-class/

Try implementing code given below

package com.kagrana;

import org.junit.Test;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.interactions.Action;
import org.openqa.selenium.interactions.Actions;

public class DragAndDrop {
    @Test
    public void test() throws InterruptedException{
        WebDriver driver = new FirefoxDriver();
        driver.get("http://dhtmlx.com/docs/products/dhtmlxTree/");
        Thread.sleep(5000);
        driver.findElement(By.cssSelector("#treebox1 > div > table > tbody > tr:nth-child(2) > td:nth-child(2) > table > tbody > tr:nth-child(2) > td:nth-child(2) > table > tbody > tr:nth-child(3) > td:nth-child(2) > table > tbody > tr > td.standartTreeRow > span")).click();
        WebElement elementToMove = driver.findElement(By.cssSelector("#treebox1 > div > table > tbody > tr:nth-child(2) > td:nth-child(2) > table > tbody > tr:nth-child(2) > td:nth-child(2) > table > tbody > tr:nth-child(3) > td:nth-child(2) > table > tbody > tr > td.standartTreeRow > span"));
        WebElement moveToElement = driver.findElement(By.cssSelector("#treebox1 > div > table > tbody > tr:nth-child(2) > td:nth-child(2) > table > tbody > tr:nth-child(2) > td:nth-child(2) > table > tbody > tr:nth-child(2) > td:nth-child(2) > table > tbody > tr:nth-child(1) > td.standartTreeRow > span"));
        Actions dragAndDrop = new Actions(driver);
        Action action = dragAndDrop.dragAndDrop(elementToMove, moveToElement).build();
        action.perform();
    }
}

Drag and drop can be implemented like this...

public ObjectPage filter(int lowerThreshold, int highThreshold) {
    Actions action = new Actions(getWebDriver());
    action.dragAndDropBy(findElement(".className .thumbMin"), lowerThreshold, 0).perform();
    waitFor(elementIsNotDisplayed("#waiting_dialog"));

    action.dragAndDropBy(findElement(".className .thumbMax"), highThreshold, 0).perform();
    waitFor(elementIsNotDisplayed("#waiting_dialog"));
    return this;
}

Hope that helps!

one more way is to use draganddrop() like this

      WebElement element = driver.findElement(By.name("source"));
      WebElement target = driver.findElement(By.name("target"));

     (new Actions(driver)).dragAndDrop(element, target).perform();

I would do it like this in Perl using Selenium::Remote::Driver.

my $sel = <>;  #selenium handle
my $from_loc = <fromloc>;
my $to_loc   = <toloc>;

my $from_element = $sel->find_element($from_loc);
my $to_element = $sel->find_element($to_loc);

# Move mouse to from element, drag and drop
$sel->mouse_move_to_location(element=>$from_element);
$sel->button_down(); # Holds the mouse button on the element
$sel->mouse_move_to_location(element=>$to); # Move mouse to the destination
$sel->button_up();

This should do it!

    WebElement fromElement= driver.findElement(By.xpath("SourceElement"));
    WebElement toElement=driver.findElement(By.xpath("TragetElement"));
    Actions action = new Actions(WebDriver);
    Action dragDrop = action.dragAndDrop(fromElement, toElement).build();
    dragDrop.perform(); 

For xpath you can use the above commands like this :

WebElement element = driver.findElement(By.xpath("enter xpath of source element here")); 
WebElement target = driver.findElement(By.xpath("enter xpath of target here"));
(new Actions(driver)).dragAndDrop(element, target).perform();

Selenium has pretty good documentation. Here is a link to the specific part of the API you are looking for.

WebElement element = driver.findElement(By.name("source")); 

WebElement target = driver.findElement(By.name("target"));

(new Actions(driver)).dragAndDrop(element, target).perform();
  • 3
    always prefer to add code/example from the target link, the link might get changed/dead in near future and hence, the answer might become invalid for future users. I've added it for now. – coding_idiot Apr 16 '14 at 7:58
  • 1
    Why the extra parenthesis around (new Actions(driver))? – Tim Büthe May 11 '15 at 13:46
  • Really helps for drag and drop! Thanks! – IamBatman Jan 5 '17 at 23:37

protected by Community Nov 8 '16 at 12:03

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.