Angular - 添加 Cypress data-cy 属性 [英] Angular - adding Cypress data-cy attribute

问题描述

我昨天才开始使用 cypress.io 和 angular，正如文档所说，我正在使用属性 data-cy 专门针对元素

你好

cy.get("[data-cy=myelement]")

问题是如果我想动态绑定它，angular 无法识别 data-cy 属性

<div *ngIf="user$ |作为用户异步"[data-cy]=user.name">在线</div>

我是否必须创建个人指令以动态添加该属性?或者有更好的方法吗?

解决方案

Angular 处理 data- 特别 并且您可能会在创建指令时遇到麻烦.

您应该改用属性绑定:

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

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 ?

解决方案

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"

这篇关于Angular - 添加 Cypress data-cy 属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！