Watir-Webdriver

Question

我的应用程序中有一个出生日期字段，它没有任何常用的标识元素，如 id、值、名称等。我不确定如何标识这些 DOB 元素并更改它们的值。谁能帮我解决这个问题。

这是 HTML 页面中标识 DOB 部分的完整 div 部分。

<div ng-class="{invalid:(fieldVM.$dirty || formController.$submitted) &amp;&amp; fieldVM.$invalid}" class="jl-form-control ng-scope bday-select-input" label="Date of Birth" jl-validation-field="dateOfBirth">
    <!-- ngIf: helperText -->
    <div class="jl-label-wrapper">
        <label for="joltForm-profileForm-dateOfBirth-input" id="joltForm-profileForm-dateOfBirth-labelStandard" ng-bind-html="label" class="jl-label ng-binding">Date of Birth</label>
        <span class="jl-optional-text">(optional)</span>
    </div>
    <span class="error-icon"/>
    <div class="inner-icon">
        <input type="hidden" name="dateOfBirth" aria-required="true" required="required" id="joltForm-profileForm-dateOfBirth-input" ng-model="model.data.dateOfBirth" class="ng-pristine ng-untouched ng-invalid ng-invalid-required ng-invalid-sync-validate" tabindex="0" aria-invalid="true">
            <div class="jl-layout-33-33-33">
                <select jl-model="month" jl-change="checkChange(day, month, year)" jl-options="item for item in months" class="jl-select item jl-in ng-pristine ng-valid ng-touched" ng-options="item for item in months" ng-model="month" ng-change="checkChange(day, month, year)" tabindex="0" aria-invalid="false" style="transition-delay: -9999s;">
                    <option value="" class="" selected="selected">MM</option>
                    <option value="string:01" label="01">01</option>
                    <option value="string:02" label="02">02</option>
                    <option value="string:03" label="03">03</option>
                    <option value="string:04" label="04">04</option>
                    <option value="string:05" label="05">05</option>
                    <option value="string:06" label="06">06</option>
                    <option value="string:07" label="07">07</option>
                    <option value="string:08" label="08">08</option>
                    <option value="string:09" label="09">09</option>
                    <option value="number:10" label="10">10</option>
                    <option value="number:11" label="11">11</option>
                    <option value="number:12" label="12">12</option>
                </select>
                <select jl-model="day" jl-change="checkChange(day, month, year)" jl-options="item for item in days" class="jl-select item jl-in ng-pristine ng-untouched ng-valid" ng-options="item for item in days" ng-model="day" ng-change="checkChange(day, month, year)" tabindex="0" aria-invalid="false">
                    <option value="" class="" selected="selected">DD</option>
                    <option value="string:01" label="01">01</option>
                    <option value="string:02" label="02">02</option>
                    <option value="string:03" label="03">03</option>
                    <option value="string:04" label="04">04</option>
                    <option value="string:05" label="05">05</option>
                    <option value="string:06" label="06">06</option>
                    <option value="string:07" label="07">07</option>
                    <option value="string:08" label="08">08</option>
                    <option value="string:09" label="09">09</option>
                    <option value="number:10" label="10">10</option>
                    <option value="number:11" label="11">11</option>
                    <option value="number:12" label="12">12</option>
                    ...
                    ...
                    ...
                    <option value="number:30" label="30">30</option>
                    <option value="number:31" label="31">31</option>
                </select>
                <select jl-model="year" jl-change="checkChange(day, month, year)" jl-options="item for item in years" class="jl-select item jl-in ng-pristine ng-untouched ng-valid" ng-options="item for item in years" ng-model="year" ng-change="checkChange(day, month, year)" tooltip="Required" tooltip-trigger="focus" tooltip-enable="(fieldVM.$dirty || formController.$submitted) &amp;&amp; fieldVM.$invalid" tooltip-class="errorClass" tooltip-append-to-body="true" tabindex="0" aria-invalid="false">
                    <option value="" class="" selected="selected">YYYY</option>
                    <option value="number:1915" label="1915">1915</option>
                    <option value="number:1916" label="1916">1916</option>
                    ...
                    ...
                    ...
                    <option value="number:2013" label="2013">2013</option>
                    <option value="number:2014" label="2014">2014</option>
                    <option value="number:2015" label="2015">2015</option>
                </select>
            </div>
        </div>
        <div class="help-block ng-binding"/>
    </div>

它是一个 AngularJS 网络应用程序。

Answer 1

select 元素看起来可以根据其 ng-model 属性进行识别 - 即 "month"、"day" 和 "year"。您可以使用 CSS（或 XPath）定位器使用 ng-* 属性定位元素：

browser.select(css: 'select[ng-model="month"]').select('07')
browser.select(css: 'select[ng-model="day"]').select('31')
browser.select(css: 'select[ng-model="year"]').select('2014')

如果您经常使用 ng-model 进行识别，则应将其添加到验证定位器列表中。这将使您不必编写 CSS/XPath 个定位器。

require 'watir-webdriver'
Watir::HTMLElement.attributes << :ng_model

browser.select(ng_model: 'month').select('07')
browser.select(ng_model: 'day').select('31')
browser.select(ng_model: 'year').select('2014')

请注意，上述建议假设页面上只有一组 month/day/year 字段。如果有多个，您将需要在定位器中更加具体。在这种情况下，包含的 div 元素看起来有一个可识别的 class - "bday-select-input":

birthday = browser.div(class: 'bday-select-input')
birthday.select(css: 'select[ng-model="month"]').select('07')
birthday.select(css: 'select[ng-model="day"]').select('31')
birthday.select(css: 'select[ng-model="year"]').select('2014')

Watir-Webdriver - 在选择日期字段时面临问题

Watir-Webdriver - facing issue in selecting the date fields

ruby

watir