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>

How as a user would you input the page? Based on the html, I would have guessed you some sort of autocompleted control - ie you type in a text field, which shows a list of matching results and then you select something from that list. You want your Watir code to mimic the same actions. With just the html it is hard to reproduce your problem and verify these assumptions. Is it possible for you to share the code (likely jQuery) that actually makes the page work (ie create a standalone page that shows the problem)? — Justin Ko

Abe Heward Abe Heward · Accepted Answer · 2014-06-25T12:58:08

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 - Select a list display style: none

1 Answers