英文:
Cypress && Angular - get selector from href inside Ngfor
问题
我有一个侧边导航栏，我正在尝试创建一个测试来单击链接并重定向到相应的页面。
选择器位于<a>元素内，而该元素位于ngFor循环内。
<ng-container *ngFor="let item of listItems">
<li>
<a [data-test]="item.routerLink"></a>
</li>
</ng-container>
我已经尝试使用a[href]，但没有成功。
it('should redirect user to welcome', () => {
cy.getBySelector('a[href*="/welcome"]').click();
});
谢谢。
英文:
I have a side navigation bar and I'm trying to make a test to click on a link and redirect to the correspondent page.
The selector is inside <a> element that is inside a ngFor loop.
<ng-container *ngFor="let item of listItems">
<li>
<a [data-test]="item.routerLink"></a>
</li>
</ng-container>
I already try using a[href] but had no success.
it('should redirect user to welcome', () => {
cy.getBySelector('a[href*="/welcome"]').click();
});
Thank you.
答案1
得分: 1
我建议为每个项目创建一个唯一的 id，利用 index，然后你可以像下面这样使用 Cypress 来选择它：
<ng-container *ngFor="let item of listItems; let i = index">
<li>
<a [attr.cy-data]="'myLink-' + i" [data-test]="item.routerLink"></a>
</li>
</ng-container>
// * 指定索引，这里我使用索引 2，"选择第三个链接"
cy.get("[data-cy='myLink-2']").click();
英文:
I would recommend creating a unique id for each item making use of the index, and then you can select it with Cypress like the following:
<ng-container *ngFor="let item of listItems; let i = index">
<li>
<a [attr.cy-data]="'myLink-' + i" [data-test]="item.routerLink"></a>
</li>
</ng-container>
// * specify the index, here I'm using index 2, "select the 3rd link"
cy.get("[data-cy='myLink-2']").click();
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论