使用 Cypress 循环遍历不一致的父对象

Question

我正在使用 Cypress 编写自动化测试用例。

我需要循环遍历该元素的所有子元素并验证其数据。问题是，除了第一个孩子之外，所有孩子都是带有<a>标签和值属性的对象。href

第一个被包装到span创建以下层次结构中：
parent -> span -> a with href value。

如何组织循环？

我尝试删除 span 元素，但它被删除时<a>里面有一个子元素

Answer 1

如果您从 切换.children()到 ，.find()查询将返回任何子项或孙项，并跳过span与第一项不同的项。

该.find()命令在 HTML 树中查找任意数量的级别，而 .children()仅获取第一级后代。

结果就简单多了，不需要做任何if() else()构造，可以专注于验证数据。

cy.get(parent)
  .find('a')    // pick up parent->a as well as parent->span->a
  .each($a => {
    // ...verify its data
  })

顺便说一句 -我尝试删除 span 元素- 通常您不想在测试期间更改页面，因为这样做可能会产生副作用，使您的测试与用户体验不同。