Cypress 如何获取父元素的所有直接子元素而非孙级后代元素

要实现仅获取父元素的直接子元素、排除深层后代的需求，可以使用两种方式实现，两种方法都不会递归查询孙级及更下层的元素：

• 使用CSS原生子选择器>，直接在选择器中限定匹配层级
• 使用Cypress内置的children()方法，从已选中的父元素出发查询直接子级

示例场景代码 #

针对你给出的页面结构，要获取<body>下的直接子<button>元素，实现代码如下：

方式1：直接使用子选择器查询 #

// 仅匹配body的直接子button元素，不会命中form内部嵌套的button
cy.get('body > button')

方式2：先选父元素再调用children()查询 #

// 先选中父元素body，再筛选直接子级中的button元素
cy.get('body').children('button')

补充说明：如果调用children()时不传入选择器参数，会返回当前元素的所有直接子元素，支持传入任意合法CSS选择器筛选符合条件的直接子级。

你可以通过长度断言验证匹配结果是否符合预期：

// 断言匹配到的直接子button数量为2，排除了form内部的1个
cy.get('body > button').should('have.length', 2)

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