PAGE 33 : DRAG AND DROP IN SELENIUM WEBDRIVER

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 andDestinationElements.

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 elementsSourceElement and DestinationElements are available.

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