How to test a datepicker with protractor?

Question

I have been trying to make my protractor test on a datepicker work. I have the following in my html file

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

And the following on my spec file

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

The problem is, it doesn't show up any date it just looks raised.

I've read this threads but I haven't been able to make it work, I don't know if it's due to my angular version.

Thanks in advance and good day

For testing datepicker you have to do the same as for every other component. Open the datepicker and copy it's html and create css selectors in protractor for it using `element()`, `sendKeys()` and `click()` :) Can you explain me following line in your code ? => . `expect(page.getElementByClass('.date-select-picker'));` — Silvan Bregy, Jul 25 '18 at 14:53
Thank you for your response, I quit working at the place where I was having this problem and I can't see the code anymore. — Jennifer, Aug 06 '18 at 22:33
If you are looking to Automate Angular Material Datepicker then Watch this video youtube.com/watch?v=T8QRDQjt5lw&t=6s — Raj Kumar, Apr 14 '20 at 10:18

score 2 · Answer 1 · answered Apr 20 '20 at 13:34

I had a similar problem with the datepicker, this is how I select a date in the future:

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

score 0 · Answer 2 · answered Apr 26 '21 at 14:31

0

use the harness:

const harnessLoader = ProtractorHarnessEnvironment.loader();

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

answered Apr 26 '21 at 14:31

aycanadal

1,106
2
15
42

In my case, I was getting this error: `Failed to find element matching one of the following queries: (MatCalendarHarness with host element matching selector: ".mat-calendar" satisfying the constraints: host matches selector "#mat-datepicker-0")` and I updated the `MatDatepickerInputHarness` to `MatDatepickerToggleHarness` – aghwotu Nov 02 '22 at 13:41

How to test a datepicker with protractor?

2 Answers2