javascript - watir-webdriver - 选择列表显示样式 : none

Question

大家好，我一直在努力寻找解决问题的方法，但找不到。

我需要从该 html 代码中的第二个选择中选择一个值，该值具有 name="update_status[5955483]"，但我不知道该怎么做。

我尝试过但没有成功。

      Watir:



 1-  browser.select_list(:name, "update_status[5955483]").select_value("A")

 2 - input_field = browser.div(:class => 'minict_wrapper orange')
 input_field.link(:name => 'update[5955483}]' ).click

 3 - browser.input( :value, "B").click 

没有任何效果，第一个在查找元素时给我错误，第三个只是点击第一个输入。

我已经搜索过，根据我的理解，我需要转到所需的选择，然后单击上面的输入以使 UL 可见，然后从 UL 中选择值，只是不知道该怎么做.

任何帮助将不胜感激。

 HTML:

     <tbody class="filters">
    <tr>
    <td width="10%"> </td>
    <td width="20%">
    <td width="20%">
        <select id="status_filter" class="jscompleted" name="filter_status"   data-select-onchange="$(this.element).trigger('change');" data-select-minimalectify="orange" style="display: none;">
            <option value="all">All</option>
            <option value="a"> A </option>
            <option selected="selected" value="moderation"> B </option>
            <option value="c"> C </option>
            <option value="d"> D </option>
            <option value="e"> E </option>
            <option value="f"> F </option>
            <option value="g"> G </option>
        </select>
        <div class="minict_wrapper orange" data-minictfied="" data-minict-id="status_filter" data-minict-class="jswait">
        <input type="text" placeholder="B" value="B" data-minictfied="">
        <ul data-minictfied="" style="display: none;">

            <li class="minict_first" data-value="all">All</li>
            <li class="" data-value="a"> A </li>
            <li class="selected" data-value="moderation"> B </li>
            <li class="" data-value="c"> C </li>
            <li class="" data-value="d"> D </li>
            <li class="" data-value="e"> E </li>
            <li class="" data-value="f"> F </li>
            <li class="minict_last" data-value="g"> G </li>
            <li class="minict_empty" style="display: none;">No results match your keyword.</li>
        </ul>
        </div>
    </td>

    <td width="20%">
    <td width="20%">
    <td width="10%">
</tr>


<tr>
<tr>
</tbody>

<tbody>
<tr>
    <td>
    <td> MV Name </td>
    <td>
        <select class="jscompleted" name="update_status[5955483]" data-select-onchange="$(this.element).trigger('change');" data-select-minimalectify="orange" style="display: none;">
            <option value="a" > A </option>
            <option selected="selected" value="" > B </option>
            <option value="c" > C </option>
            <option value="d" > D </option>
            <option value="e" > E </option>
            <option value="f" > F </option>
            <option value="g" > G </option>
        </select>
        <div class="minict_wrapper orange" data-minictfied="" data-minict-class="jswait">
        <input type="text" placeholder="B" value="B" data-minictfied="">
        <ul data-minictfied="" style="display: none;">
            <li class="minict_first" data-value="a"> A </li>
            <li class="" data-value="c"> C </li>
            <li class="" data-value="d"> D </li>
            <li class="" data-value="e"> E </li>
            <li class="" data-value="f"> F </li>
            <li class="minict_last" data-value="g"> G </li>
            <li class="minict_empty" style="display: none;">No results match your keyword.</li>
        </ul>
        </div>
    </td>

Answer 1

是的。我正在测试的网站也有类似的问题。最近，这似乎是网站设计的新趋势，因为显然单靠选择列表不能使它看起来像无序列表那样花哨。

有一种折磨人的方式来编写程序方法，在您单击显示它的东西后与动态生成的 HTML 交互，但它是非常难看的代码，我放弃使用它，转而使用下面的代码，我'为了简单起见，我们缩短了:

@browser.execute_script(%{jQuery("select[#{attrib}|='#{value}']").show();})

此命令根据目标列表的标记属性(如 :id、:name、:title 等)在 UI 中公开实际的选择列表

一旦选择列表被该 jQuery 命令取消隐藏，您就可以正常与其交互。

希望 Watir 的一位专家能尽快提出更好的解决方案，因为我认为这种页面设计在未来会变得越来越普遍。