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?
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'.
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.
I had the same issue today, and I found the solution here http://www.guru99.com/handling-date-time-picker-using-selenium.html
The solution is to send only the date numbers, for example instead of sending "2015-06-12" you need to send "20150612".
Selenium is meant to mimic user interaction and not setting attributes. However updating the DOM elements by setting the type could be done using Javascript
document.getElementById("someID").setAttribute("type","date")
I had an issue where sendKeys() was working, but the input was always $invalid. The only format that worked for me was 'YYYY-MM-DD' i.e. '2015-08-05'. Any other variation on that format; slashes instead of hyphens, no delimiter, etc. remained invalid.
Even though I'm using Firefox version 37.0.2 which clearly supports HTML5 input type=date, It's noteworthy that the docs say:
"In browsers that do not yet support the HTML5 date input, a text element will be used. In that case, text must be entered in a valid ISO-8601 date format (yyyy-MM-dd), for example: 2009-01-06."
FWIW This answer is the opposite of what worked for me.