如何使用Cypress编写图标点击函数？相同类名及ID的多图标点击实现方法

嘿，我来帮你搞定这两个Cypress的实操问题！

其实核心思路很简单：先精准定位到图标元素，再执行点击操作，还可以把这个逻辑封装成可复用的函数，方便多次调用。

举个最基础的例子，如果你的图标有类名（比如icon-btn），直接定位后点击就行：

// 基础点击写法
cy.get('.icon-btn').click();

如果需要封装成可复用的函数（比如多个地方都要点击同类型图标），可以写个自定义命令或者普通函数：

// 自定义命令（在cypress/support/commands.js里定义）
Cypress.Commands.add('clickIcon', (selector) => {
  cy.get(selector)
    .should('be.visible') // 确保图标可见，避免点击失败
    .click();
});

// 调用自定义命令
cy.clickIcon('.icon-btn');

要是图标是通过伪元素或者SVG实现的，也不用担心——只要它是可交互的（比如绑定了点击事件），Cypress一样能识别，定位的时候可以直接用它的父容器或者本身的选择器就行。

首先得提一句：相同ID在HTML里是不符合规范的，ID应该是页面唯一的，建议后端或者前端同学优化一下，但如果暂时没法改，咱们也有办法处理：

方法1：通过索引定位（最直接） #

用eq()方法选择指定索引的元素（索引从0开始），比如要点击第一个、第二个、第三个图标：

// 点击第一个图标（索引0）
cy.get('.same-icon-class').eq(0).click();
// 点击第二个图标（索引1）
cy.get('.same-icon-class').eq(1).click();
// 点击第三个图标（索引2）
cy.get('.same-icon-class').eq(2).click();

方法2：结合父元素/上下文定位 #

如果三个图标分别在不同的父容器里，可以先定位父容器，再找里面的图标，这样更精准，避免索引变化导致用例失败：

// 假设第一个图标在class为"card-1"的容器里
cy.get('.card-1').find('.same-icon-class').click();
// 第二个在"card-2"容器里
cy.get('.card-2').find('.same-icon-class').click();

方法3：利用其他属性区分 #

如果图标有其他唯一属性（比如data-index、title），哪怕类名和ID相同，也可以用这些属性定位：

// 比如图标有data-index属性
cy.get('.same-icon-class[data-index="1"]').click();
// 或者用title属性
cy.get('.same-icon-class[title="编辑图标"]').click();

如果需要批量点击三个图标，还可以用each()遍历：

cy.get('.same-icon-class').each(($icon) => {
  cy.wrap($icon).click();
});

内容的提问来源于stack exchange，提问作者user2345