Recently we encountered a snag using YUI’s menu button widget. The button doesn’t respond to Selenium click commands. Given its untestability we seriously questioned whether it was worth using the widget.
However, there is a solution! In Selenium you can select a button’s menu item by clicking the underlying <a> element. For example given the following HTML for a menu button:
<span id="yui-gen3" class="yui-button yui-menu-button">
<span class="first-child">
<button id="yui-gen3-button" type="button">Two</button>
</span>
</span>
<div id="yui-gen4" style="z-index: 1; position: absolute; visibility: hidden;">
<div class="bd">
<ul class="first-of-type">
<li id="yui-gen5" class="yuimenuitem first-of-type" groupindex="0" index="0">
<a class="yuimenuitemlabel" href="#">One</a>
</li>
<li id="yui-gen6" class="yuimenuitem yui-button-selectedmenuitem" groupindex="0" index="1">
<a class="yuimenuitemlabel" href="#">Two</a>
</li>
....
Select “One” from the menu using Selenium:
Command: click
Target: link=One
Once the <a> has been clicked the selected menu item is accessible in JavaScript via the menu button instance, e.g.
var menuButton = new YAHOO.widget.Button({...});
...
menuButton.get("selectedMenuItem");
Don’t use menuButton.getMenu().activeItem as that doesn’t get set when the <a> is clicked via Selenium.