Selenium WebDriver - Drag and Drop

Selenium WebDriver - Drag and Drop

In this section, you'll learn how to perform complex operations in Selenium WebDriver such as Drag and Drop.

Let's first understand some of the principles surrounding Drag and Drop operation before continuing with this section.

Actions in Selenium WebDriver

We have an Actions class in Selenium WebDriver for executing complex user interaction including drag and drop. We build a sequence of composite events first using the Actions class and then perform it using Action (an interface that represents a single user-interaction). The specific Behavior type methods we would use here are-

• clickAndHold(WebElement element) - Clicks a web element at the middle(without releasing).
• moveToElement(WebElement element) - Moves the mouse pointer to the middle of the web element without clicking.
• release(WebElement element) - Releases the left click (which is in pressed state).
• build() - Generates a composite action

Let us find a test case, in which the following situations should be automated:

• Invoke Firefox Browser
• Open URL: https://www.testandquiz.com/selenium/testing.html
• Drag and Drop the JavaTpoint icon on the textbox

To offer you a better understanding of how to treat drag and drop in WebDriver we will build our test case step by stage.

Step 1. Start Eclipse IDE and open the current "Demo_Test" test suite which we generated in earlier sessions of this tutorial.

Step 2. Right click on the "src" folder and create a new Class File from New > Class.

Step 3. Let's get to the world of coding.

To trigger the Firefox client, Gecko driver must be downloaded and the device properties configured for the Gecko driver. We have addressed this in earlier tutorial sessions already. To know how to access and install system properties for Firefox app, link to "Running check on Firefox Browser."

Here is the sample code to set system property for Gecko driver:

// System Property for Gecko Driver   
ystem.setProperty("webdriver.gecko.driver","D:\\GeckoDriver\\geckodriver.exe" );  

• We have to initialize Gecko Driver after that using the Required Capabilities Level.

Here is the sample code for initializing gecko driver utilizing class DesiredCapabilities.

// Initialize Gecko Driver using Desired Capabilities Class  
DesiredCapabilities capabilities = DesiredCapabilities.firefox();  
capabilities.setCapability("marionette",true);  
WebDriver driver= new FirefoxDriver(capabilities);  

Combining the above two code blocks, we'll get the code snippet for the Firefox application to open.

// System Property for Gecko Driver   
System.setProperty("webdriver.gecko.driver","D:\\GeckoDriver\\geckodriver.exe" );  
      
// Initialize Gecko Driver using Desired Capabilities Class  
DesiredCapabilities capabilities = DesiredCapabilities.firefox();  
capabilities.setCapability("marionette",true);  
WebDriver driver= new FirefoxDriver(capabilities);  

Before that we have to compose the application that will simplify our second test scenario (navigate to the URL of your choice)

Below is the sample code for navigating to the URL you want to use:

// Launch Website  
driver.navigate().to("https://www.testandquiz.com/selenium/testing.html");  

The complete code till now will look something like this:

import org.openqa.selenium.WebDriver;  
import org.openqa.selenium.firefox.FirefoxDriver;  
import org.openqa.selenium.remote.DesiredCapabilities;  
  
public class Dragdrp_Test {  
  
    public static void main(String[] args) {  
          
    // System Property for Gecko Driver   
        System.setProperty("webdriver.gecko.driver","D:\\GeckoDriver\\geckodriver.exe" );  
              
    // Initialize Gecko Driver using Desired Capabilities Class  
            DesiredCapabilities capabilities = DesiredCapabilities.firefox();  
            capabilities.setCapability("marionette",true);  
            WebDriver driver= new FirefoxDriver(capabilities);  
          
  
      // Launch Website  
driver.navigate().to("https://www.testandquiz.com/selenium/testing.html");   
      
    }  
  
}  

Step 4. Now we're going to seek and find the phpTpoint icon and text box to do drag and drop activity. As we know it requires inspection of their HTML codes to find an element.

To find the drop-down menu on the sample web page, follow the steps provided below.

• Open URL: https://www.testandquiz.com/selenium/testing.html
• Right click on JavaTpoint icon and select Inspect Element.
• It will open a window which contains all the different codes involved in phpTpoint logo creation.

Step 5. To automate our third and fourth test scenarios, we need to write the code on the phptpoint logo which will perform the drag and drop operation.

The code snippet to conduct drag & drop operation is provided below.

//WebElement on which drag and drop operation needs to be performed  
WebElement from = driver.findElement(By.id("sourceImage"));  

//WebElement to which the above object is dropped  
WebElement to = driver.findElement(By.id("targetDiv");  

//Creating object of Actions class to build composite actions  
Actions act = new Actions(driver);  

//Performing the drag and drop action  
act.dragAndDrop(from,to).build().perform();   

Thus, our final test script will look something like this:

import org.openqa.selenium.By;  
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.remote.DesiredCapabilities;  
  
public class Dragdrp_Test {  
  
    public static void main(String[] args) {  
          
        // System Property for Gecko Driver   
        System.setProperty("webdriver.gecko.driver","D:\\GeckoDriver\\geckodriver.exe" );  
              
        // Initialize Gecko Driver using Desired Capabilities Class  
            DesiredCapabilities capabilities = DesiredCapabilities.firefox();  
            capabilities.setCapability("marionette",true);  
            WebDriver driver= new FirefoxDriver(capabilities);  
          
  
        // Launch Website  
            driver.navigate().to("https://www.testandquiz.com/selenium/testing.html");   
              
        //WebElement on which drag and drop operation needs to be performed  
            WebElement from = driver.findElement(By.id("sourceImage"));  
  
        //WebElement to which the above object is dropped  
            WebElement to = driver.findElement(By.id("targetDiv"));  
               
        //Creating object of Actions class to build composite actions  
            Actions act = new Actions(driver);  
               
        //Performing the drag and drop action  
            act.dragAndDrop(from,to).build().perform();   
    }  
}  

Step 6. Right click on the Eclipse code and select Run As > Java Application.