Watir-webdriver - 选择列表显示样式：无 [英] Watir-webdriver - Select a list display style: none

问题描述

大家好，我一直在试图找到解决我的问题的地方，找不到它们。

我需要从第二个选择中选择一个值在这个HTML代码中，名称=update_status [5955483]，我不知道如何。

我试过没有成功。 p>

  Watir：
 
 
 
 1- browser.select_list（：name， 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：
 
 < tr> 
< td width =10％> < / TD> 
< td width =20％> 
< td width =20％> 
 < option value =all>全部< / option> 
< option value =a> A< / option> 
< option selected =selectedvalue =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 orangedata-minictfied =data-minict-id =status_filterdata-minict-class =jswait> 
< input type =textplaceholder =Bvalue =Bdata-minictfied => 
 
 
< li class =minict_firstdata-value =all>全部< / li> 
< li class =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_lastdata-value =g> G< / li> 
 
< / ul> 
< / div> 
< / td> 
 
< td width =20％> 
< td width =20％> 
< td width =10％> 
< / tr> 
 
 
< tr> 
< tr> 
< / tbody> 
 
< tbody> 
< tr> 
< td> 
< td> MV名称< / td> 
< td> 
 < option value =a> A< / option> 
< option selected =selectedvalue => 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 orangedata-minictfied =data-minict-class =jswait> 
< input type =textplaceholder =Bvalue =Bdata-minictfied => 
 
< li class =minict_firstdata-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_lastdata-value =g> G< / li> 
 
< / ul> 
< / div> 
< / td> 
  

解决方案

是的。我正在测试的网站有类似的问题。这在网站设计中似乎是一种新趋势，最近，因为显然选择列表本身不能看起来像无序列表一样奇特。

有一种折磨方式编写与动态生成的HTML进行交互的过程方法，当你点击显示它的东西之后，它会非常难看，我放弃了使用它来支持下面的代码，为简单起见，我简化了它：

  @ browser.execute_script（％{jQuery（select [＃{attrib} | ='＃{value}']）。show （）;}）
  

这个命令根据目标列表显示UI中的实际选择列表标记属性（如：id，：name，：title等）

一旦选择列表被该jQuery命令取消隐藏，您就可以像平常一样与它交互了。

希望Watir的一位大师能够提出更好的解决方案，很快，因为我认为这种页面设计将会变得越来越普遍前进。

Hi guys i've been trying to find a solution to my problem everywhere and can't find them.

I need to select a value from the second select in this html code, the one that has name="update_status[5955483]" and i don't know how.

What i've tried without success.

      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 

Nothing have worked, the first one's give me error on finding element, the third one just click's on the first input.

I've searched and from what i've understood i need to go to the desired Select, then click on the input above to make the UL visible and then select the value from UL, just don't know to do it.

Any help would be much appreciated.

 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>

解决方案

Yes. The site I'm testing has a similar issue. This seems a new trend in site design, lately, since apparently select lists alone can't be made to look as fancy as unordered lists.

There is a tortured way to write procedural methods that interact with the dynamically generated HTML after you click on the thing that displays it, but it's pretty ugly code and I gave up using it in favor of the following code, which I've shortened for simplicity's sake:

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

This command exposes the actual select list in the UI, based on the target lists's tag attribute (like :id, :name, :title, etc.)

Once the select list is unhidden by that jQuery command then you can interact with it as normal.

Hopefully one of the Watir gurus will come up with a better solution, and soon, because I think this sort of page design is going to become more and more common going forward.

这篇关于Watir-webdriver - 选择列表显示样式：无的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！