Cypress中如何点击指定重复类名元素内的目标按钮？

你的代码问题分析 #

1. 两次cy.get()的错误用法：第二个cy.get()会从整个文档重新查询元素，而非在第一个eq(1)选中的元素范围内查找，需改用cy.find()来限定查询范围。
2. 动态类名不可靠：你使用的sc-brCFrO hCaSdu这类类名是styled-components动态生成的，每次项目构建都会变化，这也是报错里类名和代码中不一致的原因，完全不能依赖这类类名做定位。

可行的解决方案 #

方案1：通过文本精准定位（最推荐）

利用页面固定文本内容定位，稳定性最高：

// 先找到"Menu de la semaine"标题，再定位目标行的删除按钮
cy.contains('Menu de la semaine')
  .parents('div') // 假设StyledDataContainer编译为div标签，若有data-testid可替换为`[data-testid="menu-container"]`更精准
  .contains('Menu Test Ben') // 找到显示"Menu Test Ben"的行
  .closest('StyledValueRow') // 定位该行容器
  .find('button') // 找到删除按钮（或直接找Delete组件对应的DOM元素）
  .click()

方案2：通过组件结构索引定位（适合行顺序固定的场景）

如果"Menu Test Ben"是Menu板块下的最后一行，可这样写：

// 定位第一个StyledDataContainer（对应Menu板块），取最后一个删除按钮
cy.get('StyledDataContainer').eq(0)
  .find('button.MuiIconButton-root') // 用Material-UI的固定类名定位，比动态类名稳定
  .eq(-1)
  .click()

方案3：利用组件属性定位（如果有）

若Delete组件有专属属性（比如aria-label），可直接通过属性定位：

// 假设删除按钮的aria-label为"删除Menu Test Ben"
cy.get('[aria-label="删除Menu Test Ben"]').click()

额外建议 #

作为Cypress新手，优先使用文本、data-testid、固定属性这类稳定的定位方式，避免依赖动态生成的类名，否则每次构建后测试都会失效。

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