如何从量角器测试 Angular js 日期选择器

Question

我是 Protractor 的新手，在这里我正在尝试从 Protractor 测试一个 angularjs 日期选择器。

我试图找到一种方法来做到这一点，this article 是我发现的唯一东西，使用起来不是很清楚

如果有人知道如何测试，请帮忙。

我需要选择今天的日期。

提前致谢:)

• 编辑 -

alecxe，这是我的日期选择器的屏幕截图。很遗憾无法提供该页面的链接。 :(

<input 
       class="form-control ng-pristine ng-valid ng-not-empty ng-touched" 
       ng-model="invoice.fromdate" 
       data-date-format="yyyy-MM-dd" 
       data-date-type="string" 
       data-max-="" data-autoclose="1" 
       bs-datepicker="" 
       ng-change="dateRange()" 
       type="text">

Answer 1

我认为您可以避免手动操作日期选择器，而只需使用today's date value 发送密钥来设置日期：

var picker = element(by.model("invoice.fromdate"));

// get today's date
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();

if(dd<10) {
    dd='0'+dd
} 

if(mm<10) {
    mm='0'+mm
} 

today = mm+'/'+dd+'/'+yyyy;

picker.clear();
picker.sendKeys(today);

或者，setting the associated model's value directly：

picker.evaluate("invoice.fromdate= '" + today + "'");

Answer 2

目前已经提出了两种方法： 1. sendKeys() 2. evaluate() 我对量角器有点陌生，但我认为在没有生成日历的输入元素的情况下，这两个都有问题，即：

Sendkeys() 仅在日期位于元素上且 uib-datepicker 是一种下拉式交易时才有效。这对我没有帮助，因为我的 datepicker 元素是独立的，没有与输入元素配对。
evaluate() 不会在浏览器中更新 Angular 的实际模型（这引出了一个问题，即评估实际上有多有用......）。根据量角器docs，评估，“评估输入好像它在当前基础元素的范围内。”在我的情况下，我想测试 datepicker 生成的日期是否通过 post 请求到达我的 enpdpoint，然后再次返回（因此 e2e）而不会受到影响（损坏），因此，我需要我的日期在我的角度模型中浏览器实例，而不仅仅是在浏览器驱动程序环境或量角器测试的运行时环境中。我可能错了。
这个期望（）通过但 ng-form 无效（我假设浏览器中的 b/c 模型实际上并没有更新以接收我试图传入的日期。）：

function convertToPickerDate(date) {
    var date = new Date(date);
    var dd = date.getDate();
    var mm = date.getMonth() + 1; //January is 0!
    var yyyy = date.getFullYear();
    var yy = yyyy.toString().slice(2);

    return mm + '/' + dd + '/' + yy;
}     

// expect passes, but form is invalid - DON'T USE for standalone cal
it('should enter start date in date picker', function () {
        offerStart = convertToPickerDate(myData.startDate);
        var offerStartPicker = element(by.model('current.startDate'));
        offerStartPicker.evaluate("current.startDate = '" + offerStart + "'");
        offerStartPicker.evaluate("current.startDate").then(function (value) {
            expect(value).toBe(offerStart);
        });
})

但是该元素所在的ng-form无效...

我的解决方案使用 css 选择和箭头键来选择相对于今天的日期：

Shipment Start Date: <em id="offerStartPrint">{{current.startDate | date:'shortDate' }}</em>
<div id="offerStart"
        name="offerStart"
        uib-datepicker
        ng-model="current.startDate"
        class=""
        ng-change="setStartDate()"
        datepicker-options="startDateOptions"
        required></div>
</div>

function convertToPickerDate(date) {
    var date = new Date(date);
    var dd = date.getDate();
    var mm = date.getMonth() + 1; //January is 0!
    var yyyy = date.getFullYear();
    var yy = yyyy.toString().slice(2);

    return mm + '/' + dd + '/' + yy;
}

it('should enter expiration date in date picker using tabs and arrows :)', function () {
        // select today element on uib-datepicker calendar
        // div#offerStart elem has date model
        var calToday = element(by.css('div#offerStart table td button.active')); 

        calToday.sendKeys(protractor.Key.ARROW_DOWN);  // one week away
        calToday.sendKeys(protractor.Key.ARROW_DOWN);  // two weeks away
        calToday.click(); // if you remove this click no date is entered
        var fortnightAway = new Date(Date.now() + 12096e5);
        fortnightAwayString = convertToPickerDate(fortnightAway);
        expect(element(by.id('offerStartPrint')).getText()).toBe(fortnightAwayString);
    })

左右箭头可用于一次增加/减少日期。 向上/向下箭头可用于一次增加/减少一周。 人们可能也可以弄清楚如何在几个月和几年之间穿梭。

Answer 3

var data_picker = element(by.model("invoice.fromdate"));

// select current date with date function

var current_date = new Date();

var day = today.getDate();

var month = today.getMonth()+1; //By default January count as 0

var year = today.getFullYear();

if(day<10) {
    day='0'+day
} 

if(month<10) {
    month='0'+month
} 

current_date = month+'/'+day+'/'+year;

data_picker.clear();  // Note if you are facing error message related to clear. Comment this line

data_picker.sendKeys(today);

Hope this will work