Testing YUI Menu Button with Selenium

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.