Skip to main content
Cypress应用

children

获取一组 DOM 元素内每个 DOM 元素的子元素。

info

该命令的查询行为与 jQuery 中的 .children() 完全一致。

语法​

.children()
.children(selector)
.children(options)
.children(selector, options)

用法​

正确用法

cy.get('nav').children() // 获取 nav 的子元素

错误用法

cy.children() // 错误，不能直接链式调用 'cy'
cy.clock().children() // 错误，'clock' 不返回 DOM 元素

参数​

selector (字符串选择器)

用于过滤匹配 DOM 元素的选择器。

options (对象)

传入一个选项对象以改变 .children() 的默认行为。

选项默认值描述
logtrue在 命令日志 中显示该命令
timeoutdefaultCommandTimeout等待 .children() 解析的时长，超过则 超时

生成结果 了解主题管理​

  • .children() 返回找到的新 DOM 元素。
  • .children() 是一个查询命令，可以安全地链式调用其他命令。

示例​

无参数​

获取 .secondary-nav 的子元素​

<ul>
  <li>关于</li>
  <li>
    服务
    <ul class="secondary-nav">
      <li class="services-1">网页设计</li>
      <li class="services-2">Logo 设计</li>
      <li class="services-3">
        平面设计
        <ul class="tertiary-nav">
          <li>标牌</li>
          <li>T恤</li>
          <li>名片</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>联系</li>
</ul>
// 返回 [
//  <li class="services-1">网页设计</li>,
//  <li class="services-2">Logo 设计</li>,
//  <li class="services-3">平面设计</li>
// ]
cy.get('ul.secondary-nav').children()

选择器​

获取带有 active 类的子元素​

<div>
  <ul>
    <li class="active">单元测试</li>
    <li>集成测试</li>
  </ul>
</div>
// 返回 [
//  <li class="active">单元测试</li>
// ]
cy.get('ul').children('.active')

规则​

要求 了解命令链​

  • .children() 需要链式调用一个返回 DOM 元素的命令。

断言 了解断言​

超时设置 了解超时机制​

  • .children() 可能会因等待元素 存在于 DOM 中 而超时。
  • .children() 可能会因等待添加的断言通过而超时。

命令日志​

断言导航中应有 8 个子元素

cy.get('.left-nav>.nav').children().should('have.length', 8)

上述命令将在命令日志中显示为：

children 命令日志

当点击命令日志中的 children 命令时，控制台会输出以下内容：

children 控制台输出

另请参阅​

目录