递增和递减<输入类型=“数字” />的值。在赛普拉斯 [英] Incrementing and decrementing the value of an <input type="number"/> in Cypress
问题描述
我想测试赛普拉斯中HTML输入字段（ type = number ）的值的递增和递减。更确切地说，我更愿意使用箭头键来增加和减少值，但是我似乎无法使用最明显的方法来使它起作用。
一个最小的工作示例，我建立了一个React组件，其渲染方法如下所示：
render（）{
返回（<输入类型=数字 />）；
};
在赛普拉斯之外，在此字段中键入内容不会出现任何问题。使用箭头键和鼠标递增和递减值也一样。
记录第二个.type-call的关键事件：
有人知道我做错了什么吗？或者我还能尝试什么？我愿意避免完全模拟按键的方法，只要它们不涉及手动提取，递增并将值插入输入字段即可。
Cypress在浏览器中运行，这意味着您的测试代码在浏览器中进行评估。这意味着赛普拉斯可能无法访问JavaScript中无法访问的任何内容-尽管支持本机事件在赛普拉斯的路线图。
使用 <$在Cypress中，c $ c> .type（） 会被Cypress触发所有必要的事件来模拟该行为。使用数字输入的上/下箭头是浏览器特定的实现，并且需要Cypress的本机事件支持才能正确实现。
话虽这么说，您可能只想在单击向上/向下箭头时测试应用程序的行为（毕竟，您不需要测试数字上下移动，因为这是浏览器的实现）。单击向上和向下箭头时，会触发 change 事件，因此，当您使用 .trigger（） 命令，方法如下：
cy.get（'input [type = number]'）。type（'1000'）。trigger（'change'）
I would like to test incrementing and decrementing the value of an HTML input field (type="number") in Cypress. More precisely, I would prefer to increment and decrement the value using the arrow keys, but I can't seem to get this to work using the most apparent approach.
As a minimal working example, I have set up a React component whose render method looks as follows:
render() {
return (<input type="number" />);
};
Outside of Cypress, typing into this field works without any problems. The same goes for incrementing and decrementing the value using the arrow keys as well as the mouse.
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), as seen below, but it does not seem to work:
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.
});
Looking at the console output from Cypress (images below), the up arrow key event (key code 38) is clearly sent by Cypress. Fewer lifecycle events are evoked for this keypress than the regular keypresses, though.
Log for the key events of the first .type-call:
Log for the key events of the second .type-call:
Does anyone have an idea on what I may have done wrong? Or what else I could try? I'm open to methods that avoid simulating key presses altogether, as long as they do not involve manually extracting, incrementing, and inserting the value into the input field.
Cypress works within the browser which means your test code is evaluated inside the browser. This means that anything that is not accessible in JavaScript is also likely not accessible to Cypress - although supporting native events is on Cypress' roadmap.
When you use .type() in Cypress, Cypress triggers all of the necessary events to simulate that behavior. Using the up/down arrows of the number input is a browser specific implementation and would require native event support for Cypress to implement this correctly.
That being said, you likely just want to test the behavior of your application when the up/down arrows are clicked (afterall - you do not need to test that the numbers go up and down since this is browser implementation). When the up and down arrows are clicked, a change event is triggered, so you could essentially test your application's behavior when the up/down arrow are clicked using the .trigger() command in the following way:
cy.get('input[type="number"]').type('1000').trigger('change')
这篇关于递增和递减<输入类型=“数字” />的值。在赛普拉斯的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
