Skip to main content
Cypress应用

next

获取一组 DOM 元素中每个 DOM 元素的紧邻下一个同级元素。

info

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

语法​

.next()
.next(selector)
.next(options)
.next(selector, options)

用法​

正确用法

cy.get('nav a:first').next() // 获取导航中的下一个链接

错误用法

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

参数​

selector (字符串选择器)

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

options (对象)

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

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

生成结果 了解主题管理​

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

示例​

无参数​

查找 .second 的下一个元素​

<ul>
  <li>apples</li>
  <li class="second">oranges</li>
  <li>bananas</li>
</ul>
// 返回 <li>bananas</li>
cy.get('.second').next()

测试 datalist​

<input list="fruit" />
<datalist id="fruit">
  <option>Apple</option>
  <option>Banana</option>
  <option>Cantaloupe</option>
</datalist>
cy.get('#fruit option')
  .first()
  .should('have.text', 'Apple')
  .next()
  .should('have.text', 'Banana')
  .next()
  .should('have.text', 'Cantaloupe')

选择器​

查找每个 li 的紧邻下一个同级元素，仅保留带有 selected 类的元素​

<ul>
  <li>apples</li>
  <li>oranges</li>
  <li>bananas</li>
  <li class="selected">pineapples</li>
</ul>
// 返回 <li>pineapples</li>
cy.get('li').next('.selected')

规则​

要求 了解命令链​

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

断言 了解断言​

超时设置 了解超时机制​

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

命令日志​

查找 .active li 的下一个元素

cy.get('.left-nav').find('li.active').next()

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

命令日志 next

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

控制台日志 next

另请参阅​

目录