如何使用 Selenium/Protractor 设置 HTML5 type="date" 输入字段（例如在 Chrome 中）？答案

【问题标题】：How to set HTML5 type="date" input fields (e.g. in Chrome) using Selenium/Protractor?如何使用 Selenium/Protractor 设置 HTML5 type="date" 输入字段（例如在 Chrome 中）？
【发布时间】：2014-02-13 05:48:29
【问题描述】：

我想更新一些 HTML5 日期表单字段的日期值（显示为 mm/dd/yyyy，仅数字部分可修改）：

<input type="date"/>

在我的 Selenium/Protractor 测试中。我已经尝试为此使用sendKeys，但（在 Chrome 上）到目前为止还没有成功。

有没有办法使用sendKeys 做到这一点？还是有其他方法？

【问题讨论】：

是的，就是这个花哨的日期字段。如果您有一种您认为可行的方法，请进一步评论。

标签： html angularjs selenium protractor

【解决方案1】：

在 Mac 上使用带有 Protractor 的 Chrome，以下方法对我有用。

模板 (html5)

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

测试

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

在我输入日期格式为“01-30-2015”之前，我一直收到错误。

【讨论】：

以为我试过了，但大概我没有。谢谢。
我还需要以 mm-dd-yyyy 格式输入日期以使 SendKeys 工作。根据以下链接，用户在框中看到的格式是“从操作系统的设置中获得的”。当手动输入日期（或使用 SendKeys 模拟手动输入）时，我们似乎需要使用该格式。 developers.google.com/web/updates/2012/08/…

【解决方案2】：

似乎目前最好的方法是在不触及其 UI 表示的情况下更新输入字段。

对于普通 Selenium，这种方法似乎有效（随着 UI 更新以匹配）：

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

我的情况有点棘手，因为我使用的是 Angular 和 Protractor，而上述方法并没有导致模型被更改。所以我最终采用了这种直接修改模型的（甚至更丑陋的）方法：

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();');

这也是在量角器测试中，我花了一段时间才意识到 executeScript 调用不会等待 Angular 完成创建新的 DOM 本身 - 因此 waitForAngular 以确保 id 在那里.

【讨论】：

【解决方案3】：

我今天遇到了同样的问题，我在这里找到了解决方案http://www.guru99.com/handling-date-time-picker-using-selenium.html

解决方案是仅发送日期数字，例如，您需要发送“20150612”，而不是发送“2015-06-12”。

【讨论】：

【解决方案4】：

我终于找到了一个可行的解决方案，使用Date.prototype.toLocaleDateString：

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

【讨论】：

不适用于 chrome。日期已损坏：2018-11-09 以 11/09/1908 结尾。

【解决方案5】：

我的信用卡有效期只有月份和年份。我的解决方案是使用 protractor.Key.TAB 移动光标并像下面这样输入

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

所以你可以试试 element(by.id('cc-expiry')).sendKeys('12', protractor.Key.TAB, '12', protractor.Key.TAB, '2019');

【讨论】：

【解决方案6】：

Selenium 旨在模拟用户交互而不是设置属性。然而，通过设置类型来更新 DOM 元素可以使用 Javascript 来完成

document.getElementById("someID").setAttribute("type","date")

【讨论】：

抱歉我的问题不够清楚 - 我已经更新了。我需要从 Selenium 更新用户输入的日期值。

【解决方案7】：

我遇到了 sendKeys() 工作的问题，但输入总是 $invalid。唯一对我有用的格式是“YYYY-MM-DD”，即“2015-08-05”。该格式的任何其他变体；斜杠而不是连字符、没有分隔符等仍然无效。

虽然我使用的 Firefox 版本 37.0.2 明显支持 HTML5 输入 type=date，但值得注意的是 the docs say:

"在尚不支持 HTML5 日期输入的浏览器中，将使用文本元素。在这种情况下，必须以有效的 ISO-8601 日期格式 (yyyy-MM-dd) 输入文本，例如： 2009-01-06。”

FWIW This answer 与对我有用的相反。

【讨论】：