在赛普拉斯的日期输入上按 Enter答案

【问题标题】：Pressing Enter on a date input in Cypress在赛普拉斯的日期输入上按 Enter
【发布时间】：2019-04-15 12:12:35
【问题描述】：

我有一个应用程序，其中包含一些我正在尝试自动化的输入字段。这些字段的要点是我应该能够双击一个字段，输入一个新值，然后按 Enter 提交该值，这会发送一个 PUT 请求并关闭输入字段。这适用于除日期以外的任何输入类型。

到目前为止我已经尝试过：

使用cy.type('{enter}')。这给了Typing into a date input with cy.type() requires a valid date in the format 'yyyy-MM-dd'. You passed: {enter}
使用cy.trigger() 发送回车键的keydown 事件。这很有效，因为它成功关闭了输入字段，但不知何故没有发送 PUT 请求。
在父元素上按回车键。与使用cy.trigger()

奇怪的是，自己手动打开输入字段，输入日期并按 Enter 即可发送请求。在我看来，在没有赛普拉斯将其解释为我试图在日期字段中实际输入无效字符的情况下，以编程方式按 Enter 提交字段存在一些问题。文档确实明确指出日期字段中不允许使用特殊字符。

不能发布任何代码，因为这是公司。

【问题讨论】：

标签： date cypress

【解决方案1】：

我试图让它工作，但目前根本无法完成。像这样的东西应该可以工作：

it.only('test', function () {
    cy.visit('https://www.html5tutorial.info/html5-date.php')
    cy.get('input')
      .type('2009-12-12')
      .type('{enter}')
  })

但事实并非如此，所以我开始深入研究一堆问题并找到了这个： https://github.com/cypress-io/cypress/issues/3405 。这是关于不同的输入类型，但我相信它与您的问题有关。

【讨论】：

这是正确的答案，但现在在更新的柏树中你可以写cy.get('input').type('2009-12-12{enter}'
或cy.get('input').type('2009-12-12'); cy.get('input').type('{enter}');

【解决方案2】：

您应该像下面这样删除“日期”属性：

 cy.get('input').invoke('removeAttr','type').type('2009-12-12{enter}');

【讨论】：

想象一下写代码

【解决方案3】：

不幸的是，这个问题在 Cypress 9.5 中仍然存在。一种可能的解决方法是直接触发您正在侦听的 Javascript keyup 或 keydown 事件。

cy.get('input')
  .type('2020-01-01T12:00')
  .trigger('keydown', {
    key: 'Enter',
  });

这对我有用，但正如您所指出的，可能并非在所有情况下都适用。这完全取决于您的应用首先如何侦听 Enter 以及哪个元素。

另一个可能的选择是在包装输入的表单上调用.submit()。如果您正在测试一个组件，您可以创建自己的包装组件，其中包含一个表单以触发提交。

【讨论】：