How to automate drag & drop functionality using Selenium WebDriver Java

Question

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

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

score 57 · Answer 1 · edited Oct 27 '16 at 13:58

57

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();

edited Oct 27 '16 at 13:58

else42.de

465
5
23

answered Jan 08 '13 at 19:32

r-sal

1,169
8
9

2

Isn't `.moveToElement(otherElement)` unnecessary when you use `.release(otherElement)`? – Tim Büthe May 11 '15 at 13:45
1

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 06 '17 at 13:21
when i try to run this i get :- Exception in thread "main" org.openqa.selenium.interactions.MoveTargetOutOfBoundsException: move target out of bounds, any idea how to solve it – Anurag Sharma Jun 03 '21 at 08:39

score 37 · Answer 2 · edited Apr 16 '14 at 07:57

37

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();

edited Apr 16 '14 at 07:57

coding_idiot

13,526
10
65
116

answered Jan 08 '13 at 07:35

joshuacronemeyer

1,316
1
10
20

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 07:58
2

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 05 '17 at 23:37

score 3 · Answer 3 · answered Jun 18 '15 at 07:16

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!

score 3 · Answer 4 · answered Oct 31 '15 at 19:20

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/

score 3 · Answer 5 · answered Jan 11 '16 at 11:38

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();

score 1 · Answer 6 · edited Mar 31 '15 at 12:28

1

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();

edited Mar 31 '15 at 12:28

Laura D

66
8

answered Feb 27 '14 at 05:16

shakun tyagi

107
7

score 1 · Answer 7 · edited Aug 27 '15 at 02:14

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();
    }
}

score 1 · Answer 8 · answered Dec 05 '14 at 11:51

    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();

score 1 · Answer 9 · answered Feb 11 '15 at 03:23

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!

score 0 · Answer 10 · edited Apr 18 '14 at 07:28

0

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();

edited Apr 18 '14 at 07:28

mstzn

2,881
3
25
37

answered Apr 18 '14 at 07:08

user3548006

79
1
1

score 0 · Answer 11 · answered May 05 '16 at 08:19

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

score 0 · Answer 12 · edited Jul 19 '16 at 10:43

0

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.

edited Jul 19 '16 at 10:43

Gynteniuxas

7,035
18
38
54

answered Jul 19 '16 at 09:54

Praveen

1

score 0 · Answer 13 · answered Jul 21 '17 at 17:48

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);
            }

How to automate drag & drop functionality using Selenium WebDriver Java

13 Answers13

Linked