如何用Cypress断言Vuetify v-text-field的值？DOM异常排查

1. 屏幕显示内容在DOM中找不到的原因 #

Vuetify的v-text-field组件会生成嵌套DOM结构，你设置的data-cy="npa-display"是组件的外层容器元素。而只读状态下，文本内容并非作为文本节点直接存在于该容器内，而是存储在内部<input>元素的value属性中。浏览器会渲染input的value值并显示在屏幕上，但这个值不会出现在DOM的文本节点里，所以你手动搜索DOM文本时找不到它。

2. 正确断言v-text-field值的方法 #

你需要定位到v-text-field内部的<input>元素，然后断言它的value属性，具体有两种常用写法：

方法一：直接断言input的value属性 #

cy.get("[data-cy='npa-display']")
  .find('input')
  .should('have.value', 'Test-Team');

方法二：通过invoke获取属性值断言 #

cy.get("[data-cy='npa-display']")
  .find('input')
  .invoke('val')
  .should('eq', 'Test-Team');

如果this.npa是异步更新的计算属性，需确保断言前等待数据加载完成，可添加前置操作的断言（比如等待触发计算属性的用户输入完成），避免因数据未更新导致断言失败。

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