DEV Community

Sean Atukorala
Sean Atukorala

Posted on • Edited on

3 2

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!

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();
    }
Enter fullscreen mode Exit fullscreen mode

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();
    }
Enter fullscreen mode Exit fullscreen mode

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 2: Drag and Drop Completed!

Figure 3: Our test passing

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.

Image of AssemblyAI tool

Challenge Submission: SpeechCraft - AI-Powered Speech Analysis for Better Communication

SpeechCraft is an advanced real-time speech analytics platform that transforms spoken words into actionable insights. Using cutting-edge AI technology from AssemblyAI, it provides instant transcription while analyzing multiple dimensions of speech performance.

Read full post

Top comments (0)

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay