Skip to content

Complex User Actions

As we all know, most website users do complex actions such as double-clicking a button, dragging and dropping the item and hovering over. We need to be able to simulate these actions in our test scripts.

The following list is user complex actions we have covered in the lecture:

  • Action Class
  • Double-click
  • Context-click
  • Click and Hold
  • Hover Over
  • Drag and Drop



› Actions Class

By default, WebDriver cannot simulate these complex user activities that involve more than one step. To address this shortcoming, Selenium introduced the Actions class. Through this class, the driver will have the capability to perform multiple actions simultaneously.

1
2
3
4
5
WebDriverManager.chromedriver().setup();
WebDriver driver = new ChromeDriver();

// Mask the driver with Actions object 
Actions actionsDriver = new Actions(driver);

To shorten the length of each code sample, we will again assume that the driver initializing code is typed out and ready before each of these codes.



› Double-click

To double-click an element, all you have to do is extract the target element as WebElement and use the doubleClick() method of actions class.

1
2
3
4
5
6
7
8
driver.get("https://webdriveruniversity.com/Actions/index.html");

By loc_yellow_button = By.xpath("//h2[.='Double Click Me!']");
WebElement yellowButton = driver.findElement(loc_yellow_button);

// -- code 
Actions actionsDriver = new Actions(driver);
actionsDriver.doubleClick(yellowButton).perform(); // perform() method inidcates the end



› Context-click

It is also known as menu click or right-click. This action is quite common in web applications that handle graphic designs. 

1
2
3
4
5
6
7
8
driver.get("https://swisnl.github.io/jQuery-contextMenu/demo.html");

By loc_button = By.cssSelector(".context-menu-one");
WebElement button = driver.findElement(loc_button);

// -- code 
Actions actionDriver = new Actions(driver);
actionDriver.contextClick(button).perform();



› Click and Hold

Click and hold is an action in Selenium in which we do left-click on an element and hold it without releasing the left button of the mouse.

1
2
3
4
5
6
7
8
driver.get("https://webdriveruniversity.com/Actions/index.html");

By loc_click_hold_button = By.cssSelector("div#click-box");
WebElement clickAndHoldBttn = driver.findElement(loc_click_hold_button);

// -- code 
Actions actionsDriver = new Actions(driver);
actionsDriver.clickAndHold(clickAndHoldBttn).perform();



› Hover over

Quite often website uses a hover-over effect for menu displays. The hovering effect on the website can be done by moving the cursor to the element. 

1
2
3
4
5
6
7
8
driver.get("https://webdriveruniversity.com/Actions/index.html");

By loc_hover_bttn = By.cssSelector("div:nth-of-type(3) > .dropbtn");
WebElement hoverButton = driver.findElement(loc_hover_bttn);

// -- code 
Actions actionsDriver = new Actions(driver);
actionsDriver.moveToElement(hoverButton).perform();



› Drag and drop

Drag, and drop is an action where a user grabs an element with a mouse button, drags it to a different location, and then drops it. More and more web applications are implementing this action. 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
driver.get("https://webdriveruniversity.com/Actions/index.html");

// identify the draggable and droppable web elements
By loc_gray = By.xpath("/html//div[@id='draggable']");
By loc_blue = By.xpath("/html//div[@id='droppable']");

WebElement draggableGray = driver.findElement(loc_gray);
WebElement droppableBlue = driver.findElement(loc_blue);

// -- code
Actions complexActions = new Actions(driver);
complexActions.dragAndDrop(draggableGray,droppableBlue).perform(); // drag and drop