How to test date picker using protractor?

Question

I'm testing date picker which used ngbDatepicker and it only allows the user to pick the date from the calendar. Is there any possible way to pick a date from this using protractor?

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

This is the screenshot of the date picker:

What I need is to select the day after today in the datepicker.

Thanks in advance!!

Answer 1

Yes, it is possible to pick date using protractor. You can simulate all the behaviors which the user can do.

Since, you have not provided e2e test source code. Below points will guide you in writing e2e tests for datepicker.

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() will check whether calendar icon button is present or not (and will timeout after 5 seconds).
If it is present, then it will click that icon. So, calendar will open.

Now, your task is to identify the next day and select it.
Identification of next day can be done, using getDate() function, as shown above.
Selecting it can also be done easily, with the hints given above.