Entrepreneur, Blogger, Author of "Mobile Test Automation with Appium"

On Tuesday, July 26, 2011 by Nishant Verma in , ,
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.
Web Analytics