How to drag and drop elements using Selenium for Java Apps!
Published: 2022-07-04 18:41:32


You've probably heard of Selenium WebDriver, the widely popular browser automation library right? Did you know that it has the ability to allow users to simulate a drag and drop event? If not, keep reading and you'll soon find out how to automate the drag and drop feature for Java applications!

![Figure 1: Drag and Drop in Selenium!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mcqkmtchyykfpynisgec.png)

<i style={{ textAlign: 'center' }}>_Figure 1: Drag and Drop in Selenium!_</i>

## Setup

For this short tutorial we'll be using the following example Java application hosted on GitHub: [Java Selenium Examples](https://github.com/ShehanAT/java-selenium-examples)

Start by cloning the project and opening it up in Eclipse or Intellij IDEA. I'll be using Eclipse for this tutorial.

Note: If you want to follow along with a different Java application feel free to do so.

### Setting up environmental variables

If you're using Eclipse, make sure to following these steps so that the paths to your local installations of `geekodriver` and `firefox.bin` are set:

1. Navigate to the Run Configurations page via `Run` -> `Run Configurations`
2. Select the `JUnit` configuration that you plan to use in running the tests
3. Navigate to the `Environment` tab
4. Click on `Add` and enter the following key/value pairs:
   - `FIREFOX_PATH`: Your local path to your `firefox` executable file. For example it should look like the following if you're using Windows: `C:\\Program Files\\Mozilla Firefox\\firefox.exe`
   - `GEEKODRIVER_PATH`: Your local path to your `geckodriver` executable file. Here's what a Windows path should look like: `C:\\..\\geckodriver\\geckodriver.exe`
5. Click `Apply` to save changes

## Testing

Let's navigate to the `src.com.codinginformer.test.SeleniumDragAndDrop` class and go through its methods, starting with the `@Before` method:

```
	@Before
	public void initFirefox() {
		Properties properties = new Properties();
		System.setProperty("webdriver.gecko.driver", System.getenv("GEEKODRIVER_PATH"));
		System.setProperty("webdriver.firefox.bin", System.getenv("FIREFOX_PATH"));
		WebDriver driver = new FirefoxDriver();
	}
```

The above method establishes properties for `geckodriver`. It needs the local `geckodriver` executable file path set to the `webdriver.gecko.driver` property along with the `firefox` executable file set to wherever your local `firefox` executable file resides
Finally, we instantiate the `FirefoxDriver()` class to the `driver` variable

Next, let's cover the `dragAndDropElement()` method:

```
	@Test
    public void dragAndDropElement() {
        WebDriver driver = new FirefoxDriver();

    	driver.get("https://www.globalsqa.com/demo-site/draganddrop/#Accepted%20Elements");
		driver.manage().window().maximize();
		driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);

		WebElement acceptedElementsTab = driver.findElement(By.xpath("//*[@id='Accepted Elements']"));

		driver.manage().timeouts().implicitlyWait(2, TimeUnit.SECONDS);
		((RemoteWebDriver) driver).executeScript("arguments[0].click();", acceptedElementsTab);

		WebElement iframe = driver.findElement(By.cssSelector("iframe[data-src='../../demoSite/practice/droppable/accepted-elements.html']"));

		driver.switchTo().frame(iframe);

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

		driver.manage().timeouts().implicitlyWait(2, TimeUnit.SECONDS);

		Actions dragAndDropAction = new Actions(driver);
		dragAndDropAction.moveToElement(dragElement).dragAndDrop(dragElement, dropElement).build().perform();

		driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);

//		driver.quit();
 	}
```

Here is an explanation for the above test:

- `driver.get("https://www.globalsqa.com/demo-site/draganddrop/#Accepted%20Elements")`: The `get()` method is used to launch a new browser session to the URL specified. This URL is specifically picked out because it contains a cool drag and drop iframe element that we'll use for this tutorial
- `driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS)`: The first `implicitlyWait()` method we use is for the purposes of indicating the Selenium WebDriver to wait for 5 seconds before continuing execution. This is done in order to allow ample time for the page to load
- `((RemoteWebDriver) driver).executeScript("arguments[0].click();", acceptedElementsTab);`: Now we simulate a click of the `acceptedElementsTab` button in order to navigate to the specific section of the page that contains the drag-and-drop iframe that we're looking for
- `WebElement iframe = driver.findElement(By.cssSelector("iframe[data-src='../../demoSite/practice/droppable/accepted-elements.html']"));`: This `By.cssSelector()` method is used to find the correct iframe element that we're looking for. Our method of identification is by using the `data-src` attribute's value
- `driver.switchTo().frame(iframe);`: This method allows Selenium WebDriver to switch to working with the iframe that we want. The default value for the `frame()` method is `0` if the page we're on only contains one iframe element. However as this webpage contains over 10 iframes we need to pass in the specific `WebElement` that represents our desired iframe. It is only then that Selenium WebDriver knows to switch to the specific iframe that we want
- `WebElement dragElement = driver.findElement(By.xpath("//*[@id='draggable']"));`: We use `By.xpath()` to select the element that we want to drag. This is done by searching for an element containing an id of `draggable`
- `WebElement dropElement = driver.findElement(By.xpath("//*[@id='droppable']"));`: We use `By.xpath()` to select the element that want to drop our `div#draggable` element into
- `dragAndDropAction.moveToElement(dragElement).dragAndDrop(dragElement, dropElement).build().perform();`: Now comes the part where we are able to use Selenium to drag our `div#draggable` element into the `div#droppable` element. This action is made possible by the `Actions` class(more on the `Actions` class [here](https://www.toolsqa.com/selenium-webdriver/actions-class-in-selenium/))

Now just right click on the `SeleniumDragAndDrop.java` file and select `Run As -> JUnit Test` in order to run our test.



![Figure 2: Drag and Drop Completed!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9jg3g10c1tmpwpjloijv.png)

<i style={{ textAlign: 'center' }}>_Figure 2: Drag and Drop Completed!_</i>


![Figure 3: Our test passing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gu4bqaffzt8ch9e78mcl.png)

<i style={{ textAlign: 'center' }}>_Figure 3: Our test is passing!_</i>

And with that, we're able to to implement the drag and drop feature offered by Selenium WebDriver!

Congrats if you managed to get this functionality working. If not, leave a comment in the comments section and I'll get back to you if I find the time.

## Conclusion

Thanks for reading this blog post!

If you have any questions or concerns please feel free to post a comment in this post and I will get back to you when I find the time.

If you found this article helpful please share it and make sure to follow me on [Twitter](https://twitter.com/SeanAtukorala) and [GitHub](https://github.com/ShehanAT), connect with me on [LinkedIn](https://www.linkedin.com/in/shehan-atukorala-8631491a5/) and subscribe to my [YouTube channel](https://www.youtube.com/channel/UCtxed_NljgtAXrQMMdLvhrQ).