Question

我的应用程序中有一个出生日期字段，它没有id，value，name等常用标识元素。我不确定如何识别这些DOB元素并更改其值。任何人都可以帮我这个。

这是标识DOB部分的页面中HTML的完整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 Web应用程序。

Answer 1

select元素根据其ng-model属性看起来是可识别的 - 这是＆＃34;月＆＃34;，＆＃34;日＆＃34;和＆＃34;年＆＃34;。您可以使用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')

请注意，上述建议假设页面上只有一组月/日/年字段。如果有多个，则需要在定位器中更具体。在这种情况下，看起来包含div元素具有可识别的类 - ＆＃34; bday-select-input＆＃34;：

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 - 在选择日期字段时遇到问题

1 个答案: