I am using chrome version 96 and cypress version 8.4.1. Whenever I try to type in an input field with type="number" cypress immediately fails with the error:

InvalidStateError: Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection.

HTML Code: <input type="number" name="phone_lead" id="phone_lead" placeholder="+92 301 2345678" class="required" autoplete="off">

-Input Phone number:

cy.get('#phone_lead').click({force:true}).type('16777')

Any solution/suggestion how to resolve this issue?

I am using chrome version 96 and cypress version 8.4.1. Whenever I try to type in an input field with type="number" cypress immediately fails with the error:

InvalidStateError: Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection.

HTML Code: <input type="number" name="phone_lead" id="phone_lead" placeholder="+92 301 2345678" class="required" autoplete="off">

-Input Phone number:

cy.get('#phone_lead').click({force:true}).type('16777')

Any solution/suggestion how to resolve this issue?

• javascript
• input
• numbers
• cypress

• 1 Can you add your html to the question. – Alapan Das Commented Sep 27, 2021 at 9:57
• <input type="number" name="phone_lead" id="phone_lead" placeholder="+92 301 2345678" class="required" autoplete="off"> – RITB Commented Sep 27, 2021 at 12:08

4 Answers 4

The problem isn't reproducible, either with Chrome 93 or 96 (you mention both versions). The test passes when using that HTML in isolation.

Technically that error es because of the type="number", from HTMLInputElement.setSelectionRange()

Note that according to the WHATWG forms spec selectionStart, selectionEnd properties and setSelectionRange method apply only to inputs of types text, search, URL, tel and password. Chrome, starting from version 33, throws an exception while accessing those properties and method on the rest of input types. For example, on input of type number: "Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection".

But Cypress has internal checks that avoid selectionStart for inputs of type number,

const canSetSelectionRangeElementRe = /^(text|search|URL|tel|password)$/

Since you are dealing with a phone number, the input type should (theoretically) be changed to type="tel".

<input type="tel" 
  name="phone_lead" id="phone_lead" 
  placeholder="+92 301 2345678" 
  class="required" 
  autoplete="off">

In my React project (other libs might experiment the same issue, or not), the only way I got input[type="number"] fields value writing with Cypress has been doing it like this:

cy.get('input').type('{selectall}').type('123');

It first does a full selection of the extisting value, and later it types the value you want.

Error message says what you are doing wrong. You shouldn't use click function. It is not a button and it is not a dropdown. You need just to type in it.

Try without click:

cy.get('#phone_lead').type('16777')

Also try to use data-cy instead of #phone_lead

further reading https://docs.cypress.io/guides/references/best-practices

Try this

cy.get('input[name="phone_lead"]').type('12345678')