Selecting link in JS hidden dropdown menu

Question

I have a JavaScript hidden drop down menu that doesn't display the links unless the mouse hovers over it. I am trying to select a link within this menu using ruby watir-webdriver. I can select the link using .hover that shows the contents in the drop down menu. But I am having trouble selecting any of the links within the menu. In this case I want to click on the link "item1". Here is the html code:

    <script type="text/javascript">
    <div id="menuWHeader" class="menuWf">
    <span class="menuTitle" onclick="goWindow(oprWin)"  onmouseout="menuCollapse('menuWContent')" onmouseover="menuExpand('menuWContent')"> window </span>
    <table id="menuWContent" class="menuContent" onmouseout="menuCollapse("menuWContent")" onmouseover="menuExpand("menuWContent")" style="visibility: hidden;">
    <tbody>
    <tr>
    <td class="menuItemNormal" onclick="goWindow(oprWin)" onmouseout="menuNormal(this)" onmouseover="menuSelect(this)">
    <img id="imgMenuWindow1" alt="" src="https://<myurl>/images/check-none.gif">
    item1
    </td> 
    </tr>
    <tr style="display:none">
    <td onclick="goWindow(crtWin)" onmouseout="menuNormal(this)" onmouseover="menuSelect(this)">
     <img id="imgMenuWindow2" alt="" src="https://<myurl>/images/check-none.gif">
    item2
    </td>
    </tr>
    <tr>
    <td class="menuItemNormal" onclick="goWindow(libWin)" onmouseout="menuNormal(this)" onmouseover="menuSelect(this)">
    <img id="imgMenuWindow3" alt="" src="https://vts42.commstor.crossroads.com/images/check-none.gif">
    item3
    </td>
    </tr>

The second table row item "item2" is hidden and does not display on the menu(greyed out in code). So only item1 & item3 are visible on the menu when I hover over it.

As mentioned I can hover on "window" which is the title of this menu and this then displays the menu items. I just cannot select any of the items in the list. Right now I am just trying to select item1. below is the watir code to hover on the menu.

 wb.div(:id => 'menuWHeader').span(:class =>'menuTitle').hover

I have tried a bunch of stuff that hasn't worked so I don't see any point in posting my failed attempts. Any help is appreciated.

Justin Ko Justin Ko · Accepted Answer · 2016-01-22T18:04:32

It looks like you want to click the td elements. This is based on the HTML having the onclick attribute for those elements.

It looks like the only unique property about the elements is there text. Depending how many tables you have on the page, you could do:

wb.td(text: 'item1').when_present.click

If there are other tables, you might want to scope the search to just the header div:

wb.div(:id => 'menuWHeader').td(text: 'item1').when_present.click

Note that the when_present method is included to ensure that Watir waits for the menu to appear before trying to click the td.

Selecting link in JS hidden dropdown menu

1 Answers