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 发送密钥来设置日期：

SELECT TestID, 
(
 (SELECT MAX(Score) FROM
   (SELECT TOP 50 PERCENT Score FROM Posts WHERE TestID = Posts_parent.TestID ORDER BY Score) AS BottomHalf)
 +
 (SELECT MIN(Score) FROM
   (SELECT TOP 50 PERCENT Score FROM Posts WHERE TestID = Posts_parent.TestID ORDER BY Score DESC) AS TopHalf)
) / 2 AS MedianScore,
AVG(Score) AS AvgScore, MIN(Score) AS MinScore, MAX(Score) AS MaxScore
FROM Posts_parent
GROUP BY Posts_parent.TestID

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

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

Answer 2

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

Answer 3

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

Sendkeys（）仅在日期位于元素上并且uib-datepicker是一种下拉交易时有效。这对我没有帮助，因为我的datepicker元素是独立的，并且未与input元素配对。
validate（）不会在浏览器中更新angular的实际模型（这引起了评估实际上有多有用的问题...）。根据量角器docs进行评估，“评估输入好像在当前基础元素的范围之内。”在我的情况下，我想测试日期选择器生成的日期是否通过发布请求到达我的enpdpoint，然后再次返回（因此为e2e）而不会被抹除（损坏），因此，我需要将日期设置为浏览器实例，而不仅仅是在浏览器驱动程序环境或量角器测试的运行时环境中。我可能是错的。
此Expect（）通过但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);
    })

左右箭头可用于一次将日期增加/减少一天。向上/向下箭头可用于一次增加/减少一周。人们可能还会想出如何在数月和数年内箭头化。

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

3 个答案: