Click submenu which is dynamicly visible in Selenium WebDriver

Question

In my scenario, I need to click the submenu that's only visible when its parent menu is in 'mouse over' status:

MainMenu (button)
SubMenu of MainMenu (span)
SubMenu of SubMenu of MainMenu (span)
SubMEnu of SubMenu of SubMenu of MainMenu (span)

I need to click the 4th submenu, but it can only be visible when 1st menu is clicked on and mouse over the 2nd, and then mouse over the 3rd submenu.

I've tried with the ActionChains (python binding) api (move_to_element, click, perform, even click_and_hold) in Selenium WebDriver, but had no luck. Can anyone please help me with this?

Answer 1

I have run into this problem multiple times, people love their dynamic rollout menus. The best way I've found to handle these (this is in java) is by using jQuery (If it's enabled on the site you are testing).

Just google jQuery and find some tutorials on adding CSS to an element. Then I used Chrome to work out a jQuery line that added the correct styles (mimicking a mouseOver) to the proper elements.

Here is what my jQuery turned out to be:

$('#menu div:eq(0) ul:eq(0) li div:eq(1)').css({height: '96px', width: '164px', left: '0px', top: '24px', zIndex: 10, visibility: 'visible', overflow: 'visible', display: 'block' });
$('#menu div:eq(0) ul:eq(0) li div:eq(1) ul:eq(0)').css({height: '96px', width: '164px', left: '0px', top: '24px', zIndex: 10, visibility: 'visible', overflow: 'visible', display: 'block' });

I ran this code using the selenium.JavascriptExecutor, and then clicked the requested element.

Good luck!

Answer 2

I had similar problem.

Can you navigate from one menu to its submenu using keyboard arrows?

If you have that option:

Firefox driver = new FirefoxDriver();
(...)
By locator = By.xpath("...");

Locatable hoverItem = (Locatable) driver.findElement(locator);
Mouse mouse = ((HasInputDevices) driver).getMouse();
mouse.mouseMove(hoverItem.getCoordinates());

driver.click(locator);

then using findElement() you can specify where to go using keyboard arrows

Actions builder = new Actions(driver);
for(int i=1; i<someVariable; i++){
     builder.sendKeys(Keys.ARROW_DOWN).build().perform();
}

Answer 3

The Actions API has worked fine for me in Firefox . However, mouseover doesn't quiet work in other browsers including IE. This is a known issue. http://code.google.com/p/selenium/issues/detail?id=2067

I use java and have done hovers succesfully in Firefox using the code that's similar to Frank's. In addition to Frank's code, I disable the native events and maximize my window

 FirefoxProfile p = new FirefoxProfile();
 p.setEnableNativeEvents(false);
 WebDriver driver = new FirefoxDriver(p);
driver.get("url");
driver.manage().window().maximize();

Answer 4

As I never coded Python I can only offer my Java way to accomplish that:

//I pass an Array of WebElements and an element to click at to the method
private void hoverAndClick(WebElement[] hoverer, WebElement element) {
    //declare new Action
    Actions actions = new Actions(driver);
    // Iterate through the WebElements from the Array
    for (WebElement we : hoverer) {
        // hover each of them
        Action hovering = actions.moveToElement(we).build();
        hovering.perform();
    }
    //finally click the WebElement to click at
    element.click();

}

And than use it like:

hoverAndClick(new WebElement[] { mainMenu, subMenuMainMenu, subMenuSubMenuMainMenu},   
                                   subMenuSubMenuSubMenuMainMenu);

If you there's no need to refer separately to the WebElement to click at you can attach it to the Array of course