Angular - 添加Cypress data-cy属性

Question

就在昨天，我开始使用cypress.io和angular。如文档所述，我正在使用属性data-cy来具体定位元素。

<div data-cy="myelement">你好</div>

cy.get("[data-cy=myelement]")

问题在于，如果我想动态绑定它，angular无法识别data-cy属性。

<div *ngIf="user$ | async as user" [data-cy]="user.name">Online</div> 

我需要创建一个个人指令才能动态添加该属性吗？还是有更好的方法？

- Mauro Insacco

---

我个人大多数时候使用id="something"，我没有开发人员在使用ID时遇到任何问题。我猜这可能会引起问题。也许我应该重新考虑一下，但我从未这样做过...感谢您的帖子。 - Maccurt

你应该避免使用id，因为它与样式或JS事件监听器耦合在一起。 而你应该使用data-cy，因为它与所有更改隔离开来。 - Royer Adames

Answer 1

Angular特殊处理data-属性，如果你要创建指令可能会遇到麻烦。

你应该使用属性绑定：

[attr.data-cy]="user.name"

- yurzui

---

非常感谢！我怎么没想到attr...文档中是否有说明数据属性以不同的方式处理？ - Mauro Insacco

请查看以下链接：https://github.com/angular/angular/issues/19054#issuecomment-327253870 和 https://github.com/angular/angular/blob/3d11355fec00be0ff2db25810ae28091398a9d52/packages/compiler/src/template_parser/template_parser.ts#L497 和 https://stackoverflow.com/questions/46672595/angular-directive-for-holderjs-expression-evaluation-not-working-as-intended/46673111#46673111 和 https://stackoverflow.com/questions/44915264/data-target-property-becomes-target-when-compiling/44917841#44917841。 - yurzui

同时，[something]="somethingElse" 也被视为输入绑定，因此要绑定属性，必须使用属性绑定。 - C.OG

谢谢，这个技巧刚刚为我节省了几个小时的头痛。 - alcfeoh