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

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

1 个答案: