How to test a Angular js date picker from Protractor

how to select date from calendar protractor
how to automate date picker in selenium
protractor sendkeys date
protractor testing
protractor async/await
protractor api
protractor config
protractor gettext

I'm new to Protractor and here I'm trying to test an angularjs date picker from Protractor.

I tried to find a way to do this and this article was the only thing I found and It is not very clear to use

If someone know how to test please help.

What I need is to select today's date.

Thanks in advance :)

  • edit -

alecxe, here is the screen shot of my date picker. Unfortunately cannot provide the link of the page. :(

<input 
       class="form-control ng-pristine ng-valid ng-not-empty ng-touched" 
       ng-model="invoice.fromdate" 
       data-date-format="yyyy-MM-dd" 
       data-date-type="string" 
       data-max-="" data-autoclose="1" 
       bs-datepicker="" 
       ng-change="dateRange()" 
       type="text">

I think you can avoid manipulating the datepicker manually and instead set the date either by just sending the keys with a today's date value:

var picker = element(by.model("invoice.fromdate"));

// get today's date
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();

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

if(mm<10) {
    mm='0'+mm
} 

today = mm+'/'+dd+'/'+yyyy;

picker.clear();
picker.sendKeys(today);

Or, by setting the associated model's value directly:

picker.evaluate("invoice.fromdate= '" + today + "'");

DatePicker/Calendar Popup in Protractor, How do you handle a date picker with a protractor? How to test angular material date picker? Recent Comments. mr. PERFECT on i am having issue to generate new project after angular installation. when I clicked enter for CSS; Daniel on Draw curved /Arc dotted polyline in angular-google-maps; Sunil on CSS issue with ngx-cron-editor; Nesreen Sanad on Angular ng serve produces Error: NGCC failed

Two methods have been suggested so far: 1. sendKeys() 2. evaluate() I'm a bit new to protractor but I think both of these have issues in the case of not having an input element that spawns the calendar, i.e.:

Sendkeys() works only if date is on an element and the uib-datepicker is a dropdown sort of deal. This didn't help me because my datepicker element is a standalone and isn't paired with an input element. evaluate() doesn't update angular's actual model in the browser (which begs the question of how useful evaluate actually is...). According protractor docs, evaluate, "Evaluates the input as if it were on the scope of the current underlying elements." In my case I want to test whether the date generated by the datepicker gets to my enpdpoint via a post request and then back again (hence e2e) without getting effed (corrupted), therefore, I need my date to be on my angular model in the browser instance, not just in the browser-driver environment or whatever the runtime environment of the protractor test is. I could be wrong about this. This expect() passes but the ng-form is invalid (i'm assuming b/c model in browser wan't actually updated to receive the date I'm trying to pass in.):

function convertToPickerDate(date) {
    var date = new Date(date);
    var dd = date.getDate();
    var mm = date.getMonth() + 1; //January is 0!
    var yyyy = date.getFullYear();
    var yy = yyyy.toString().slice(2);

    return mm + '/' + dd + '/' + yy;
}     

// expect passes, but form is invalid - DON'T USE for standalone cal
it('should enter start date in date picker', function () {
        offerStart = convertToPickerDate(myData.startDate);
        var offerStartPicker = element(by.model('current.startDate'));
        offerStartPicker.evaluate("current.startDate = '" + offerStart + "'");
        offerStartPicker.evaluate("current.startDate").then(function (value) {
            expect(value).toBe(offerStart);
        });
})

but the ng-form that the element is on is invalid...

My solution uses css selection and arrow keys to select a date relative to today:

Shipment Start Date: <em id="offerStartPrint">{{current.startDate | date:'shortDate' }}</em>
<div id="offerStart"
        name="offerStart"
        uib-datepicker
        ng-model="current.startDate"
        class=""
        ng-change="setStartDate()"
        datepicker-options="startDateOptions"
        required></div>
</div>

function convertToPickerDate(date) {
    var date = new Date(date);
    var dd = date.getDate();
    var mm = date.getMonth() + 1; //January is 0!
    var yyyy = date.getFullYear();
    var yy = yyyy.toString().slice(2);

    return mm + '/' + dd + '/' + yy;
}

it('should enter expiration date in date picker using tabs and arrows :)', function () {
        // select today element on uib-datepicker calendar
        // div#offerStart elem has date model
        var calToday = element(by.css('div#offerStart table td button.active')); 

        calToday.sendKeys(protractor.Key.ARROW_DOWN);  // one week away
        calToday.sendKeys(protractor.Key.ARROW_DOWN);  // two weeks away
        calToday.click(); // if you remove this click no date is entered
        var fortnightAway = new Date(Date.now() + 12096e5);
        fortnightAwayString = convertToPickerDate(fortnightAway);
        expect(element(by.id('offerStartPrint')).getText()).toBe(fortnightAwayString);
    })

Left and right arrows can be used to increment/decrement date by one day at a time. up/down arrows can be used to inc/dec one week at a time. One could probably figure out how to arrow through months and years as well.

Get today's date print to the console in Protractor, How do you find the current date on a protractor? Angular JS applications have some extra HTML attributes like ng-repeater, ng-controller, ng-model, etc. which are not included in Selenium locators. So, it is difficult to capture the web elements in AngularJS applications using Selenium. Protractor: Protractor supports all js related languages such as Type Script and Java Script

var data_picker = element(by.model("invoice.fromdate"));

// select current date with date function

var current_date = new Date();

var day = today.getDate();

var month = today.getMonth()+1; //By default January count as 0

var year = today.getFullYear();

if(day<10) {
    day='0'+day
} 

if(month<10) {
    month='0'+month
} 

current_date = month+'/'+day+'/'+year;

data_picker.clear();  // Note if you are facing error message related to clear. Comment this line

data_picker.sendKeys(today);

Hope this will work

Input Text · Protractor: Learn Testing Angular, Datepicker is one of the critical elements in automation. executescript method we can easily Duration: 11:34 Posted: Aug 2, 2019 Protractor Testing Tutorials For Angular Testing With Examples. Protractor is very useful for End-to-End testing for angular based web applications. So, for all those automation testing enthusiasts, I’ve come up with this series of Protractor testing tutorial to help you in your Selenium test automation journey.

Protractor Tutorial 37 - Handle Datepicker using Protractor, Hi all ! i am new to testing in angular JS and using protractor. i have implemented md-datepicker . i count find any link based on the  Just to clear this issue up for everyone getting it. md-datepicker is a class containing multiple elements, a button and 2 divs in my case. The button can be interacted with to set a date and the first div has a input field which can be interacted with.

how to test angular js md-datepicker in protractor · Issue #4710 , I have an angular app and I would like to test that a user always enters a valid date of birth in a form.I am using a date picker: (md-datepicker  Protractor Setup . Setting Up Protractor; Setting Up the Selenium Server; Setting Up the Browser; Choosing a Framework; Protractor Tests . Getting Started; Tutorial; Working with Spec and Config Files; Setting Up the System Under Test; Using Locators; Using Page Objects to Organize Tests; Debugging Protractor Tests; Reference . Configuration

datepicker: send keys in Protractor test · Issue #10404 · angular , What is calendar Popup / Date Picker. When you need to automate a hotel, travel, or similar websites, you need to deal with Date pickers (calendars), and some  protractor-angulardatepicker. A node module to ease out writting test in protractor for choosing a date and time from angular date and time picker

Comments
  • Can you provide a demo page with the date picker you want to work with through protractor?
  • @ alecxe, added. Please look at the edited answer :)
  • If you are looking to Automate Angular Material Datepicker then Watch this video youtube.com/watch?v=T8QRDQjt5lw&t=6s
  • Thanks for the perfect answer. Anywy, when I'm trying option 2 gives an error called, today is not defined. but, option 1 worked as expected. :)
  • Could be use below code snipped to save some line (new Date).toLocaleDateString(); mm/dd/yyyy
  • add some explanation