I have come across an issue today about handling hidden elements. And I came up with the below questions to be answered:
- How to click on a hidden link in WebDriver?
- How to click on a hidden element in WebDriver?
- How to click on a SubMenu which is only visible after hovering the mover over to Menu?
OS : Windows 7 / Browser: IE9 and FF10 / Web Driver : Selenium 2.19.0
In Selenium WebDriver, I found one issue that was about the link in the Sub Menu that I wanted to do check and then click. Now, The main Menu was fixed on the page so that I could click on that element and got the text and confirmed. However, while trying to get the value for a SubMenu, I failed. It did not find those element and I found that there is the problem.
Now, to get a work around this issue, I had to first move my mouse towards the main Menu (or click on it) to be able to display the SubMenu. There is not simple and straight answer to this issues. And ofcourse, then I googled it. I finally got to the answer of using Actions in the code. Here is the code if you want to have a look at it.
WebElement mnuElement; WebElement submnuElement; mnEle = driver.findElement(By.Id("mnEle")).Click(); sbEle = driver.findElement(By.Id("sbEle")).Click(); Actions builder = new Actions(driver); // Move cursor to the Main Menu Element builder.MoveToElement(mnEle).Perform(); // Giving 5 Secs for submenu to be displayed Thread.sleep(5000L); // Clicking on the Hidden SubMenu driver.findElement(By.Id("sbEle")).Click();
The only problem with this code is it works like a charm with FF but doesn’t work with IE. In IE, mouse cursor does not stay on element and as a result popup becomes visible for a fraction of a second or doesn’t appear.
You can also use JQuery as another work around to this hence it will execute it and move the pointer as you need.
Using the .mouseover() method
js.ExecuteScript("return $(\"a:contains('Fruits')\").mouseover();"); // Mouse hove to main menu webDriver.FindElement(By.LinkText("Banana")).Click();
OR using the .hover() method
OR using the .mouseenter() method
Give this a go and please let me know which one helped you resolve your issue.