在 Cypress 中递增和递减 <input type="number"/> 的值

Question

我想测试在 Cypress 中递增和递减 HTML 输入字段 (type="number") 的值。更准确地说，我更喜欢使用箭头键增加和减少值，但我似乎无法使用最明显的方法让它工作。

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

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

在 Cypress 之外，在此字段中输入内容没有任何问题。使用箭头键和鼠标递增和递减值也是如此。

According to Cypress' API documentation on the .type-method, it is possible to use the so-called special character sequences {uparrow} and {downarrow} as arguments to cy.type() to simulate a user's up and down key presses. I have tried using this approach on both the input tag and the document body (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.
});

查看 Cypress 的控制台输出（下图），向上箭头键事件（键代码 38）显然是由 Cypress 发送的。不过，与常规按键相比，此按键触发的生命周期事件更少。

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

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

有人知道我做错了什么吗？或者我还能尝试什么？我对完全避免模拟按键的方法持开放态度，只要它们不涉及手动提取、递增并将值插入输入字段。

Answer 1

Cypress 在浏览器中工作，这意味着您的测试代码在浏览器中进行评估。这意味着在 JavaScript 中无法访问的任何内容也可能无法通过 Cypress 访问 - 尽管在 Cypress 的 roadmap.

上支持本机事件

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

也就是说，您可能只想测试单击 up/down 箭头时应用程序的行为（毕竟 - 您不需要测试数字是否上升和下降，因为这是浏览器执行）。单击向上和向下箭头时，将触发 change 事件，因此您可以使用 .trigger() 命令按以下方式在单击 up/down 箭头时实质上测试应用程序的行为：

cy.get('input[type="number"]').type('1000').trigger('change')

在 Cypress 中递增和递减 <input type="number"/> 的值

Incrementing and decrementing the value of an <input type="number"/> in Cypress

javascript

testing

cypress