How to Hover over and click on an invisible element using selenium webdriver?

Question

There is an invisible element on my HTML page which becomes visible when a mouse hover is done on the element. What I Have to do is

1. Hover over the element
2. Click on the element (it will display 4 options)
3. Click on one of the options

I am using Java API for selenium web driver and following is what I have been trying

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

subMenuBTN.click();

1. MainMenuBTN = element that becomes visible when you hover the mouse over it
2. subMenuBTN = element that is being chosen out of the menu options that are displayed

What is happening is, the click() on MainMenuBTN is generating ElementNotVisible exception. I tried following to avoid this, but did not work.

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

subMenuBTN.click();

A Note: mainMenuBTN and subMenuBTN are WebElements generated by

driver.findElement(By.xpath("xpath_string"))

Am I missing anything? Help appreciated !

Answer 1

using javascript executor like

((JavascriptExecutor) webdriver).executeScript("document.getElementById('btn').click();");

Answer 2

Well, after going through your questions numerous times and changing my answers many times I will go with -

Issue - what I got from the original code -

You need to move the cursor to the mainMenuBTN (which is visible not the element that becomes visible when you hover the mouse over it ) and subMenuBTN is then displayed which you need to click.

The only edit to your original code as per me will be adding a statement to move the cursor to your subMenuBTN before you click it. This way works fine for me when I need to click sub menu item.

Actions builder = new Actions(driver);
builder.moveToElement(mainMenuBTN).build().perform();
builder.moveToElement(subMenuBTN).build().perform();
subMenuBTN.click();

Please let me know if this is the case.

Answer 3

Your Actions builder looks slightly wrong to me. Here is a example I use:

public static void mouseClickByLocator( String locator ) {    
  WebElement el = driver.findElement( By.cssSelector( locator ) );    
  Actions builder = new Actions(driver);    
  builder.moveToElement( el ).click( el );    
  builder.perform();    
}

Answer 4

Actions builder = new Actions(driver);
builder.MoveToElement(menu).MoveToElement(submenu).Click().Perform();

It works under Chrome, but doesn't work in FF

Answer 5

You could try this:

1. Get your WebElement by its xpath.
2. Hover element.
3. Get your WebElement by its xpath again.
4. Click it.

It's because of element's id is changing when you hover over it and you should find it again.

Actions builder = new Actions(driver);

WebElement mainMenuBTN = getWebEl("xpath_string",5);
builder.moveToElement(mainMenuBTN).perform();
mainMenuBTN = getWebEl("xpath_string",5);
builder.click(mainMenuBTN);

I use this method to ipmlement controlled explicit wait into my elements' instantiation.

protected WebElement getWebEl(String xpath, int waitSeconds) {
    wait = new WebDriverWait(driver, waitSeconds);
    return wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath(xpath)));
}

Answer 6

My case we had a table of rows, if mouse over on the row, one of the column(td) should display some 4 icons, we should click on it.

Action action=new Action(driver);
action.moveToElement(hoverElt).clickAndHold().build().perform();

It worked for me. moveToELement() move your control to the element

clickAndHold() clicks and holds the hovered element, so that its easy for us to do operation on visible elements.