Using Drag and Drop in Selenium / Webdriver

Today I was trying out  to test the Drag and Drop feature provided in webdriver.  First I searched for a website which allows me to perform drag and drop operations and came across a website “http://jqueryui.com/demos/”. On the top left you will see 2 items “Draggable”  and “Droppable”.  Those are of interest to us as of now to test the Drag and Drop feature if Webdriver.
Draggable: The draggable sections looks like this. So you have a web element which can be dragged around in the circle. API to be used for these kind of controls is
org.openqa.selenium.interactions.Actions.dragAndDropBy(WebElement source, int xOffset, int yOffset)
image
Sample code to drag this element to an offset is
WebElement draggable = browser.findElement(By.id("draggable"));
new Actions(browser).dragAndDropBy(draggable, 200, 10).build().perform();
   
Droppable: The Droppable sections looks like this. You have 2 elements i.e one draggable and the other one to drop into. API to be used for these kind of controls is
org.openqa.selenium.interactions.Actions.dragAndDrop(WebElement source, WebElement target)
image
Sample code to drag this element and drop into other control is
WebElement draggable = browser.findElement(By.id("draggable"));
WebElement to = browser.findElement(By.id("droppable"));
new Actions(browser).dragAndDrop(draggable, to).build().perform();
   

Hope this information helps, do write me in case you face any issues !
Note: I tried the above script on Firefox Version 5 and Internet Explorer  Version 9.

