无法在 Chrome 93 赛普拉斯 8.4.1 中输入"number"输入字段

Question

我使用chrome版本96和cypress版本8.4.1。每当我尝试键入键入type="number"Cypress立即失败，错误如下:

InvalidStateError: Failed to read 'selectionStart' property from'HTMLInputElement':输入元素的类型('number')没有支持选择。

HTML代码:<input type="number" name="phone_lead" id="phone_lead" placeholder="[phone]" class="required" autocomplete="off">

-输入电话号码:

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

有什么解决这个问题的方法/建议吗?

Answer 1

这个问题是不可重复的，无论是Chrome 93或96(你提到的两个版本)。当单独使用该HTML时，测试通过。

从技术上讲，错误是由于type="number"，从htmlpuelement . setselectionrange ()

注意，根据WHATWG表单规范，selectionStart、selectionEnd属性和setSelectionRange方法只适用于文本、搜索、URL、电话和密码类型的输入。Chrome从33版开始，在访问其他输入类型的属性和方法时会抛出异常。例如，输入类型为number: "读取'HTMLInputElement'的'selectionStart'属性失败:输入元素的类型('number')不支持选择"

但Cypress内部检查避免selectionStart类型的输入数，

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

由于您正在处理电话号码，因此输入类型应该(理论上)更改为type="tel"。

<input type="tel" 
name="phone_lead" id="phone_lead" 
placeholder="[phone]" 
class="required" 
autocomplete="off">

Answer 2

错误信息指出您做错了什么。你不应该使用点击功能。它不是按钮，也不是下拉菜单。你只需要输入它。

尝试不点击:

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

也试着用data-cy代替#phone_lead

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

Answer 3

在我的React项目(其他库可能会尝试同样的问题，或不)，我得到input[type="number"]字段值写入Cypress的唯一方法是这样做的:

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

它首先对现有值进行完整的选择，然后键入您想要的值。

Answer 4

试试这个

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