In this post we will discuss one of the common yet easiest feature called mouse hovering in Selenium. There are many situations where we might need to hover a to control in applications UI and the UI will bring the interactive options or menu or window on-the-fly (using JQuery or Javascript). Then we may need to click on the control and perform some other operation used for automation testing.
For doing these operations, Selenium has a special package called org.openqa.selenium.interactions which has a class called Actions, which has lot of special classes to perform operation such as hover as discussed in the last post of drag and drop.
We can perform the mouse hover and click in our demo site http://executeautomation.com/demosite/Login.html as shown below
Here is the complete video discussed about the Hover and hover click operation,
Here is the code snippet
Hover
public static void Hover(WebDriver driver, WebElement element) {
Actions action = new Actions(driver);
action.moveToElement(element).perform();
}
Hover and Click
public static void HoverAndClick(WebDriver driver,WebElement elementToHover,WebElement elementToClick) {
Actions action = new Actions(driver);
action.moveToElement(elementToHover).click(elementToClick).build().perform();
}
Thanks for watching the video and reading the post !!!
Please leave your comments and let me know if there is anything needed to be improved in this post.
Thanks,
Karthik KK
Post Author:
Karthik kk
21 Replies to “Mouse hover and click in Selenium”
Thanks for simple n nice tutorial on mouse hover and click. Can we perform all 3 operations in one action? The first hover u did separately, can that also be combined with the next hoverandclick function?
Yes you can. To make more generic, you can write all the operation by first getting the WebElement via List and then you can call them one by one to perform operation. This makes you to reduce your number of parameters passed.
Hi Jeff/karthik,
I want mouse over on a menu item and select sub menu item in safari browser. As you said, it is not happening using Actions class in selenium.
Tried in internet and found your comment here and got a doubt in your solution.
In my case, selector should be menu item and How to give value for selector here?
I am new to jquery. Please help
I would like to run more than 1 test methods in single webdriver(In one browser without closing that). Please let me know how to do so. I tried to set as
[TestClass]
[SingleWebDriver(true)]
If your question is just to run multiple test sequentially on same browser, then its very simple. Just dont close your browser once your first test is completed and call second test method, it will run in same browser !!!
I don’t think the attribute you are using in your code will help.
public static void main(String[] args) throws Exception {
System.setProperty(“webdriver.gecko.driver”,”F:\\Pankaj-wkr\\geckodriver.exe”);
FirefoxDriver driver = new FirefoxDriver();
// open URL
driver.get(“http://test.planmytour.in/login”);
//Enter USERNAME
driver.findElement(By.name(“username”)).sendKeys(“Sunil”);
// Enter PASSWORD
driver.findElement(By.name(“password”)).sendKeys(“admin”);
}
class b2c{
public void mouseover() throws InterruptedException{
FirefoxDriver driver = new FirefoxDriver();
driver.get(“http://test.planmytour.in/dashboard/”);
WebElement menu = driver.findElement(By.xpath(“//*[@id=’b2ctour_block’]/ul/li[4]/a”));
WebElement SUBMenu = driver.findElement(By.xpath(“//*[@id=’b2ctour_block’]/ul/li[4]/a”));
Actions action = new Actions(driver);
action.moveToElement(menu).perform();
action.click(SUBMenu).perform();
}
}
}
I want to login fast the site then mouse over on B2C menu and then click on Submenu Quick tour,But it i run this code it is only login the site then i is stop ,so can you help me on that.
Thankx….
I also face the same issue. I tried to click on hdfc bank site – product – loans- car loan. when I tried using move to element method it shows offset value error. Offset within element cannot be scrolled into view. (0,0). Plz check the issue. I am stuck.
Hey Karthik, really appreciate your efforts. It helps alot. But i have few doubts regarding pop ups.
I have a side menu bar which opens only after hovering, and after that i need to click on one of the options on main page. But when i use the Actions method to hover and select, the control doesnt release because of which the side bar doesnt shrink (The options i need to click is visible only once the side bar shrinks again after hovering and selecting the option). Kindly share the code so that i can move the control from the side bar to the main page.
Thanks for sharing vidoe.
I am trying the same scenario in this site(https://www.thewarehouse.co.nz).
I wanted to mouse over Clothing & Jewellery and click on Activewear Link.
Sample Code:
WebElement menu = driver.findElement(By.xpath(“//*[@id=”wrapper”]/header/nav/div[2]/div[1]/div/div/ul/li[1]/a/span”));
WebElement Childmenu = driver.findElement(By.xpath(“//*[text() = ‘Activewear ‘]”));
Hover(driver, menu);
HoverAndClick(driver, menu, Childmenu);
But not click on Activewear link.
Can you please help?
Kartik
Thanks a lot for sharing such a useful video.
I want to see an example where you can do both hover on an element
can you or anyone please share example like that
Hi,
This is Amit.I want to automate a Canvas Graph which contains multiple bars and hover on each bar (which shows some data on UI).In the DOM it shows like for the entire Graph
so can you tell me how to automate this one by python-selenium
I am not very sure with Selenium, since all these graph validations can better be done with Visual tools like Sikuli, Percy etc, I have a video on the same for Cypress + Percy which does exactly the same thing https://youtu.be/x4aK__G-JuY
Hi,
how to do this mouseover & mouse click in selenium c# with visual studio 2015.
i tried many time’s but i cant able to get output like this. Help me to clear this issue.
Thanks for simple n nice tutorial on mouse hover and click. Can we perform all 3 operations in one action? The first hover u did separately, can that also be combined with the next hoverandclick function?
Yes you can. To make more generic, you can write all the operation by first getting the WebElement via List and then you can call them one by one to perform operation. This makes you to reduce your number of parameters passed.
Hope this will help.
Thanks,
Karthik KK
That will not work in Safari (I know…..I tried). Here’s what will work everywhere (if there is jQuery available).
JavascriptExecutor js = null;
String selector = “”;
String jquery1 = “jQuery(\”” + selector + “\”).eq(0).mouseover();”;
js = (JavascriptExecutor) driver;
js.executeScript(jquery1);
After that you can click on the newly visible items. My code for that is as follows (they are links):
WebDriverWait wait = new WebDriverWait(driver, 50);
wait.ignoring(NoSuchElementException.class)
.ignoring(NoSuchMethodError.class)
.ignoring(StaleElementReferenceException.class);
WebElement element = null;
try {
element = wait.until(ExpectedConditions
.visibilityOfElementLocated(By.linkText(linkText)));
element = wait.until(ExpectedConditions.elementToBeClickable(By
.linkText(linkText)));
element.click();
Thanks for the information Jeff !!
This will help.
Thanks,
Karthik KK
Hi Jeff/karthik,
I want mouse over on a menu item and select sub menu item in safari browser. As you said, it is not happening using Actions class in selenium.
Tried in internet and found your comment here and got a doubt in your solution.
In my case, selector should be menu item and How to give value for selector here?
I am new to jquery. Please help
Hi,
I would like to run more than 1 test methods in single webdriver(In one browser without closing that). Please let me know how to do so. I tried to set as
[TestClass]
[SingleWebDriver(true)]
but no use.
You mean running test in parallel ?
If yes, then you should use selenium grid, which you can find from here https://www.youtube.com/watch?v=g1IYmdmsCkQ&list=PL6tu16kXT9PoIHrwaqkBitAmjlrG1Bgxp&index=10
If your question is just to run multiple test sequentially on same browser, then its very simple. Just dont close your browser once your first test is completed and call second test method, it will run in same browser !!!
I don’t think the attribute you are using in your code will help.
Thanks,
Karthik KK
package pmt_adminlogin;
import org.openqa.selenium.By;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.interactions.Actions;
public class Login {
public static void main(String[] args) throws Exception {
System.setProperty(“webdriver.gecko.driver”,”F:\\Pankaj-wkr\\geckodriver.exe”);
FirefoxDriver driver = new FirefoxDriver();
// open URL
driver.get(“http://test.planmytour.in/login”);
//Enter USERNAME
driver.findElement(By.name(“username”)).sendKeys(“Sunil”);
// Enter PASSWORD
driver.findElement(By.name(“password”)).sendKeys(“admin”);
//Click on LOGIN
driver.findElement(By.xpath(“/html/body/div[3]/form[1]/div[4]/button”)).click();
}
class b2c{
public void mouseover() throws InterruptedException{
FirefoxDriver driver = new FirefoxDriver();
driver.get(“http://test.planmytour.in/dashboard/”);
WebElement menu = driver.findElement(By.xpath(“//*[@id=’b2ctour_block’]/ul/li[4]/a”));
WebElement SUBMenu = driver.findElement(By.xpath(“//*[@id=’b2ctour_block’]/ul/li[4]/a”));
Actions action = new Actions(driver);
action.moveToElement(menu).perform();
action.click(SUBMenu).perform();
}
}
}
I want to login fast the site then mouse over on B2C menu and then click on Submenu Quick tour,But it i run this code it is only login the site then i is stop ,so can you help me on that.
Thankx….
Is it something to do with page wait ?
Did you tried waiting for the page to load using implicit or explicit wait ?
Thanks,
Karthik KK
Hi karthik,
I also face the same issue. I tried to click on hdfc bank site – product – loans- car loan. when I tried using move to element method it shows offset value error. Offset within element cannot be scrolled into view. (0,0). Plz check the issue. I am stuck.
Hi Karthik,
I want to excute on Firefox.
Action class is not working in firefox. For referece – https://github.com/mozilla/geckodriver/issues/233
Do we have any other solution for performing hover action
Your Tutorial is good….But kindly speak in Indian accent..your imitation is annoying
Sure, will try to improve or rather change.
Thanks,
Hi,
I need to get the tool tip(that is info icon ) text while mouse hover, can you help out this..?
Hey Karthik, really appreciate your efforts. It helps alot. But i have few doubts regarding pop ups.
I have a side menu bar which opens only after hovering, and after that i need to click on one of the options on main page. But when i use the Actions method to hover and select, the control doesnt release because of which the side bar doesnt shrink (The options i need to click is visible only once the side bar shrinks again after hovering and selecting the option). Kindly share the code so that i can move the control from the side bar to the main page.
Waiting for your reply. Thank you in advance.
Hi Karthik,
Thanks for sharing vidoe.
I am trying the same scenario in this site(https://www.thewarehouse.co.nz).
I wanted to mouse over Clothing & Jewellery and click on Activewear Link.
Sample Code:
WebElement menu = driver.findElement(By.xpath(“//*[@id=”wrapper”]/header/nav/div[2]/div[1]/div/div/ul/li[1]/a/span”));
WebElement Childmenu = driver.findElement(By.xpath(“//*[text() = ‘Activewear ‘]”));
Hover(driver, menu);
HoverAndClick(driver, menu, Childmenu);
But not click on Activewear link.
Can you please help?
Thanks
Saravanan
try{
WebElement element = driver.findElement(By.xpath(“(//a[@title=’Clothing & Jewellery’])[1]”));
Actions action = new Actions(driver);
action.moveToElement(element).perform();
Actions action1 = new Actions(driver);
WebElement element1 = (new WebDriverWait(driver, 40))
.until(ExpectedConditions.presenceOfElementLocated(By.xpath(“(//ul[@class=’css-1eumt2f’]//a[@title=’Activewear’])[1]”)));
action1.moveToElement(element1).build().perform();
Thread.sleep(8000);
driver.quit();
Kartik
Thanks a lot for sharing such a useful video.
I want to see an example where you can do both hover on an element
can you or anyone please share example like that
Hi,
This is Amit.I want to automate a Canvas Graph which contains multiple bars and hover on each bar (which shows some data on UI).In the DOM it shows like for the entire Graph
so can you tell me how to automate this one by python-selenium
I am not very sure with Selenium, since all these graph validations can better be done with Visual tools like Sikuli, Percy etc, I have a video on the same for Cypress + Percy which does exactly the same thing https://youtu.be/x4aK__G-JuY
Thanks,
Karthik KK
Hi,
how to do this mouseover & mouse click in selenium c# with visual studio 2015.
i tried many time’s but i cant able to get output like this. Help me to clear this issue.