Drag and Drop element using selenium example

In this article we will see how to drag and drop element using selenium. As example let's take JQuery slider to drag it's handle.
I will use JQuery slider from http://ui-dev.jquery.com/demos/slider/ page.

First of all I will create Slider java class and will add some methods: to move handle, to get current slider value, to set new slider value.
Slider.java class looks like:

[code lang="java" title="Slider.java"]
public class Slider {

WebElement handle;
FirefoxDriver driver;

public Slider(FirefoxDriver webDriver){
this.driver=webDriver;
}

public WebElement getHandle(){
if (handle == null) {
handle = driver.findElement(By.xpath("//*[@id='slider']/a"));
}
return handle;
}

public void setHandlePosition(int value){
setHandleInStartPoint();
while(getCurrentHandleValue() != value){
increaseItemsAmount();
}
System.out.println("Current value =" +getCurrentHandleValue() +
", expected value =" + value);
}

public void setHandleInStartPoint(){
while(Integer.valueOf(getCurrentHandleValue())!=0){
decreaseItemsAmount();
}
}

public int getCurrentHandleValue(){
return Integer.parseInt(getHandle().getAttribute("style")
.split(":")[1].replaceFirst("%;", "").trim());
}

public void increaseItemsAmount(){
Actions builder = new Actions(driver);
System.out.println("Current handle position = " +this.getCurrentHandleValue());
System.out.println("Coordinates="+getHandle().getLocation().toString());
// drag and drop handle element using Action type object
Action dragAndDrop = builder.clickAndHold(getHandle())
.moveByOffset(10, 0)
.release()
.build();
dragAndDrop.perform();
}

public void decreaseItemsAmount(){
Actions builder = new Actions(driver);
System.out.println("Current handle position = "+this.getCurrentHandleValue());
System.out.println("Coordinates="+getHandle().getLocation().toString());
Action dragAndDrop = builder.clickAndHold(getHandle())
.moveByOffset(-10, 0)
.release()
.build();
dragAndDrop.perform();
}
}
[/code]

Methods description:

• setHandlePosition(int value) - method sets handle in specified position

• setHandleInStartPoint() - method sets handle is zero point, it's value will be '0'

• getCurrentHandleValue() - method returns current slider value

• decreaseItemsAmount() - method decrease slider's value (-10 pixels by default)

• increaseItemsAmount() - method increase slider's value (10 pixels by default).

Let's take a closer look at what is happening in these two methods:

We created Action type object with builder name. This object is a key element in our drag and drop element example.

Selenium Action class from org.openqa.selenium.interactions package, has some methods that allows to simulate the action of a keyboard and mouse, e.g.:

• keyDown(Keys theKey);

• keyUp(Keys theKey);

• sendKeys(CharSequence... keysToSend);

• clickAndHold(WebElement onElement);

• dragAndDrop();

• moveToElement();

Using clickAndHold() method we click and hold handle control, then drag element to a new position (just adding 10 pixels to X coordinate) using moveByOffset(10, 0) method, at the end we release it. To perform all these actions we have to execute perform() method.

DragAndDropElementExample.java class:

[code lang="java" title="DragAndDropElementExample.java"]
public class DragAndDropElementExample {

@Test
public void moveSliderHandle(){
FirefoxDriver firefoxDriver = new FirefoxDriver(new FirefoxBinary(
new File("c:\\Program Files\\Mozilla Firefox18\\firefox.exe")),new FirefoxProfile());

// start browser and open page
firefoxDriver.navigate().to("http://ui-dev.jquery.com/demos/slider/");

// Define and initialize Slider object
Slider slider = new Slider(firefoxDriver);

// this method will set handle value to 30%
slider.setHandlePosition(30);
slider.setHandleInStartPoint();

// then browser will be closed.
firefoxDriver.close();
}
[/code]

Here we initialized new Slider Object -Slider slider = new Slider(firefoxDriver);
then set handle in position 30% - slider.setHandlePosition(30);
then set it back in position 0% - slider.setHandleInStartPoint();

As result, our handle element will be set in 30% position, and after that will we drag and drop to zero point - 0%