Drag and Drop using Webdriver Action Class

We have taken example program to perform drag and drop. In the below example, as the DragAndDrop divs are in a Frame, First we need to switch to the frame before performing drag and drop. And then we also need to check for the availability of SourceElement and DestinationElements.

Syntax for drag and drop
Actions action = new Actions(driver);
action.dragAndDrop(Sourcelocator, Destinationlocator).build().perform();

We can also make it as below:
(new Actions(driver)).dragAndDrop(element, target).perform();

We have also used Webdriver Wait Expected conditions to wait for a frame to be available and then switch to the frame.

The below is the source image on which we will perform operation :

Drag and Drop in selenium

package com.pack.dragndrop;

import org.openqa.selenium.By;
import org.openqa.selenium.NoSuchElementException;
import org.openqa.selenium.StaleElementReferenceException;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.interactions.Actions;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.testng.Assert;
import org.testng.annotations.Test;


public class DragNDropExample {

	WebDriver driver;
	
	@Test
	public void testDragAndDropExample() {
		driver = new FirefoxDriver();
		driver.manage().window().maximize();
		driver.navigate().to("http://jqueryui.com/droppable/");
		//Wait for the frame to be available and switch to it
		WebDriverWait wait = new WebDriverWait(driver, 5);
		wait.until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(By.cssSelector(".demo-frame")));
		WebElement Sourcelocator = driver.findElement(By.cssSelector(".ui-draggable"));
		WebElement Destinationlocator = driver.findElement(By.cssSelector(".ui-droppable"));
		dragAndDrop(Sourcelocator,Destinationlocator);
		String actualText=driver.findElement(By.cssSelector("#droppable>p")).getText();
		Assert.assertEquals(actualText, "Dropped!");
	}
}

We can make use of any of the two DragAndDrop methods. The first method handles exceptions 'StaleElementReferenceException ', 'NoSuchElementException ' and Exception if any unknown exception occurs.

	public void dragAndDrop(WebElement sourceElement, WebElement destinationElement) {
		try {
			if (sourceElement.isDisplayed() && destinationElement.isDisplayed()) {
				Actions action = new Actions(driver);
				action.dragAndDrop(sourceElement, destinationElement).build().perform();
			} else {
				System.out.println("Element was not displayed to drag");
			}
		} catch (StaleElementReferenceException e) {
			System.out.println("Element with " + sourceElement + "or" + destinationElement + "is not attached to the page document "
					+ e.getStackTrace());
		} catch (NoSuchElementException e) {
			System.out.println("Element " + sourceElement + "or" + destinationElement + " was not found in DOM "+ e.getStackTrace());
		} catch (Exception e) {
			System.out.println("Error occurred while performing drag and drop operation "+ e.getStackTrace());
		}
	}

The below is the simple method to perform drag and drop. But before performing we also need to check if both the elements SourceElement and DestinationElements are available.

	 public void dragAndDrop(WebElement sourceElement, WebElement destinationElement)
	    {
	        (new Actions(driver)).dragAndDrop(sourceElement, destinationElement).perform();
	    }
}

Hope you enjoy this article.

Selenium Tutorials: 

Comments

In above example. The elements i.e Sourcelocator and Destinationlocator are inside iFrame. You can not perform any action withing switching to this frame. Please review below code for same,

WebElement myframe = driver.findElement(By.xpath("//iframe[@class='demo-frame']"));
driver.switchTo().frame(myframe);

WebElement Sourcelocator = driver.findElement(By.xpath(".//*[@id='draggable']"));
WebElement Destinationlocator = driver.findElement(By.xpath(".//*[@id='droppable']"));

Actions dragdrop = new Actions(driver);

dragdrop.clickAndHold(source).moveToElement(target).release(target).build().perform();

How can this be handled for condition where source and target are in different iframes.

Add new comment