Search code examples
angularangular-directivecypress

Angular - adding Cypress data-cy attribute

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 ?

Solution

  • 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"