angular - Cypress 数据属性未显示在 Angular dom 中

Question

我正在尝试使用 data-cy 属性将 Cypress 实现到我的 Angular 项目中，但它们的行为非常不一致。在某些地方，该属性确实显示在 dom 中，但在其他地方却没有。

不显示的示例:

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

值属性确实显示了，所以有些东西可以工作。我尝试了不同的处理方式，例如删除括号，删除 attr. (但我知道这根本不起作用)，并给出不同的值作为仅表示 test 的字符串

它起作用的示例:

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

关于我做错了什么有什么想法吗？

Answer 1

一些库将属性限制为其发布的 API，但您始终可以使用 arialabel 而不是 data-cy，因为主要库都支持屏幕阅读器。

该属性出现在最外面的元素上。

来源

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

测试

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

---

引用MatRadioButton

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

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

注释

• 即使输入属性具有驼峰式大小写，HTML 属性也具有全部小写字符arialabel

• aria-label 在文档中显示为与装饰器 @Input('aria-label') 一起使用，但不是要使用的形式在属性中

当然，使用 ng-for 您可以使用像 ariaLabel="question.key + '-' + opt.key"这样的唯一 key