如何在柏树中编写编辑图标的点击功能答案

【问题标题】：How to write click function for edit icon in cypress如何在柏树中编写编辑图标的点击功能
【发布时间】：2021-10-18 10:09:48
【问题描述】：

我是cypress新手，怎么写click fun for edit icon，下面分享html代码

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

你可以像 querySelector 一样使用 get()：

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

【讨论】：

还是不行
好的。试试：let selector = 'MuiIconButton-root'。你像 JS QuerySelector 一样使用 get。有时您有多个图层和锚链接。你必须指定你想要的层。但我认为这不是问题所在。提供反馈它的工作原理;-)

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

你可以使用：

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()

【讨论】：

【解决方案5】：

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

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

然后从您的步骤文件中选择它：

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

【讨论】：

【解决方案6】：

除非您有要分享的示例代码库，否则可能很难从整体上理解问题。根据您的应用行为，我建议您将 .should('be.visible') 附加到您的 .get() 以不断重新查询您的元素。

【讨论】：