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)
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();
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)
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.
Thanks for posting this.
ReplyDeleteI'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!
@Londog Happy to help :)
ReplyDeleteHi Nishant,
ReplyDeleteYour 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
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.
ReplyDeleteand so I am not able to able to perform the test for this. Please suggest.
Very useful - you've done a great job, Nishant.
ReplyDeleteThanks
Hi Nishant,
ReplyDeleteHope 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.
Nitin, you might want to create your custom action and perform.
ReplyDeleteActions builder = new Actions(myDriver);
Action dragAndDrop = builder.clickAndHold(toBeDraggedelement)
.moveToElement(target).release(toBeDraggedelement).build();
dragAndDrop.perform();
Thanks,
Nishant
HI Nishant,
ReplyDeleteYou know how to crop the image using webdriver?
Hi Nishant,
ReplyDeleteCan you please suggest how to crop the image using webdriver?
Hi Nishant,
ReplyDeleteThanks 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
@Deepika Is it throwing any error ? drop me an email .
ReplyDeletehi,
ReplyDeletethe 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
@Dhivya did you notice the note section , hope you took care of that !
ReplyDeleteDrop me an email if it's not working still !
Hi Nishant,
ReplyDeleteLooks 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
Hi Nishant,
ReplyDeleteHave 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.
Hi Nishant,
ReplyDeleteAny updates on my previous post.
@Selenium QA Looking it now ....
ReplyDelete@Selenium QA
ReplyDeleteDude 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
Hi Nishant,
ReplyDeleteI 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!
@Prerana Hey Drag and drop was broken in Safar 5.1 not sure if they have fixed the issues in 6.0.1
ReplyDeleteIt 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
Thanks mate
ReplyDeleteHey Nishant,
ReplyDeleteI'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