Saturday, July 04, 2015

Drag and Drop tricks in Selenium

Many of the UI draggable elements can be easily draggable from one place to another place over the web page. 
In some cases though the web element is associated with draggable properties, they won't respond when we do drag action through our selenium code by using Actions class. Below are few of the scenario, which will help you to drag and drop your draggable web elements over the web page.

The draggable elements can be anything with draggable properties associated with. It could be a table header cell or can be draggable div or a frame or etc. Lets take an example of a source element(from which you will start the drag action) and a destination element(at which you will drop by releasing your mouse) as below:
WebDriver driver = new FirefoxDriver();

WebElement fromWebElement =
  driver.findElement(By.cssSelector(".ui-draggable div[title='DragMe']"));
WebElement toWebElement =
  driver.findElement(By.cssSelector(".ui-draggable div[title='DropMe']"));
(1) By using Actions class of Selenium webdriver

Case 1: 

Selenium web driver provides Actions class to do drag and drop actions in the web page.
Actions builder = new Actions(driver);
builder.dragAndDrop(fromWebElement, toWebElement);
This will work for most of the draggable web elements.

Case 2:

In case of some of the draggable web element the below works very well:
Actions builder = new Actions(driver);
Action dragAndDrop =
  builder.clickAndHold(fromWebElement).moveToElement(toWebElement)
    .release(toWebElement).build();
dragAndDrop.perform();
Make sure to call the perform() method at the end like above.

Case 3:

In few website the draggable elements doesn't work with either of the above cases. Then you can try the below:
Actions builder = new Actions(driver);
Action dragAndDrop =
  builder.clickAndHold(fromWebElement).moveToElement(toWebElement, 2, 2)
    .release(toWebElement).build();
dragAndDrop.perform();
You can adjust the xOffset and yOffset values(which is 2 in the above example) as per your requirements

Case 4:

This case is very interesting one which will work anyway for all the types of draggable UI elements in the webpage.
Actions builder = new Actions(driver);
builder.clickAndHold(fromWebElement).moveToElement(toWebElement).perform();
Thread.sleep(2000);// add 2 sec wait
builder.release(toWebElement).build().perform();
In the above code the 2 second wait during the drag and drop action is important. I would suggest use this way only if the above cases are not working for you.

(2) By using Robot class

Case 1:

If any of the above drag and drop actions using selenium doesn't work for you, do the drag and drop using Robot class as below:
Point coordinates1 = fromWebElement.getLocation();
Point coordinates2 = toWebElement.getLocation();

Robot robot = new Robot();

robot.mouseMove(coordinates1.getX(), coordinates1.getY());
robot.mousePress(InputEvent.BUTTON1_MASK);
robot.mouseMove(coordinates2.getX(), coordinates2.getY());
robot.mouseRelease(InputEvent.BUTTON1_MASK);
Thread.sleep(2000);// Give some wait if required(e.g. here 2 sec wait)
Hope it helps you! 

