Angular - 添加赛普拉斯 data-cy 属性

Posted 2023-02-22

【中文标题】Angular - 添加赛普拉斯 data-cy 属性

【英文标题】：Angular - adding Cypress data-cy attribute

【发布时间】：2020-04-14 15:06:39

【问题描述】：

我昨天刚开始使用带有 angular 的 cypress.io，正如文档所说，我正在使用属性 data-cy 来专门定位元素

<div data-cy="myelement">Hello</div>

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

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

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

我是否必须创建个人指令才能动态添加该属性？还是有更好的办法？

【问题讨论】：

我个人大部分时间都使用 id="something"，我的开发人员将 ID 用于任何事情都没有问题。我想这可能会导致问题。也许我应该重新考虑一下，但我从来没有这样做过……谢谢你的帖子

【参考方案1】：

Angular 处理 data- specially ，你可能会在创建指令时遇到麻烦。

您应该改用属性绑定：

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

【讨论】：

非常感谢！我怎么没想到 attr... 文档中是否有某处声明数据属性以不同的方式处理以及如何处理？

见github.com/angular/angular/issues/19054#issuecomment-327253870和github.com/angular/angular/blob/…和***.com/questions/46672595/…和***.com/questions/44915264/…

同样[something]="somethingElse"被视为输入绑定，所以要绑定一个属性，你必须使用属性绑定。

谢谢，这个技巧让我节省了几个小时的时间。