如何使用量角器测试日期选择器？答案

【问题标题】：How to test date picker using protractor?如何使用量角器测试日期选择器？
【发布时间】：2018-12-27 12:51:26
【问题描述】：

我正在测试使用 ngbDatepicker 的日期选择器，它只允许用户从日历中选择日期。有没有可能使用量角器从中选择日期的方法？

<form class="form-inline">
  <div class="form-group">
    <div class="input-group">
      <input class="form-control" placeholder="yyyy-mm-dd"
             name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
      </div>
    </div>
  </div>
</form>

这是日期选择器的屏幕截图：

我需要的是在日期选择器中选择今天之后的一天。

提前致谢！！

【问题讨论】：

如果您希望自动化 Angular Material Datepicker，请观看此视频youtube.com/watch?v=T8QRDQjt5lw&t=6s

标签： angular typescript protractor e2e-testing

【解决方案1】：

是的，可以使用量角器选择日期。您可以模拟用户可以做的所有行为。

由于您没有提供 e2e 测试源代码。以下几点将指导您为 datepicker 编写 e2e 测试。

const EC = protractor.ExpectedConditions;
browser.wait(EC.presenceOf(element(by.css('btn-outline-secondary'))), 5000).then(() => {
    element(by.css('btn-outline-secondary')).click(); // This will click calendar icon
    const d = new Date().getDate()+1; // This will get you next day value

    // Write your code to find next day element and click it using click() function
    // Hint: Each day is a "div" with class "btn-light" and day as content of that div element 
});

EC.presenceOf() 将检查日历图标按钮是否存在（并在 5 秒后超时）。
如果它存在，那么它将单击该图标。因此，日历将打开。

现在，您的任务是确定第二天并选择它。
如上图，使用getDate()函数就可以确定第二天了。
使用上面给出的提示也可以轻松选择它。

【讨论】：

参考您的回答后，我使用 XPath 获得了日期元素。效果很好！谢谢！！

【解决方案2】：

您可以直接向该日期的输入发送密钥。它的格式很棘手。从截图中我可以看到它的日/月/年

试试下面的代码：您将需要 momentjs 包：https://www.npmjs.com/package/moment 以下是有关时刻日期格式化程序的信息：https://devhints.io/moment

    const datenow = new Date();
    datenow.setDate(datenow.getDate() + 1); // today + 1 day.

    const moment = require('moment');

    // format the date to string.
    const formatedDate = moment(datenow).format('D MMM YYYY'); 

    // send the formated date to the input.
    element(by.xpath('//input[@class=\'form-control\']')).sendKeys(formatedDate);

注意：根据您的需要调整它，这只是如何处理日期选择器的示例。

【讨论】：