如何用Cypress优雅测试指定div子元素z-index是否在指定区间？

目标HTML结构 #

<div class="rootDivClass">
 <div class="childDivClass">
  <img class="imgClass">
  </img>
 </div>
</div>

测试实现代码 #

cy.get('.rootDivClass *').each($element => {
  // 获取元素的z-index值并转为整数
  const zIndexValue = parseInt($element.css('z-index'), 10);
  // 断言z-index处于200-299区间内
  expect(zIndexValue).to.be.within(200, 299);
});

代码说明 #

• .rootDivClass * 选择器会选中rootDivClass容器下的所有后代元素，完全覆盖需求中提到的childDivClass和imgClass元素
• each() 方法遍历每个匹配到的元素，逐一进行断言检查
• 若元素未显式设置z-index，$element.css('z-index')会返回auto，转成整数后为NaN，此时断言会失败，符合测试预期（因为未设置的元素不满足200-299的范围要求）
• 如果仅需测试直接子元素，可将选择器改为.rootDivClass > *

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