Use Watir to Select from Angular Non-Traditional DropDown

Question

I am trying to select a drop down option from an angular ng-select list with Watir. I am not seeing the change made in the browser. I also am trying to 'click' on the drop down to open the drop down:

<div _ngcontent-c8="">
                <ng-select _ngcontent-c8="" bindlabel="SN" bindvalue="SN" class="custom-select ng-select ng-select-single ng-select-searchable ng-untouched ng-pristine ng-valid ng-select-opened ng-select-bottom" formcontrolname="homeState" id="home-state" name="home-state" placeholder="Select Home State" role="listbox"><div class="ng-select-container ng-has-value">
    <div class="ng-value-container">
        <div class="ng-placeholder">Select Home State</div>

        <!----><!---->
            <!----><div class="ng-value">
                <!---->

                <!---->
                    <span aria-hidden="true" class="ng-value-icon left">×</span>
                    <span class="ng-value-label">AL</span>

            </div>


        <!---->

        <!----><div class="ng-input">
            <!---->
            <!----><input autocomplete="off" role="combobox" type="text" aria-expanded="true" aria-owns="grwygr3432432" aria-activedescendant="a97e3c974a78">
        </div>
    </div>

    <!---->

    <!----><span class="ng-clear-wrapper" title="Clear all">
        <span aria-hidden="true" class="ng-clear">×</span>
    </span>

    <span class="ng-arrow-wrapper">
        <span class="ng-arrow"></span>
    </span>
</div>

<!----><div class="ng-overlay-container">
    <div class="ng-overlay"></div>
</div>

<!----><ng-dropdown-panel class="ng-dropdown-panel ng-select-bottom" id="grwygr3432432" style="opacity: 1;">
        <!---->
        <div class="ng-dropdown-panel-items scroll-host">
            <div></div>
            <div>


    <!---->
        <!----><div class="ng-option ng-option-marked" role="option" id="1">

            <!---->

            <!---->
                <span class="ng-option-label">AK        </span>

        </div><div class="ng-option" role="option" id="2">

            <!---->

            <!---->
                <span class="ng-option-label">AL        </span>

        </div><div class="ng-option" role="option" id="3">

            <!---->

            <!---->
                <span class="ng-option-label">AR        </span>

        </div><div class="ng-option" role="option" id="4">

            <!---->

            <!---->
                <span class="ng-option-label">AZ        </span>

        </div><div class="ng-option" role="option" id="5">

            <!---->

            <!---->

            <!---->
                <span class="ng-option-label">KY        </span>

        </div>
            <!rest of the states>

            </div>
        </div>
        <!---->
    </ng-dropdown-panel>
</ng-select>
              </div>

In ruby when I do @browser.select_list(id: 'home-state') Watir says UnknownObjectException.

I'm thinking because instead of a traditional select list this is an angular ng-select with ng-dropdown-panel. How can I access this element and set values? As a sidenote, I did try using JS to set the innerText property to a state but when I saved the form this html resides on, the value for the state did not update.

Yeah, you can't use a select_list for elements that aren't actually standard html select/option element select lists. Treat the elements like any other element in Watir with div and span methods. — titusfortner

Andrew Long Andrew Long · Accepted Answer · 2019-08-09T22:56:33

This is happening because Watir is looking for an element type that is not present with the id you specified. I would suggest trying something more general, like this:

@browser.element(id: 'home-state')

More info can be found in the documentation.

You might also have some luck with a library like Mechanize, where the solution would be something like:

require 'mechanize'

bot = Mechanize.new
page = bot.get('http://example.com')
list = page.css("#home-state").map.to_a.first

The caveat with Mechanize is that is doesn't handle Javascript. If you need something that will behave more like browser automation, stick with Watir (or something else Selenium based).

Use Watir to Select from Angular Non-Traditional DropDown

1 Answers