如何编写Cypress代码点击与绿色盒子同容器的黑色盒子？

问题场景 #

所有黑色盒子和红色盒子样式一致，需点击与绿色盒子处于同一容器内的黑色盒子，尝试以下代码未生效：

cy.contains('green box').parent().get('black box').click()
cy.contains('green box').parent().find('black box').click()

问题原因分析 #

1. cy.get()是从整个文档根节点开始查找元素，不会限定在父元素范围内，因此第一种写法无法定位到目标盒子。
2. cy.find()是在当前元素范围内查找，但如果'black box'不是正确的选择器或文本匹配方式，也会定位失败。

正确写法分情况处理 #

情况1：黑色盒子的文本内容为"black box" #

直接在父容器范围内用contains匹配文本：

// 方式1：链式调用contains在父容器内查找文本
cy.contains('green box').parent().contains('black box').click()

// 方式2：用find配合伪类选择器匹配文本
cy.contains('green box').parent().find(':contains("black box")').click()

情况2：黑色盒子通过类名/属性定位（如类名.black-box） #

如果黑色盒子和红色盒子共享类名（样式一致的常见场景），用类选择器定位：

// 父容器内查找类为black-box的元素
cy.contains('green box').parent().find('.black-box').click()

额外调试技巧 #

如果仍无法定位，可先验证父容器是否正确：

// 临时添加debug查看父元素内容
cy.contains('green box').parent().debug()

若父元素不是直接父级，可改用.closest('.container')（替换.container为实际容器的选择器）定位到共同的上层容器。

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