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

问题

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?

回答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'.

回答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.

回答3:

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

回答4:

I finally found a working solution, use Date.prototype.toLocaleDateString:

// Remember that Date months are 0 based.
var keys = selenium.executeScript(
    'return (new Date(2016, 2, 7)).toLocaleDateString()'
);
sendKeys(keys);

回答5:

I had a Credit Card expiry date with month and year only. The solution worked form me is using protractor.Key.TAB to move the cursor and input like below

element(by.id('cc-expiry')).sendKeys('12', protractor.Key.TAB, '2019');

So in your case you can try element(by.id('cc-expiry')).sendKeys('12', protractor.Key.TAB, '12', protractor.Key.TAB, '2019');

回答6:

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

回答7:

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.

来源：https://stackoverflow.com/questions/21295314/how-to-set-html5-type-date-input-fields-e-g-in-chrome-using-selenium-protra

标签

html

angularjs

selenium

protractor