Watir-webdriver - Select a list display style: none

Question

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>

Answer 1

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.