Cypress中如何查找含指定文本的卡片并点击其内部指定按钮

直接用Cypress内置的.contains(selector, content)语法即可，不需要手动处理DOM嵌套、元素遍历逻辑，自带重试机制稳定性更高。

核心实现代码 #

如果你的卡片根节点class为card，要匹配对应文本后点击内部菜单按钮，直接写：

// 替换为你需要匹配的目标卡片文本
const targetText = 'name 2'
cy.contains('.card', targetText)
  .find('[data-test="more-menu"]')
  .click()

如果你项目里卡片是用data-test=badge作为标识，和参考逻辑对齐的写法如下：

const targetFullName = `${name} ${lastname}`
cy.contains('[data-test="badge"]', targetFullName)
  .find('[data-test="more-menu"]')
  .click()

写法说明 #

• .contains()传入两个参数时，会自动查找包含匹配文本、且匹配传入选择器的最外层元素，自动忽略内部span、div等任意层级的嵌套，不需要手动写DOM遍历逻辑
• 整个链式调用全程走Cypress的内置命令队列，自带等待重试，比手动写.then()嵌套wrap的写法稳定性高，不会因为页面异步渲染出现元素找不到的问题

注意：你提供的HTML中按钮的data-test属性值为more-menu（中划线格式），参考示例代码中写的moreMenu是驼峰格式，实际使用时请和页面上的属性值保持完全一致，避免定位失败。

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