如何使用 Cypress 获取未在 html 代码中显示的元素值？答案

【问题标题】：How to get an element value that is not showing in html code with Cypress?如何使用 Cypress 获取未在 html 代码中显示的元素值？
【发布时间】：2022-01-28 05:54:29
【问题描述】：

这是我的元素的代码

<input type="text" class="nameOfClass" id="someid" name="somename" maxlength="255" placeholder="justholder" ng-model="model" tooltip-placement="top" tooltip-trigger="mouseenter" tooltip-animation="false" style="">

如您所见，没有属性值，但我可以清楚地看到我正在尝试自动化的网络应用程序的文本字段中有文本。

所以我的问题是，我不知道如何获取文本字段的值。我试过谷歌浏览器检查器来查找价值在哪里，但没有任何运气。我在某处读到，缓存可能会导致此问题，但在网络控制台中我可以看到请求响应中的值。

谢谢

【问题讨论】：

你的解释很难理解。
如果我理解正确，那么您在输入字段中输入了一些内容，然后您想读取输入的值？
您是否检查过在将焦点从输入转移后是否设置了该值？

标签： javascript html node.js testing cypress

【解决方案1】：

假设要获取文本字段中写入的值，可以通过调用val来获取。

cy.get('#someid')
  .invoke('val')
  .then((value) => {
    cy.log(value) //logs the value
  })

如果你想对值应用任何断言，你可以：

cy.get('#someid').should('have.value', 'your-value')

【讨论】：

【解决方案2】：

如果您指的是type="text"，那不是用户输入的文本——它是一个告诉输入允许哪些值的属性。

你也可以有type="number"、type="date"、type="color"、etc

检查输入是否为“文本”类型可以用这个来完成，

cy.get('input#someid').should('have.attr', 'type', 'text')

检查 value 属性将像这样完成

cy.get('input#someid')
  .type('entering a value')     // there's nothing in value yet
  .should('have.value', 'entering a value')

【讨论】：