Cypress中如何为编辑图标编写对应的点击触发函数

推荐定位方式（按稳定性排序） #

• 优先使用专属测试属性定位（Cypress官方推荐，不受样式、文案变化影响）
  如果你的编辑图标元素上配置了data-testid属性，代码写法如下：

  // 测试属性值可替换为你实际的属性配置
  cy.get('[data-testid="edit-icon"]').click()
  

• 通过img标签alt属性定位
  如果你用的是图片类型的编辑图标，可以通过alt属性精准匹配：

  // 将alt值替换为你编辑图标实际的alt属性内容
  cy.get('img[alt="编辑"]').click()
  

• 通过父元素关联定位
  如果编辑图标嵌套在链接、按钮容器内，也可以先定位父容器再找子图标：

  // 先定位带编辑标识的父a标签，再查找内部的img图标点击
  cy.get('a[href*="edit"]').find('img').click()
  

常见场景适配 #

• 如果元素渲染有延迟，可以额外加超时配置，延长等待元素出现的时间：

  cy.get('[data-testid="edit-icon"]', {timeout: 5000}).click()
  

• 如果点击后有异步请求，可以搭配cy.intercept监听对应接口，保证后续操作的稳定性。

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