如何使用Cypress获取input元素的value属性值？

我明白你遇到的困扰了——当input的value值仅存在于元素属性中，没有体现在文本内容里时，常规的文本检查方法确实会失效。下面是几种靠谱的实现方式：

方法1：直接断言属性值 #

这是最简洁的方式，直接用Cypress的should命令断言元素的value属性值：

// 先定位到目标input元素，这里用你的选择器
cy.get('input[as-automation=""]')
  .should('have.attr', 'value', '999.99');

方法2：获取属性值后自定义断言 #

如果需要先获取value值再执行额外逻辑（比如打印、和其他变量比较），可以用invoke('attr', 'value')来提取属性值：

cy.get('input[as-automation=""]')
  .invoke('attr', 'value')
  .then(inputValue => {
    // 断言值是否符合预期
    expect(inputValue).to.equal('999.99');
    // 这里可以添加其他自定义逻辑，比如：
    // console.log('当前input的value属性值是:', inputValue);
  });

为什么你之前的方法没生效？ #

• contains()：这个命令是用来匹配元素的文本内容，但input的value属性值并不会作为文本节点渲染在页面上（除非页面特意做了处理），所以用它自然找不到目标值。
• valueOf()：这是JavaScript原生方法，但不能直接在Cypress的链式调用中这么使用，你需要通过invoke来调用这类原生属性或方法。
• eq()：这个方法是用来在一组匹配到的元素中，按索引选择第N个元素，和检查value属性完全不相关，所以起不到作用。

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