How to drag and drop elements using Selenium for Java Apps!

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!

Setup

For this short tutorial we'll be using the following example Java application hosted on GitHub: 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)

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!

Figure 3: Our test is passing!

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 and GitHub, connect with me on LinkedIn and subscribe to my YouTube channel.