Watir-Webdriver-选择日期字段时遇到问题

Question

I have a Date of Birth field in my application which does not have either of the usual identification elements like id, value, name etc. i am not sure how to identify these DOB elements and change the values of those. Could anyone help me on this.

Here's a full div portion of the HTML from the page where the DOB section is identified.

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

Its an AngularJS web application.

Answer 1

The select elements look identifiable based on their ng-model attribute - which is "month", "day" and "year". You can locate elements using the ng-* attributes by using a CSS (or XPath) locator:

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

If you tend to use the ng-model a lot for identification, you should add it to the list of validate locators. This will save you from having to write CSS/XPath locators.

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

Note that the above suggestions assume that there is only one set of month/day/year fields on the page. If there are multiple, you will need to be more specific in the locators. In this case, it looks like the encompassing div element has an identifiable 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')