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.

22 Responses

  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!

  2. 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

  3. 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.

  4. 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.

  5. 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

  6. 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

  7. 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

  8. 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.

  9. @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

  10. 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!

  11. @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

  12. 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

Comments are closed.

Back to Top
%d bloggers like this: