Web Driver Drag And Drop

Example

Let us take an example in which we will automate the following procedures:
1. Invoke Google Firefox Browser
2. Open URL the URL of the web page containing an image for drag and drop.
3. Drag and Drop a selected image on the textbox.

We will create the test case step by step in order to have a better understanding of Drag and Drop process in WebDriver.

Step 1. Launch Eclipse IDE and create an open test suite "Demo_Test".

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

Give the Class name as "Dragdrp_Test" and then click on the "Finish" button.

Step 3.  Now coming to the coding ground.

1. To invoke the Firefox browser, we need to download the Gecko driver and set the system property of "Running test on Firefox Browser" as the path of the geckodriver.exe file. Here is the sample code snippet to set the system property for the Firefox driver:

// System Property for Gecko Driver   
System.setProperty("webdriver.gecko.driver","Location to the geckodriver.exe");  

You can also try this code with Online Java Compiler

Run Code

2. After that we have to initialise the Gecko Driver using Desired Capabilities Class.

Here is the sample code snippet to initialise the Gecko driver using DesiredCapabilities class.

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

You can also try this code with Online Java Compiler

Run Code

By combining both of the above code blocks, we will get the below code to launch the Firefox browser.

// System Property for the Gecko Driver   
System.setProperty("webdriver.gecko.driver","Location to the geckodriver.exe");
//Initialising a Gecko Diver using Desired Capabilities Class.      
WebDriver driver=new FirefoxDriver(capabilities);  

You can also try this code with Online Java Compiler

Run Code

3. Now, we need to write the code which will automate our second test procedure(navigate to the chosen URL). Here is sample code to navigate to the chosen URL:

// Launch the Website  
driver.navigate().to("URL of web page containing image to drag and drop");  

The complete code till now will look like below:

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 the Gecko Driver
		System.setProperty("webdriver.geckodriver.driver","Location to the geckodriver.exe");  

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

    	// Launch the Website
    	driver.navigate().to("URL of web page containing the image to be dragged and textbox for drop");    
   	}  
}  

You can also try this code with Online Java Compiler

Run Code

Step 4. Now we will locate the image to drag and the textbox for dropping by inspecting its HTML codes by following the below steps :

1. Open URL: URL of a web page containing the image to drag and textbox to drop.
2. Right click on the image which is to be dragged and the textbox in which to be dropped on the sample web page and select Inspect Element
3. It will launch a window containing all the specific codes involved in the development of the image.
4. Take a note of its id attribute as sourceImage.
5. Similarly, we will inspect the textbox where we have to place the image.
6. Take a note of its id attribute as targetDiv.

Step 5. To automate our third test procedure, we need to write the code which will perform the drag and drop on the image and the textbox.
Here is the sample code for drag and drop:

//WebElement on which is to be dragged
WebElement from = driver.findElement(By.id("sourceImage"));  

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

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

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

You can also try this code with Online Java Compiler

Run Code

Hence, our final test script will look 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 the Gecko Driver
		System.setProperty("webdriver.geckodriver.driver","Location to the geckodriver.exe");  

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

       	// Launch the Website
       	driver.navigate().to("URL of web page containing the image to be dragged and textbox for drop");

		//WebElement on which is to be dragged
		WebElement from = driver.findElement(By.id("sourceImage"));  

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

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

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

You can also try this code with Online Java Compiler

Run Code

The following picture shows the Eclipse window for the test script.

Step6. Now right click on the Eclipse code and select Run As > Java Application.



After execution, the above test script will launch the Firefox browser and automate all the test procedures.

Check this out : Xpath in Selenium

FAQs

What is the use of actions class in Selenium?

Actions class is the ability to handle various types of keyboard and mouse events.
 

What is the build() and perform() methods in Selenium?

The build() and perform() are used to compile and execute the actions class.
 

How do click and clickAt commands differ from each other?

The click command is used when you just want to "click" on an element, like a button, a link, etc. The clickAt is used when you want to "click" on a position designated by mouse coordinates.
 

How to drag in Selenium python?

The method “drag_and_drop(source, target)” is used in python which accepts two parameters.

Conclusion

In this blog, we have discussed how to automate the Drag and Drop process in Selenium WebDriver. We discussed the ‘Actions’ class and its various utility methods. In the end, we discussed an example with a complete explanation of how to drag and drop in Selenium WebDriver.

We hope that this blog helped you enhance your knowledge regarding Drag and Drop in Selenium WebDriver. Learning never stops, and to learn more and become more skilled, head over to our practice platform Coding Ninjas Studio, to practice top problems attempt Mock Tests, and read informative blogs, and interview experiences. Do upvote our blog to help other ninjas grow. 

Happy Learning!