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 ponent 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.

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 ponent 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.

• javascript
• testing
• cypress

1 Answer 1

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() mand in the following way:

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