Cypress data attribute doesn't show up in angular dom

Issue

I'm trying to implement Cypress into my angular project with data-cy attributes, but they act very inconsistent. In some places the attribute does show in the dom, but in other places it doesn't.

Example where it doesn't show:

<mat-radio-button
   *ngFor="let opt of question.options"
   [attr.data-cy]="question.key + '-' + opt.key"
   [value]="opt.key">
   {{opt.value}}
</mat-radio-button>

The value attribute does show, so somethings work. I've tried different handles like removing the brackets, removing attr. (but I'm aware this shouldn't work at all), and giving a different value as only a string saying test

Example where it does work:

<fa-icon class="logoutButton" [attr.data-cy]="'profile-button'"></fa-icon>

Any ideas on what I'm doing wrong?

Solution

Some of the libraries restrict attributes to their published API's, but you can always use arialabel instead of data-cy since the major libraries will all support screen readers.

The attribute appears on the outermost element.

Source

<mat-radio-button ariaLabel="test2" [value]="2">Select me</mat-radio-button>

HTML

<mat-radio-button 
  arialabel="test2" 
  class="mat-radio-button mat-accent mat-radio-checked" 
  ng-reflect-value="2"
  ...

Test

cy.get('mat-radio-button[arialabel="test2"]')

---

Reference MatRadioButton

@Input('aria-label') ariaLabel: string

Used to set the 'aria-label' attribute on the underlying input element.

Notes

• the HTML attribute has all lowercase chars arialabel even though the input attribute has camel-case

• aria-label is shown in the docs for use with the decorator @Input('aria-label'), but is not the form to use in the attribute

Of course, with ng-for you would use a unique key like ariaLabel="question.key + '-' + opt.key"

Answered By - Fody