Chrome环境下Cypress 8.4.1操作type="number"输入框输入报错如何解决

问题根因 #

Cypress 8.4.1版本的type命令内部会尝试读取输入框的selectionStart属性定位光标，而Chrome 96+明确禁止type="number"的输入框读取该属性，因此触发报错。 #

有效解决方案 #

• 方案1：升级Cypress版本
  Cypress 9.0及以上版本已官方修复该兼容性问题，升级后原有代码cy.get('#phone_lead').click({force:true}).type('16777')可直接正常运行，无需额外修改。
• 方案2：临时修改输入框type属性（适配无法升级Cypress的场景）
  先将输入框的type临时改为支持selection操作的text类型，输入完成后再改回原number类型即可，代码示例：

  cy.get('#phone_lead')
    .click({force:true})
    .invoke('attr', 'type', 'text')
    .type('16777')
    .invoke('attr', 'type', 'number')
  

• 方案3：直接赋值并触发变更事件
  如果不需要模拟真实逐字输入的过程，可直接给输入框赋值后手动触发change事件，绕开type命令的校验逻辑，代码示例：

  cy.get('#phone_lead')
    .click({force:true})
    .invoke('val', '16777')
    .trigger('change')
  

业务优化建议 #

你当前的输入框用于收集手机号，而type="number"本身不支持占位符中的+、空格等非数字字符，实际使用时也会出现输入异常。建议将输入框type改为tel，既兼容手机号的格式输入、移动端可唤起数字键盘，也不会触发本次的selection属性读取报错，是更适合手机号场景的实现方案。

内容的提问来源于stack exchange，提问作者RITB