尝试从赛普拉斯中的元素获取属性时出错

Posted 2023-02-15

【中文标题】尝试从赛普拉斯中的元素获取属性时出错

【英文标题】：Error trying to get attribute from element in Cypress

【发布时间】：2018-12-13 04:39:21

【问题描述】：

我有这个 html 元素：

<input id="" type="text" name="last_name" value="Userc7bff2d0-7faf-11e8-9884-8fe4c5df7f77-Updated" class="medium" maxlength="2000" autocomplete="off" tabindex="" data-reactid=".0.2.0.1.0.2.1.0.1.0.0.1:0.1.0.1.2:$/=10">

我想获取它的 value 属性来断言它已被我的测试更新。

我尝试过使用its():

cy
  .get(selector)
  .its("value")
  .should("contain", "-Updated");

但得到错误：

CypressError：重试超时：cy.its() 出错，因为属性：'value' 在您的主题中不存在。

我也试过invoke:

cy
  .get(selector)
  .invoke("value")
  .should("contain", "-Updated");

但得到类似的错误：

CypressError: Timed out retrying: cy.invoke() errored because the property: 'value' does not exist on your subject.

在这两种情况下，get() 命令的赛普拉斯控制台输出都成功显示了具有 value 属性的元素：

已生成：输入 id="" type="text" name="first_name" value="Fake-Updated" class="medium" maxlength="2000" autocomplete="off" tabindex="" data- reactid=".0.2.0.1.0.2.1.0.1.0.0.1:0.1.0.0.2:$/=10"

我有点难倒这个。如果您想了解更多信息或知道发生了什么，请告诉我。

【问题讨论】：

经过一些黑客攻击，我设法通过cy.get('input').should('have.value', 'myValue') 进行了工作测试。 cy.get() 返回一个主题数组（即使选择器是特定的并且只返回一个主题），所以 its() 属性引用是数组的属性，而不是主题。如果 cypress 评估 its('myProperty') 与 should() 评估其链接器的方式一致会更好。

【参考方案1】：

invoke() 在元素上调用 jquery 函数。要获取输入的值，请使用函数val()：

cy.get('input').invoke('val').should('contain', 'mytext')

这与获取不会随用户输入更新的value属性不相同，它仅在元素呈现时预设值。获取一个属性，可以使用jquery函数attr()：

cy.get('input').invoke('attr', 'placeholder').should('contain', 'username')

【讨论】：

'不会随用户输入更新的值属性' - 根据我的测试，这似乎不正确。我正在做.type('newValue') 并看到更新的值。

实际的 dom 属性没有得到更新。 value 属性确实如此。属性 !== 属性

是的，我想这就是您想说的 - 用户更新不会更改原始值属性 (Userc7bff2d0-7faf-11e8-9884-8fe4c5df7f77-Updated)。但是，应注意出于测试目的，值属性可以使用。

type()在should()之后怎么用？

【参考方案2】：

现在有一个插件可以满足您的需要。

https://github.com/Lakitna/cypress-commands/blob/develop/docs/attribute.md

有了这个，你就可以做到：

cy.get('input').attribute('placeholder').should('contain', 'username');

【讨论】：

很好，谢谢分享，我试试看！

这是官方的吗？ (≖_≖)

绝对不是。但有时某个层的命令或插件也很酷。

【参考方案3】：

如果上面的答案不起作用，试试这个，

cy.get('input[placeholder*="Name"]')

查找具有包含单词“名称”的占位符属性的输入。

【参考方案4】：

你可以用这个

cy.get('a') // yields the element
  .should('have.attr', 'href') // yields the "href" attribute
  .and('equal', '/home') // checks the "href" value

或

cy.get('a').should('have.attr', 'href', '/home')

更多详情请查看：https://docs.cypress.io/api/commands/should#Method-and-Value

【参考方案5】：

根据上述建议，您也可以使用prop()获取值

使用prop() 而不是attr() 的好处是： prop() 将始终为您提供当前值，但 attr 有时可以为您提供默认值，无论您更新了多少次。

cy
  .get(selector)
  .invoke("prop","value")
  .should("contain", "-Updated");