Angular-添加赛普拉斯data-cy属性 [英] Angular - adding Cypress data-cy attribute

问题描述

昨天我刚刚开始将cypress.io与angular一起使用，正如文档所说，我正在使用data-cy属性专门针对元素

I just yesterday started using cypress.io with angular, as the docs say, I'm using the attribute data-cy to specifically target elements

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

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

问题是，如果我想将其绑定，则angular无法识别data-cy属性

The problem is that angular doesn't recognize the data-cy attribute if I want to bind it dinamically

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

我是否必须创建个人指令以动态添加该属性?还是有更好的方法?

Do I have to create a personal directive to add that attribute dinamically? Or there is a better way ?

推荐答案

角度对待data-

Angular treats data- specially and you may get in trouble when will be creating a directive.

您应该改用属性绑定:

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

这篇关于Angular-添加赛普拉斯data-cy属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！