无法在 Chrome 93 Cypress 8.4.1 中输入 "number" 输入字段

Question

我正在使用 chrome 96 版和 cypress 8.4.1 版。每当我尝试使用 type="number" 键入输入字段时，cypress 立即失败并显示错误：

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

HTML代码：<input type="number" name="phone_lead" id="phone_lead" placeholder="+92 301 2345678" class="required" autocomplete="off">

-输入Phone个数：

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

任何solution/suggestion如何解决这个问题？

Answer 1

错误消息说明您做错了什么。你不应该使用点击功能。它不是按钮，也不是下拉菜单。您只需输入即可。

尝试不点击：

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

也尝试使用 data-cy 而不是 #phone_lead

进一步阅读https://docs.cypress.io/guides/references/best-practices

Answer 2

试试这个

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

Answer 3

问题无法重现，无论是 Chrome 93 还是 96（您都提到了这两个版本）。单独使用 HTML 时测试通过。

从技术上讲，该错误是由于 type="number"，来自 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".

但是 Cypress 有内部检查，可以避免 selectionStart 输入类型为 number，

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

由于您正在处理 phone 数字，因此输入类型（理论上）应更改为 type="tel".

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

无法在 Chrome 93 Cypress 8.4.1 中输入 "number" 输入字段

Unable to Type in "number" input field in Chrome 93 Cypress 8.4.1

html

javascript

numbers

input

cypress