Advanced User Interactions | Introducing Actions and moving the mouse over an element

In the Previous Tutorial, we learned to execute a piece of Javascript through WebDriver. In this tutorial, we’ll learn some advanced user interactions.

What is advanced user interactions?

Sometimes we need to interact with our system’s mouse or keyboard to simulate user interaction. For instance, let’s say, in a web application, there is a menu bar. On moving the mouse over one of the menu items, its sub-menu gets appear magically. We need to click on one of the sub-menu items.

Or let’s say we are on an e-commerce site looking for the latest smartphone. We need to drag and drop the price filter.  In these cases, we need our script to interact with the Systems’ mouse.

Similarly, we may encounter some scenarios where we are required to press certain keyboard buttons like TAB, Ctrl+C, Ctrl+V, Esc, Enter or Function keys (f1, f2 etc). In this case, we would need our script to interact with the Systems’ keyboard.

WebDriver provides a class that encapsulate mechanism to achieve Advanced User Interactions. It has methods defined to perform specific tasks like moving mouse, right-click, pressing keyboard etc. It also has the mechanism to perform a set of tasks together. We’ll go through some of these methods in this as well as subsequent tutorials.

Moving mouse over an element

Let us take a scenario:

  • Go to www.imdb.com 
  • On moving the mouse over ‘Movies, TV & Showtimes’ menu, a sub-menu gets to appear.
  • Under the submenu, click on the ‘Latest Trailers’ link. 

You need to import the following packages at the top of the file:

import org.openqa.selenium.interactions.Actions;
import org.openqa.selenium.interactions.Action;

Instantiate Actions and pass a reference of WebDriver

Actions builder = new Actions(driver);

Call the method to move the mouse over the target element

Action myAction = builder
			.moveToElement(eleMenuShowtimes)
			.build();

It looks like some typo. You were talking about Actions, not Action. what is the type of the myAction?

Well, the build() function generates a composite action that contains all actions to be performed on the element. It returns an object of type Action that is an interface. We need to call the perform() method to execute the action.

myAction.perform();

You can also combine the above two lines of codes into one:

builder.moveToElement(eleMenuShowtimes)
	.build()
        .perform();

First, we need to import the right package at the top of the file:

from selenium.webdriver import ActionChains

Instantiate ActionChains and pass a reference of WebDriver to it:

action_chains = ActionChains(driver)

Call the method to build the action for moving the mouse over the target element:

action_chains.move_to_element(eleMenuShowtimes)

Perform the action:

action_chains.perform()

When the above line of codes executes, it will perform the actions build by the builder. It’ll make the mouse hover over the target element, i.e ‘Movies, TV & Showtimes’. It’ll make the sub-menu appear so that we can click on the sub-menu item.

driver.findElement(By.linkText("In Theaters")).click();
driver.find_element_by_link_text("In Theaters").click()

Complete Code

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.Action;
import org.openqa.selenium.interactions.Actions;

public class AdvancedUserInteraction_MoveToElement {
 public static void main(String[] args) {
  System.setProperty("webdriver.chrome.driver", "C:\\selenium\\chromedriver.exe");
  WebDriver driver = new ChromeDriver();
  driver.manage().window().maximize();
  driver.get("http://www.imdb.com");
  WebElement eleMenuShowtimes = driver.findElement(By.id("navTitleMenu"));
  Actions builder = new Actions(driver);
  Action myAction = builder
			.moveToElement(eleMenuShowtimes)
			.build();
  myAction.perform();
  //You can also combine above two line of codes into one
  //builder.moveToElement(eleMenuShowtimes).build().perform();
  driver.findElement(By.linkText("In Theaters")).click();
  if(driver.getTitle().contains("New Movies In Theaters"))
   System.out.println("Passed");
  else
   System.out.println("Failed");
  driver.quit();
 } 
}
from selenium import webdriver
from selenium.webdriver import ActionChains

driver_path = "C:\\teachmeselenium\\chromedriver.exe"

driver = webdriver.Chrome(driver_path )
driver.get("www.imdb.com")
eleMenuShowtimes = driver.find_element_by_id("navTitleMenu")

action_chains = ActionChains(driver)
action_chains.move_to_element(eleMenuShowtimes)
action_chains.click(driver.find_element_by_link_text("In Theaters"))
action_chains.perform()

if driver.title == "New Movies In Theaters":
    print("Passed")
else:
    print("Failed")

driver.quit()

We will explore some more options like drag-and-drop operations in the Next Tutorial.

Leave a Reply