How To Do Mouse Over In Selenium WebDriver

Use the Actions class of the Selenium WebDriver API for emulating complex user gestures such as mouse over.

Some sites use listboxes and dropdown lists that expand when the user mouses over them. 

Finding the listbox and clicking it may not work correctly in such cases.

The user must mouse over the listbox first and then click it.


Problem

Let's take for example the results page of the BestBuy.ca site.

The page includes a dropdown list for changing the sort order of the results.

The dropdown list expands when mousing over it so the user can select one of the sort orders.

The user will go through the following steps to change the sort order:

1. mouse over the dropdown list
2. mouse over a sort option and click it

How do you emulate these actions in a webdriver script?

Solution

The first step can be done using the moveToElement() method of the Actions class:

Actions builder = new Actions(driver);
builder.moveToElement(sortList).perform();

What about the other step?

The Actions class allows creating a chain of actions and executing it.

A chain of actions example looks as follows:

Actions builder = new Actions(driver);
builder.moveToElement(element).click().perform();

First, an action builder object is created.

All user actions (mouse over the element, click the element) are added to the action builder object. After adding the actions to the action builder object, this object will execute the actions from the chain.

Lets see how the webdriver mouseover example code looks like:

import static org.junit.Assert.assertTrue;
import org.junit.After;
import org.junit.Before;
import org.junit.Test;
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;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;

public class Class1 {

  WebDriver driver;
  WebDriverWait wait;

  String url = "http://www.bestbuy.ca/Search/SearchResults.aspx" +
               "?path=ca77b9b4beca91fe414314b86bb581f8en20&query=ipad";

  String sortListLocator = 
          "(//span[@class='sprite-base icon-filter-dropdown'])[1]";

  String highToLowSortLocator = "(//li[@class='sorting-subitem']" +
                                "/a[contains(text(), 'High to Low')])[1]";

  @Before
  public void setUp() { 

    System.setProperty("webdriver.chrome.driver", 
                       "C:\\Selenium\\BrowserDrivers\\chromedriver.exe");

    driver = new ChromeDriver();
    wait = new WebDriverWait(driver, 10);
    driver.manage().window().maximize();

  }

  @After
  public void tearDown() {
    driver.quit();
  }

  @Test
  public void testMouseOver() throws InterruptedException {

    driver.get(url);

    assertTrue(wait.until(ExpectedConditions.
               titleContains("Best Buy"))); 
  
    Thread.sleep(1000);

    WebElement sortList;
    sortList = wait.until(ExpectedConditions.
               elementToBeClickable(By.xpath(sortListLocator)));

    Actions builder = new Actions(driver);
    builder.moveToElement(sortList).perform();

    WebElement highToLowSort;
    highToLowSort= wait.until(ExpectedConditions.
                   elementToBeClickable(
                   By.xpath(highToLowSortLocator)));

    builder.moveToElement(highToLowSort).click().perform();  
      
    assertTrue(wait.until(ExpectedConditions.
               urlContains("sortBy=price&sortDir=desc")));

  }

}

Share this post