赛普拉斯：使用 inside() 更好地找到孩子吗？答案

【问题标题】：Cypress: is using within() better to find a child?赛普拉斯：使用 inside() 更好地找到孩子吗？
【发布时间】：2020-12-03 22:31:05
【问题描述】：

赛普拉斯可以选择使用 within() 将所有后续 cy 命令的范围限定在该元素内。

在我想找到后代的情况下，使用 within() 或其他两种格式会更好吗？我知道 > 是直接后代，而空间与 inside() 相同，它检查所有后代。我必须在我的 get() 中使用这两个标签的原因是因为 tagB 在页面中被多次使用，所以我必须使用 tagA 使其独一无二。

代码：

<div class="ClassA" data-qa="tagA">
   <button class="ClassB" data-qa="tagB"/>
</div>

哪个更好？

cy.get('[data-qa="tagA"] [data-qa="tagB"]').click()

cy.get('[data-qa="tagA"] > [data-qa="tagB"]').click()

cy.get('[data-qa="tagA"]').within(() => {
  cy.get('[data-qa="tagB"]').click()
})

【问题讨论】：

第二个版本和第一个和第三个不一样。使用 > 仅强制直接子级。没有它，找到的孩子可以在任何嵌套级别。
哪个更好，是一个相对的问题。不同的场景可能会比另一种受益更多。
我更新了我的示例代码。但是，是的，在我的情况下，这三个 3 都有效，但只是在想哪个更好或更合适？

标签： javascript cypress

【解决方案1】：

1.在我看来，这个效果更好

cy.get('[data-qa="tagA"]').within(() => {
  cy.get('[data-qa="tagB"]').click()
})

因为您可以在上述语句或其他地方重用[data-qa="tagA"] 定位器。但是对于[data-qa="tagA"] > [data-qa="tagB"] 或[data-qa="tagA"] [data-qa="tagB"]，您必须重复定位器[data-qa="tagA"] 两次。

2.除了within()，您还可以使用find()，它可以帮助您找到特定选择器的后代DOM元素。

cy.get('[data-qa="tagA"]').find('[data-qa="tagB"]').then(($ele) => {
  $ele.click()
})

3.您也可以使用children() 或parents()。假设你的 HTML DOM 是这样的：

<ul class='main-nav'>
  <li>Overview</li>
  <li>Getting started
    <ul class='sub-nav'>
      <li>Install</li>
      <li class='active'>Build</li>
      <li>Test</li>
    </ul>
  </li>
</ul>

使用children()：

// yields
//  <li>Install</li>
//  <li class='active'>Build</li>
//  <li>Test</li>
cy.get('ul.sub-nav').children()

使用parents()：

// yields [.sub-nav, li, .main-nav]
cy.get('li.active').parents()

【讨论】：