增加和减少赛普拉斯

Question

我想在赛普拉斯测试递增和递减HTML输入字段（type="number"）的值。更准确地说，我更倾向于使用箭头键增加和减少值，但我似乎无法使用最明显的方法使其工作。

作为一个最小的工作示例，我已经设置了一个React组件，其render方法如下所示：

render() {
  return (<input type="number" />);
};

在赛普拉斯之外，输入此字段可以毫无问题地工作。使用箭头键和鼠标递增和递减值也是如此。

According to Cypress' API documentation on the .type-method，可以使用所谓的特殊字符序列 {uparrow}和{downarrow}作为cy.type()的参数来模拟用户的上下按键。我已尝试在输入标记和文档正文（in case the increment/decrement listeners are somehow defined globally）上使用此方法，如下所示，但它似乎不起作用：

it('Increments the input value when the up key is pressed', () => {
  cy.get('input').type('1000{uparrow}'); 
  // Sets the value to 1000, but does not increment the value

  cy.get('body').type('{uparrow}');
  // Still at 1000. The event listener is not global after all.

  cy.get('input').type('{selectall}{backspace}'); 
  // Selecting all the input and deleting it 
  // using some of the other "special character sequences" works.
});

查看赛普拉斯的控制台输出（下图），赛普拉斯明确发送了向上箭头键事件（键代码38）。但是，与常规按键相比，此按键引发的生命周期事件更少。

记录第一个.type-call的关键事件：

记录第二个.type-call的关键事件：

有没有人知道我做错了什么？或者我还能尝试什么？我愿意完全避免模拟按键的方法，只要它们不涉及手动提取，递增和将值插入输入字段。

Answer 1

赛普拉斯在浏览器中工作，这意味着您的测试代码将在浏览器中进行评估。这意味着赛普拉斯可能无法访问JavaScript中无法访问的任何内容 - 尽管支持本地事件的是Cypress＆＃39; roadmap

当您在赛普拉斯中使用.type()时，赛普拉斯会触发所有必要的事件来模拟该行为。使用数字输入的向上/向下箭头是浏览器特定的实现，并且需要Cypress的本机事件支持才能正确实现。

话虽这么说，您可能只想在单击向上/向下箭头时测试应用程序的行为（毕竟 - 您不需要测试数字是否上下移动，因为这是浏览器实现）。单击向上和向下箭头时，会触发ReportEvent()事件，因此在使用以下.trigger()命令单击向上/向下箭头时，您实际上可以测试应用程序的行为方式：

change