Actions Class In Selenium | Drag, Drop & Resize

Actions class in selenium

 

Actions class in Selenium is used to emulate complex input gestures like drag, drop and resize which a user performs using keyboard and mouse. In this tutorial, we will learn how to simulate these user gestures using Actions class in selenium.

 

Actions class in selenium

 

Actions class provides various methods to simulate the user gestures, which eases the task of automation developer. We only need to create an object of Actions class. It accepts the driver instance of WebDriver.

Syntax to invoke Actions class is:

 

Actions actions = new Actions(driver);
actions.<methodName>.perform();

How to create xPATH

click here

 

We will discuss the following widely used methods of Actions class, used to emulate drag & drop, resize and slider control web elements.

  • dragAndDrop(WebElement dragSource, WebElement dropTarget)
  • dragAndDropBy(WebElement dragSource, int xOffset, int yOffset)

dragAndDropBy method is used to emulate resize and slider controls. This method accepts two integer values denoting the x-axis and y-axis respectively.

 

Drag and Drop using Actions class

 

Navigate to the DEMO website and drag and drop the source web element on the target web element.

 

Drag and Drop Actions Class

 

Above section is part of a frame in the demo web page. Hence, we need to switch to this frame first.

  • dragAndDrop method would be used to drag and drop the desired web element.
  • extract the locator for both the web elements and store it in a variable of type WebElement.
  • use perform method to perform the desired action.

Below is the code to perform drag and drop:

 

// switch to the frame containing the web elements
        driver.switchTo().frame(0);

        // store the references of web elements which user want to drag and drop
        WebElement dragSource = driver.findElement(By.id("draggable"));
        WebElement dropTarget = driver.findElement(By.id("droppable"));

        // implicit wait to wait until web element is dragged and dropped
        driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
        
        //invoke Actions class. It accepts the instance of WebDriver
        Actions actions = new Actions(driver);
        
        //perform drag and drop gesture
        actions.dragAndDrop(dragSource, dropTarget).perform();

 

 

Resize using Actions class

 

Syntax to resize the resizable web element is:

 

actions.dragAndDropBy(WebElement dragSource, int xOffset, int yOffset).perform()

 

Navigate to the DEMO website, to resize a web element we have to select a particular area of the web element (as shown in the image below) and then drag it across the screen. xOffset and yOffset are the coordinate values to which the user has resized/ dragged the web element.

In the demo application, resize the web element 100 px in X-axis and 50 px in Y-axis.

 

Resize using actions class

 

dragAndDropBy(WebElement element, int xoffset, int yoffset) would be used to resize a web element. xoffset and y offset are the coordinates until the web element should be resized. Following is the code to resize a web element:

 

driver.navigate().to("https://jqueryui.com/resizable/");
        
        driver.manage().window().maximize();
        
        driver.switchTo().frame(0);
        
        WebElement resizeElement = driver.findElement(By.xpath("//div[@class='ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se']"));

        Actions actionsResize = new Actions(driver);
        
        //provide the x and y offset values
        actionsResize.dragAndDropBy(resizeElement, 100, 50).perform();
        
        System.out.println("Done Resizing");

 

 

Slide using Actions class

 

This is similar to resizing a web element, except one of the offset value should be zero at a time. A slider web element could be dragged either vertically or horizontally.

Following code demonstrates the implementation of the slide operation in DEMO application:

 

driver.navigate().to("https://jqueryui.com/slider/");
        
        driver.manage().window().maximize();
        
        driver.switchTo().frame(0);
        
        WebElement slideElement = driver.findElement(By.xpath("//span[@class='ui-slider-handle ui-corner-all ui-state-default']"));

        Actions actionsSlide = new Actions(driver);
        
        actionsSlide.dragAndDropBy(slideElement, 100, 0).perform();
        
        System.out.println("Done Sliding");

 

Full code to implement above-discussed Actions class methods is following:

 

package actions;

import java.util.concurrent.TimeUnit;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Actions;

public class DragAndDrop {

    public static WebDriver driver = null;

    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "/home/dhawal/selenium jars/chromedriver/chromedriver");
       
        driver = new ChromeDriver();
        driver.get("https://jqueryui.com/droppable/");

        // switch to the frame containing the web elements
        driver.switchTo().frame(0);

        // store the references of web elements which user want to drag and drop
        WebElement dragSource = driver.findElement(By.id("draggable"));
        WebElement dropTarget = driver.findElement(By.id("droppable"));

        // implicit wait to wait until web element is dragged and dropped
        driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
        
        //invoke Actions class. It accepts the instance of WebDriver
        Actions actionsDrag = new Actions(driver);
        
        //perform drag and drop gesture
        actionsDrag.dragAndDrop(dragSource, dropTarget).perform();
        System.out.println("Done Dragging and dropping");
        

        
        driver.navigate().to("https://jqueryui.com/resizable/");
        
        driver.manage().window().maximize();
        
        driver.switchTo().frame(0);
        
        WebElement resizeElement = driver.findElement(By.xpath("//div[@class='ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se']"));

        Actions actionsResize = new Actions(driver);
        
        //provide the x and y offset values
        actionsResize.dragAndDropBy(resizeElement, 100, 50).perform();
        
        System.out.println("Done Resizing");
        
    
        driver.navigate().to("https://jqueryui.com/slider/");
        
        driver.manage().window().maximize();
        
        driver.switchTo().frame(0);
        
        WebElement slideElement = driver.findElement(By.xpath("//span[@class='ui-slider-handle ui-corner-all ui-state-default']"));

        Actions actionsSlide = new Actions(driver);
        
        actionsSlide.dragAndDropBy(slideElement, 100, 0).perform();
        
        System.out.println("Done Sliding");

    }

}

Author: Dhawal Joshi

A post-graduate in MCA, ISTQB & ITIL certified QA with more than 8 years of experience in QA working with a CMMI Level 5 organization as System Analyst. I started my automation journey with HP UFT(formerly known as QTP) and for the past few years, I am using Selenium for automation. I also have experience in Android Application Development, Java, HTML, and VBScript. When I am not working, I like to spend time with my family, cooking and learning new developments in IT.

Leave a Reply

Your email address will not be published. Required fields are marked *