angular dom 中未显示 Cypress 数据属性

Question

我正在尝试将 Cypress 实施到我的 angular 项目中，并使用 data-cy 属性，但它们的行为非常不一致。在某些地方，该属性确实显示在 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>

确实显示了 value 属性，所以有些东西起作用了。我尝试了不同的处理方法，例如删除括号，删除 attr.（但我知道这根本不起作用），并给出一个不同的值作为仅表示 test[=16 的字符串=]

它起作用的例子：

<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，即使输入属性具有 camel-case
aria-label 在文档中显示用于装饰器 @Input('aria-label')，但不是在属性
中使用的形式

当然，对于 ng-for，您可以使用唯一的密钥，例如 ariaLabel="question.key + '-' + opt.key"

angular dom 中未显示 Cypress 数据属性

Cypress data attribute doesn't show up in angular dom

angular

angular-material

cypress

custom-data-attribute