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 :
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.
Comments
Need to switch to iFrame first
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();
drag and drop when source and target are in different iframes
How can this be handled for condition where source and target are in different iframes.
Add new comment