How can Watir consistently deal with a javascript dropdown menu? - 【StackMirror】|javascript|drop-down-menu|watir-webdriver

I am n00b to watir and I'm testing a web app that uses extjs. The app has a main menu with several items that have sub items. One of the main menu items has the same text as one of its submenus. In watir webdriver I have this code:

jobs_menu = d.p(:text => "Jobs")
jobs_menu.when_present.flash
jobs_menu.click
jobs_submenu_item = d.a(:text => "Jobs")
jobs_submenu_item.when_present.flash
jobs_submenu_item.click

This is supposed to flash and click the first menu and cause the submenu to drop. Then it should flash and click the submenu item. I get 3 results in 3 different browsers with this:

Firefox - 1st menu flashes and drops, submenu item flashes, but does not get clicked

Chrome - 1st menu flashes and drops, submenu item flashes and clicks OK - yay!

IE - 1st menu flashes and drops, then it goes away and the submenu item cannot be found with ElementNotVisibleError

Interesting to note for a different menu where the drop down text is different than the submenu text then Firefox and Chrome both work OK. IE still gives the ElementNotVisibleError.

How can I get this to work the same in all 3 browsers?

2012-04-03 21:02
by ibodog

Do have a sample page that we can test against (ie so we can reproduce the problem and try different solutions) - Justin Ko 2012-04-03 21:16

Go look at the extjs website and their demo pages and see if you can find an example of a control that is the same as the one you are using - Chuck van der Linden 2012-04-03 21:37

In some cases the display of menus does not require a click, and can be triggered by mousing over the menu. In that case it might work to try .hover instead of .click to get the menu to appear.

A problem with a lot of these custom controls is that they work differently on different browsers, which means your automation code MAY have to take that into account, this is the downside to custom controls like this and not using basic HTML elements

2012-04-03 21:40
by Chuck van der Linden

Sorry, I don't have a web facing page nor do the sample controls at the extjs website look like they match this application's menu. I was trying to post a screen shot of this section as seen in firebug, but I'm too much of a n00b here to be allowed to upload a graphic file. The .hover didn't work because the menu disappears as it goes on to try the .click on the submenu item. Does Watir allow more direct access to the webdriver advanced user interactions interface? Maybe I could string together the two clicks that way - ibodog 2012-04-05 17:13

Posted this up on the Google Watir group. Short answer is to use the Watir Browser object to access the Selenium WebDriver and use Selenium's Action Builder to build a two-click command - ibodog 2012-04-26 18:17

@ibodog, Might you make an answer linking to the thread on Google Groups and summarizing it here? I'm unable to find it - echristopherson 2014-10-18 20:44