18 comments:

  1. Good one!! Thanks!

    ReplyDelete
  2. Cool, this really helps a lot :)

    ReplyDelete
  3. Not able to drag and drop using all this methods.
    url:http://codepen.io/parkji/full/JtDro

    ReplyDelete
    Replies
    1. Hello Paresh,

      Which browser and which version of selenium jar are you using?

      Regards,
      Aswini Kumar

      Delete
    2. I assume you are switching to the required frame(as below) before finding elements for drag and drop as the elements are inside a frame 'result' and you need to switch to it before you do any actions on them.
      driver.switchTo().frame("result");

      Delete
  4. can you help how to use drag and drop accros frames. i used below code but it didnt work
    import java.util.concurrent.TimeUnit;

    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.Actions;
    import org.openqa.selenium.support.ui.ExpectedConditions;
    import org.openqa.selenium.support.ui.WebDriverWait;


    public class DragDropIframes {

    public static void main(String[] args) {
    WebDriver driver = new FirefoxDriver();
    driver.get("http://www.msn.com/en-in/");
    WebDriverWait wait = new WebDriverWait(driver, 30);
    wait.until(ExpectedConditions.presenceOfElementLocated(By.className("adcontainer")));
    WebElement drag = driver.findElement(By.className("adcontainer"));
    System.out.println("abc");
    WebElement drop = driver.findElement(By.id("q"));
    System.out.println("cde");
    String str = driver.getWindowHandle();
    driver.switchTo().frame(0);
    Actions a1 = new Actions(driver);
    Actions a2 = a1.clickAndHold(drag);
    a1.build();
    a2.perform();
    System.out.println("ace");
    driver.switchTo().defaultContent();
    Actions a3 =a1.moveToElement(drop).release(drop);
    a3.perform();
    System.out.println();





    }

    }

    ReplyDelete
    Replies
    1. Hi,

      I guess the elements that you are using for drag and drop are not present in the opened page, please check it. Try using all the cases that I mentioned in this post, one will work for sure.

      Thanks!

      Delete
  5. I tried all of them, none works. My site is generated by Angular, maybe that's why?
    Thanks

    ReplyDelete
    Replies
    1. Hi Viktor,

      In AngularJS controls, we will get some additional html attributes like ng-model, ng-repeater, ng-controller etc, these are not included as locators in selenium. If any controls have only these attributes are set, we can’t find the elements with selenium.
      So the workaround to selenium(+java) for Angulas JS aplications is to use the xpath (or CSS Selector) as locator when we are using raw selenium for angularJS controls.
      xpath / CSS Selector simply searched for the elements with the tags and attributes irrespective of what technology is used to build the web site.
      While automating angular sites, we need to only take care of identifying the elements which is different than regular web elemenets, rest automation is same.

      So if you fix finding the elements, drag and drop will work in either of the ways that I mentioned.
      Let me know if you still get any issues.

      Thanks!

      Delete
    2. Hi Viktor Amkhinich,

      Did you get any solutions for drag and drop for angularjs Controls.Pleas let me know if you find any solutions.

      Thanks in Advance.

      Delete
  6. Hi Viktor Amkhinich,

    Did you get any solution for Drag and drop for angularjs controls?
    I Am also facing same problem. Can You please give me an idea how to do drag Drop.

    Thanks
    Sudharsan

    ReplyDelete
  7. How to drag an element from one frame and drop it on another frame.?

    Thanks

    ReplyDelete
  8. Hi Sahu,

    I am also facing the same problem with my angularjs page, as I have tried drag and drop operations by identifying the WebElements using Xpaths, CSS selectors. But I did not find any solution.
    In Case if you have any idea, please let me know Thankyou.

    ReplyDelete
  9. Hi,

    How to drag an element from one iframe and drop it in another iframe? Is that possible using selenium

    ReplyDelete
  10. Hi Aswini,

    How to get the canvas location dynamically to drag and drop the element to canvas.

    Scenario: canvas location cannot be identified with xpath.
    Need to drop 2 elements in canvas,we are able to drop 1st element using below code:

    act.clickAndHold(someElement).build().perform();
    act.moveToElement(otherElement).build().perform();
    act.release(otherElement).build().perform();

    we are able to drop 2nd element by giving hard-coded values like below:

    act.clickAndHold(someElement1).moveByOffset(152,360).build().perform();;

    How to handle the drop location of 2nd element independent of screen resolution and size.

    ReplyDelete
  11. Nice blog thanks for providing such a great information selenium Jobs in hyderabad

    ReplyDelete
  12. What you have written in this post is exactly what I have experience when I first started my blog.I’m happy that I came across with your site this article is on point,thanks again and have a great day.Keep update more information.
    Selenium Training in Chennai

    ReplyDelete
  13. Anybody able to solve the drag and drop issue in agular js controls + c#?

    ReplyDelete