如何在赛普拉斯中为编辑图标编写点击功能

Question

我是cypress新手，如何编写编辑图标的点击乐趣，下面我分享了html代码

[![删除][3]][3]

Answer 1

您可以在开发工具中右键单击该元素并复制选择器，然后执行以下操作：

cy.get('selector').click()

Answer 2

您可以使用：

cy.get('svg.MuiSvgIcon-root').click()

如果以上都不行，你可以加{force: true}试试：

cy.get('svg.MuiSvgIcon-root').click({force: true})

如果要单击任何特定图标，必须使用 eq() 命令：

cy.get('svg.MuiSvgIcon-root').eq(0).click() //clicks the first svg icon

你可以试试这个：

cy.get('a[role="button"]').eq(0).click()

Answer 3

您可以像 querySelector:

一样使用 get()

let selector = 'svg.MuiIconButton-root'
cy.get(selector).click()

Answer 4

找到名称为 'cypress' 的卡片并单击编辑按钮

cy.contains('.MuiCardContent-root', 'cypress').within(() => {
  cy.get('svg.MuiSvgIcon-root').eq(0)  // 1st button is edit
    .click()
})

Answer 5

将属性（这是 Cypress docs 的最佳实践）添加到您的 html 元素

<span [attr.data-cy]="nav-menu-mat-icon"></span>

然后 select 它来自您的步骤文件：

get('nav-menu-mat-icon').click();

Answer 6

除非你有一个示例 repo 来分享，否则可能很难理解整个问题。根据您的应用程序行为，我建议将 .should('be.visible') 附加到您的 .get() 以不断重新查询您的元素。

How to write click function for edit icon in cypress