使用 Watir 从 Angular 非传统下拉菜单中进行选择

Question

我正在尝试从带有 Watir 的角度 ng-select 列表中选择一个下拉选项。我没有看到在浏览器中所做的更改。我也在尝试“点击”下拉菜单以打开下拉菜单：

<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>

当我使用 ruby​​ 时 @browser.select_list(id: 'home-state') Watir 说 UnknownObjectException。

我在想，因为它不是传统的选择列表，而是带有 ng-dropdown-panel 的角度 ng-select。如何访问此元素并设置值？作为旁注，我确实尝试使用 JS 将 innerText 属性设置为状态，但是当我保存此 html 所在的表单时，状态的值没有更新。

Answer 1

发生这种情况是因为 Watir 正在寻找您指定的 id 不存在的元素类型。我建议尝试更通用的方法，例如：

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

更多信息可以在documentation找到。

您可能还可以使用Mechanize 之类的库，解决方案类似于：

require 'mechanize'

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

使用 Mechanize 的警告是它不处理 Javascript。如果您需要一些更像浏览器自动化的东西，请坚持使用 Watir（或其他基于 Selenium 的东西）。