在 JS 隐藏下拉菜单中选择链接答案

【问题标题】：Selecting link in JS hidden dropdown menu在 JS 隐藏下拉菜单中选择链接
【发布时间】：2016-01-23 02:04:32
【问题描述】：

我有一个 JavaScript 隐藏下拉菜单，除非鼠标悬停在它上面，否则它不会显示链接。我正在尝试使用 ruby watir-webdriver 在此菜单中选择一个链接。我可以使用 .hover 选择在下拉菜单中显示内容的链接。但我无法选择菜单中的任何链接。在这种情况下，我想单击链接“item1”。这是html代码：

    <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>

第二个表格行项目“item2”被隐藏并且不显示在菜单上（在代码中显示为灰色）。因此，当我将鼠标悬停在菜单上时，菜单上只有 item1 和 item3 可见。

如前所述，我可以将鼠标悬停在此菜单的标题“窗口”上，然后显示菜单项。我只是无法选择列表中的任何项目。现在我只是想选择 item1。下面是悬停在菜单上的 watir 代码。

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

我已经尝试了一堆没有用的东西，所以我认为发布我的失败尝试没有任何意义。任何帮助表示赞赏。

【问题讨论】：

标签： ruby watir watir-webdriver

【解决方案1】：

您似乎想点击td 元素。这是基于具有这些元素的 onclick 属性的 HTML。

看起来元素的唯一独特属性是文本。根据页面上有多少表，您可以这样做：

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

如果还有其他表，您可能希望将搜索范围仅限于标题 div：

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

请注意，包含when_present 方法是为了确保Watir 在尝试单击td 之前等待菜单出现。

【讨论】：