如何用量角器测试日期选择器?

时间:2018-07-23 18:13:45

标签: datepicker protractor angular5 e2e-testing

我一直在尝试对日期选择器进行量角器测试。 我的html文件中包含以下内容

<div fxFlex>
    <mat-datepicker #pickerBirthdate></mat-datepicker>
    <input matInput
           style="visibility: hidden;"
           [min]="minBirthdate"
           [max]="maxBirthdate"
           [matDatepicker]="pickerBirthdate"
           placeholder="Fecha de nacimiento"
           [(ngModel)]="registry.data.fechaNac"
           name="fechaNac">
</div>

以及我的规格文件中的以下内容

expect(page.getElementByClass('.date-select-picker'));
// get today's date
let today: any = new Date();
let dd: any = today.getDate();
let mm: any = today.getMonth() + 1; // January is 0!
const yyyy = today.getFullYear();

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

if ( mm < 10) {
  mm = '0' + mm;
}
today = mm + '/' + dd + '/' + yyyy;
  page.sleep();
  page.getElementByClass('.date-select-picker').sendKeys(today);`

问题是,它看起来没有任何出现的日期。

我已经阅读了该线程,但是我无法使其工作,我不知道这是否归因于我的角度版本。

提前感谢,祝你有美好的一天

2 个答案:

答案 0 :(得分:0)

我在日期选择器中遇到了类似的问题,这就是我将来选择日期的方式:

    /// click the datepicker
    element(by.css('.mat-datepicker-toggle')).click();

    /// opens the table with years
    element(by.css('.mat-calendar-arrow')).click();

    /// select year, month and day
    element(by.cssContainingText(".mat-calendar-body-cell-content", "2040")).click();        
    element(by.cssContainingText(".mat-calendar-body-cell-content", "DEC.")).click();        
    element(by.cssContainingText(".mat-calendar-body-cell-content", "31")).click();

答案 1 :(得分:0)

使用安全带:

const harnessLoader = ProtractorHarnessEnvironment.loader();

const matDatepickerToggleHarness = await harnessLoader.getHarness<MatDatepickerToggleHarness>(
  MatDatepickerToggleHarness.with({selector: 'mat-datepicker-toggle'})
);
await matDatepickerToggleHarness.openCalendar();