How to set HTML5 type="date" input fields (e.g. in Chrome) using Selenium/Protractor?

Question

I want to update the date value (displayed as mm/dd/yyyy with only the number portions modifiable) of some HTML5 date form fields:

<input type="date"/>

in my Selenium/Protractor tests. I've tried using sendKeys for this but (on Chrome) have not been successful so far.

Is there a way to do this using sendKeys? Or some other way to do it?

Answer 1

Using Chrome on Mac with Protractor, the following approach has worked for me.

Template (html5)

<input type="date" placeholder="Due Date" ng-model="newLesson.dueDate">

Test

this.newLessonDate = element( by.model('newLesson.dueDate') );
this.newLessonDate.sendKeys('01-30-2015');

I kept getting errors until I entered the date format as '01-30-2015'.

Answer 2

Seems like the best approach at the moment is to update the input field without touching its UI representation.

For normal Selenium this approach appears to work (as the UI updates to match):

selenium.executeScript('document.getElementById("continuousFrom").value = "2050-01-01"');
selenium.executeScript('document.getElementById("continuousTo").value = "2050-01-14"');

My case is a bit more tricky because I'm using Angular and Protractor and the above approach didn't result in the model being changed. So I've ended up with this (even uglier) approach that modifies the model directly:

browser.waitForAngular();
browser.executeScript('var scope = angular.element($("#continuousFrom").get(0)).scope(); scope.dates.from = "2033-01-01"; scope.$apply();');
browser.executeScript('var scope = angular.element($("#continuousTo").get(0)).scope(); scope.dates.to = "2033-01-14"; scope.$apply();');

Also this is in a Protractor test and it took me a while to realise that the executeScript call does not wait for Angular to have finished creating the new DOM itself - hence the waitForAngular to make sure the ids are there.