从赛普拉斯访问 DOM 元素的 Angular 属性

Question

我有一个 Angular 应用程序，其中有一个像这样的容器：

<div id="my-container" [data-version]="version$ | async">

我已经添加了 data-version 属性专门用于我的 Cypress 测试，所以我会知道我需要测试做什么的某些细微差别。

但是，我很难找到访问该值的正确咒语。这是我尝试过的：

首先，我们称上面的行为 flavor A 和这个没有括号的版本 flavor B:

<div id="my-container" data-version="version$ | async">

然后我尝试了 3 种口味的 Cypress:

cy.get('#my-container')
  .its('data-version') // Flavor 1
  .then((version) => {
    console.log(version);
  }

cy.get('#my-container')
  .should('have.attr', 'data-version') // Flavor 2
  .then((version) => {
    console.log(version);
  }

cy.get('#my-container')
  .invoke('attr', 'data-version') // Flavor 3
  .then((version) => {
    console.log(version);
  }

结果：

1A：赛普拉斯犹豫不决
2A：赛普拉斯犹豫不决
3A：赛普拉斯犹豫不决
1B: 赛普拉斯没有找到属性
2B：赛普拉斯找到文字 'version$ | async'
2C：赛普拉斯找到文字 'version$ | async'

问题：有没有办法从赛普拉斯检索 Angular 属性？

Answer 1

Flavor B 是不行的，表达式不会被求值，你只需绑定一个字符串。

您应该使用以下语法：

[attr.data-version]="version$ | async"

这已记录在案 here

从赛普拉斯访问 DOM 元素的 Angular 属性

Access Angular property of a DOM element from Cypress

dom

angular-template

angular

cypress