Cypress无法验证输入框文本内容问题求助

问题原因 #

你当前的Cypress命令定位的是外层的<div.input-container>元素，而输入框的实际内容存储在内部的<input>元素的value属性中，并非外层div的文本节点，所以直接断言div的文本会返回空值，导致验证失败。

解决方案 #

以下是几种可行的验证方式：

• 直接定位input元素并断言value属性（推荐）：

  cy.getBySel('my-textfield').find('input').should('have.value', 'my content')
  

  如果页面中有多个input元素，可以通过类型进一步精准定位：

  cy.getBySel('my-textfield').find('input[type="text"]').should('have.value', 'my content')
  

• 调试用：断言Angular的ng-reflect-model属性（仅开发环境可用，生产环境会被移除）：
  如果你只是临时调试，可以利用Angular的调试属性，但不建议用于正式测试用例：

  cy.getBySel('my-textfield').find('input').should('have.attr', 'ng-reflect-model', 'my content')
  

补充说明 #

输入框的内容不会作为父元素的文本内容存在，因此have.text、contain这类针对元素文本节点的断言，无法获取到input的输入值，必须直接对input元素的value属性进行断言。

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