Comments

  1. Thanks for posting this.

    I'd been looking for documentation about the Actions class and was failing miserably. The part I was missing was adding build and perform. Did that and now my dragAndDrop actions are working! Whooo!

    ReplyDelete
  2. @Londog Happy to help :)

    ReplyDelete
  3. Hi Nishant,
    Your site is very informative and shows your skillsets aloud.
    I need some suggestions.
    I am new to webdriver but i was able to implement few testcases with the help of site http://code.google.com/p/selenium/wiki/GettingStarted

    What i need to understand are folloing:
    1. Whats the best way to implement the Webdriver project. I mean the modularity/testsuite etc. how to define them.
    2. Do we is there any benefit of using Junit/TestNG with webdriver?

    I might have some more questions but i guess i need to do lilbit of RnD before posting them to you.

    Thanks,
    Payal
    payaljain1985@gmail.coom

    ReplyDelete
  4. Hi Nishant, Thanks for posting this . it is very useful. I am having problem in drag and drop with webdriver. It actually moving the source element to the target element but do not dropping it at the target and then it moves to other places and then it is getting drop.
    and so I am not able to able to perform the test for this. Please suggest.

    ReplyDelete
  5. Very useful - you've done a great job, Nishant.

    Thanks

    ReplyDelete
  6. Hi Nishant,

    Hope you are doing fine. I am trying drag and drop functionality but getting failed. Please help me. The code is mentioned below:

    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 junit.framework.Assert;

    public class Testing {

    public static void main(String[] args) {

    WebDriver driver = new FirefoxDriver();
    driver.navigate().to("http://md.ttx.com/PipelineMgt");
    Assert.assertEquals("Pipeline Management Application is not opened successfully!!!", "Pipeline Management", driver.getTitle());
    driver.findElement(By.id("cphSiteBody_ctrlPipelineFilter_ddlLOB_B-1Img")).click();
    driver.findElement(By.id("cphSiteBody_ctrlPipelineFilter_ddlLOB_DDD_L_LBI2T0")).click();
    driver.findElement(By.id("cphSiteBody_ctrlPipelineFilter_btnSearch_B")).click();
    try {
    Thread.sleep(3000);
    } catch (InterruptedException e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
    }

    WebElement element = driver.findElement(By.id("cphSiteBody_ctrlPipelineGrid_ticketGridView_col2"));
    WebElement target = driver.findElement(By.id("cphSiteBody_ctrlPipelineGrid_ticketGridView_grouppanel"));
    (new Actions(driver)).dragAndDrop(element,target).build().perform();
    }
    }

    Please reply me at nitin_rajpal86@yahoo.com also.

    ReplyDelete
  7. Nitin, you might want to create your custom action and perform.

    Actions builder = new Actions(myDriver);
    Action dragAndDrop = builder.clickAndHold(toBeDraggedelement)
    .moveToElement(target).release(toBeDraggedelement).build();
    dragAndDrop.perform();

    Thanks,
    Nishant

    ReplyDelete
  8. HI Nishant,

    You know how to crop the image using webdriver?

    ReplyDelete
  9. Hi Nishant,
    Can you please suggest how to crop the image using webdriver?

    ReplyDelete
  10. Hi Nishant,

    Thanks for the post,
    I have used above mentioned code in my application in which I have to drag an Email address to a Group.
    But the code is not able to do so.

    Thanks,
    Deepika

    ReplyDelete
  11. @Deepika Is it throwing any error ? drop me an email .

    ReplyDelete
  12. hi,
    the above drag and drop code you mentioned is getting loaded in internet explorer.no action taking place after the browser opens the link.Only the page is getting loader.please help me

    ReplyDelete
  13. @Dhivya did you notice the note section , hope you took care of that !
    Drop me an email if it's not working still !

    ReplyDelete
  14. Hi Nishant,

    Looks like you have very good knowledge of webdriver.
    I am novice in this field and want to learn webdriver using sample code.
    I really appreciate if you can send me a sample program of dragndrop feature to bhavindev5@gmail.com.

    Thanks in Advance
    Bhavin

    ReplyDelete
  15. Hi Nishant,

    Have you tried testing http://html5demos.com/drag. Here is my code
    WebElement dragElement = driver.findElement(By.xpath("//a[@id='one']"));
    WebElement dropElement = driver.findElement(By.xpath("//div[@id='bin']"));
    new Actions(driver).dragAndDrop(dragElement, dropElement).build().perform();

    It does not work on any of the browsers. Can you please help.

    ReplyDelete
  16. Hi Nishant,

    Any updates on my previous post.

    ReplyDelete
  17. @Selenium QA Looking it now ....

    ReplyDelete
  18. @Selenium QA

    Dude I tried using the following snippet :
    Actions builder = new Actions(driver);
    Action dragAndDrop = builder.clickAndHold(dragElement)
    .moveToElement(dropElement).release(dragElement).build();
    dragAndDrop.perform();

    but it failed. I checked my FF version and the Driver version as well but it just didn't work.
    Well after googling I noticed that there is already an issue raised for the exact problem

    http://code.google.com/p/selenium/issues/detail?id=3604

    It's evident that Selenium is not supporting HTML 5 Drag and Drop events.

    Drop me an email if it starts working though.

    Thanks,
    Nishant

    ReplyDelete
  19. Hi Nishant,
    I used following function for drag and drop on MAC OS X 10.8.2.
    public void drag(WebElement element,WebElement target)
    {

    Actions move = new Actions(driver);
    Action action = move.dragAndDrop(element, target).build();
    action.perform();
    }

    The script executed successfully in chrome and firefox. But the same script fails in safari 6.0.1 with following error: Unknown Command: mouseMoveTo
    Is drag and drop not supported in safari? Or is there any workaround for this?
    Thanks!

    ReplyDelete
  20. @Prerana Hey Drag and drop was broken in Safar 5.1 not sure if they have fixed the issues in 6.0.1
    It could be because of that. You might want to check in Selenium forum once to see if there is a bug raised already.

    Thanks,
    Nishant Verma

    ReplyDelete
  21. Hey Nishant,

    I'm stuck and I hope you can help me.
    I have tried many different ways to achieve this, but haven't really made it possible.
    I have a similar notebook that need to be flipped trough like this http://www.20thingsilearned.com/en-US/foreword/3
    I need to make the pages flip by clicking or dragging, but not using those arrow keys. This is the version I tried:
    WebElement flip = driver.findElement(By.xpath("//*[@id='pages']/section[4]/div"));
    Actions kkk = new Actions(driver);
    Actions page = kkk.moveToElement(flip, 750, 200);
    page.click().perform();

    Is there any way to do this, and is it possible to do it, without using the offset ?

    Thanks in advance,
    Edgars

    ReplyDelete

Post a Comment

Your comments will be reviewed and then published !

Popular posts from this blog

Defect Tracking System – Wastage of Money & Time ???

The 3 qualities that will always help you become better at almost anything…

Test Case Paths : Happy, Sad & Bad