Cypress断言输入框值时遇JQuery<HTMLElement>无value属性错误

问题场景 #

我尝试断言输入框的值，使用以下代码：

cy.get('[data-vv-name="item price"]')
    .then(response => {
        expect(response.value).to.be.equal('100')
    })

但运行时出现TypeScript类型错误：

Property 'value' does not exist on type 'JQuery<HTMLElement>'

奇怪的是，在浏览器控制台执行这段代码能正确拿到值'100'：

$('[data-vv-name="item price"]').value

问题根源 #

Cypress的cy.get()返回的是JQuery包装对象，而非原生DOM元素。JQuery对象本身并没有value属性——你在控制台能直接用$().value是因为浏览器做了隐式的原生DOM转换，但在TypeScript的严格类型检查下，这种写法会触发属性不存在的错误。

可行解决方法 #

方法1：用JQuery的.val()方法取值 #

JQuery提供了专门用于获取表单元素值的.val()方法，这是最贴合Cypress/JQuery生态的写法：

cy.get('[data-vv-name="item price"]')
    .then($input => {
        expect($input.val()).to.equal('100')
    })

方法2：取出原生DOM元素后断言 #

从JQuery对象中取出第一个元素（JQuery是类数组结构），再通过类型断言告诉TypeScript该元素是输入框类型，即可直接访问value属性：

cy.get('[data-vv-name="item price"]')
    .then($input => {
        expect((<HTMLInputElement>$input[0]).value).to.equal('100')
    })

这正是你自己摸索出的有效写法，注意要确保选中的元素确实是输入框类型，避免类型断言不匹配。

方法3：Cypress链式断言（最简洁） #

Cypress支持直接链式调用断言，无需手动进入.then()回调，还自带重试机制，适合绝大多数场景：

cy.get('[data-vv-name="item price"]').should('have.value', '100')

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