Bdtjtk

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

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.

you can directly sendkeys to the input for this date.
Its tricky about the format. From the screenshot i can see its day / month / year

Try the following code:
you will need momentjs package: https://www.npmjs.com/package/moment
Here is information about moment date formatter: 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);

Note: adapt it to your needs, this is just example how to handle date picker.