Angular - adding Cypress data-cy attribute

Question

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]")

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 ?

Answer 1

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

You should be using attribute binding instead:

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