Watir-webdriver-选择列表显示样式：无

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大师能够提出更好的解决方案，并且很快，因为我认为这种页面设计将变得越来越普遍。