Selenium WebDriver : Generating Mouse Hover Event On Main Menu To Click On Sub Menu

Selenium WebDriver is totally freeware software testing tool and we can use it for software web application regression purpose. Hovering mouse on main menu or any other element of web page or simulating mouse movement in webdriver is not very tough task. As you know, We can perform most of actions and operations directly in webdriver software testing tool and you can VIEW FEW OF THEM ON THIS PAGE. But there are also some actions which we can not perform directly in webdriver and to perform them, we need to use some tricky ways. Generating mouse hover event is one of them.

To generate mouse hover event in webdriver software testing tool, We can use advanced user interactions API constructor "Actions" with "moveToElement" method. Bunch of syntax to hover mouse on main menu is as bellow. You can replace xpath of an element as per your requirement in bellow given syntax.

Actions actions = new Actions(driver);
WebElement moveonmenu = driver.findElement(By.xpath("//div[@id='menu1']/div"));
actions.moveToElement(moveonmenu);
actions.perform();

Above example will only move mouse on targeted element of software web application. It will not perform click operation. To perform click operation on sub menu, we need to use click() action before perform() as shown in bellow example.

package junitreportpackage;



import java.io.IOException;

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.firefox.FirefoxDriver;
import org.openqa.selenium.interactions.Actions;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;


public class Mytesting {
 WebDriver driver = null;
 
 @Before
 public void beforetest() {
  System.setProperty("webdriver.gecko.driver", "D:\\Selenium Files\\geckodriver.exe");
  driver = new FirefoxDriver();
  driver.manage().window().maximize();
  driver.get("http://only-testing-blog.blogspot.com/p/mouse-hover.html");
 }
 
 @After
 public void aftertest() {
  driver.quit();
  
 }
 
 @Test
 public void test () throws InterruptedException, IOException 
 { 

  //Generate mouse hover event on main menu to click on sub menu
  Actions actions = new Actions(driver);
  WebElement moveonmenu = driver.findElement(By.xpath("//div[@id='menu1']/div"));
  actions.moveToElement(moveonmenu).moveToElement(driver.findElement(By.xpath("//div[@id='menu1choices']/a"))).click().perform();
  
  WebDriverWait wait = new WebDriverWait(driver, 15);
  wait.until(ExpectedConditions.titleContains("Google"));
 }
   
}

9 comments:

  1. what is the usage of mousehover function
    I am able to do this by using the below code
    driver.findelement(by.xpath(“xpath”)).click();

    Please tell me the exact difference between the two.

    ReplyDelete
    Replies
    1. Sometimes, sub menu items are getting rendered in DOM when you mouse hover on main menu. In that case, direct xpath will not work to click on sub menu. You need to mouse hover on main menu.

      Delete
    2. Thank you Aravind ji. This blog is very helpful for beginners like me.

      Delete
  2. How did it selected Google in submenu using only the below code:
    actions.moveToElement(moveonmenu).moveToElement(driver.findElement(By.xpath("//div[@id='menu1choices']/a"))).click().perform();

    ReplyDelete
  3. 1. actions.moveToElement(moveonmenu) will move mouse on main menu Search Engine to load sub menu.
    2. moveToElement(driver.findElement(By.xpath("//div[@id='menu1choices']/a"))).click().perform(); will click on sub menu Google

    ReplyDelete
    Replies
    1. How to select second value from the list. For Example : Yahoo.
      Please let me know asap.

      Delete
    2. Use this code snippet.

      actions.moveToElement(moveonmenu).moveToElement(driver.findElement(By.xpath("//div[@id='menu1choices']/a[2]"))).click().perform();

      If you will se the hierarchy, the anchor tag just after menu1choices is of "Google", so if you use a[2], it will click on Yahoo.

      Delete
    3. actions.moveToElement(moveonmenu).moveToElement(driver.findElement(By.xpath("//div[@id='menu1choices']/a[2]"))).click().perform();

      Delete
  4. hello sir what is the use of perform method when click method clicks on the link

    ReplyDelete