Cypress - 在另一个元素中选择元素 - `within` 的选择器语法快捷方式答案

【问题标题】：Cypress - select element within another element - selector syntax shortcut for `within`Cypress - 在另一个元素中选择元素 - `within` 的选择器语法快捷方式
【发布时间】：2019-05-21 23:05:27
【问题描述】：

我的 HTML 中有一个元素，其中包含一个复选框；类似的东西（实际输出有点复杂，因为我们使用的是 React + Material UI。但是这是一般的想法，一个“容器”，里面只有一个复选框）：

<span class="..." cy-data="checkbox-container">
  ...
  <checkbox ... />
</span>

目前在我的测试中获取复选框我正在使用这个：

 cy.get('[data-cy=checkbox-container]').within(() => {
   cy.get('[type="checkbox"]').check();
 })

有没有更简洁的写法？

cy.get('[data-cy=checkbox-container]').get('[type="checkbox"]') 返回在完整文档中找到的第一个复选框；不是checkbox-container下的那个。

cy.get('[data-cy=checkbox-container] > [type="checkbox"]') 引发“未找到”错误。

【问题讨论】：

标签： selector cypress

【解决方案1】：

您已经接近第一个解决方案，您实际上可以使用 find() 来搜索先前搜索结果中的元素。所以它看起来像这样：

cy.get('[data-cy=checkbox-container]')
   .find('[type="checkbox"]')

【讨论】：

【解决方案2】：

我认为您的值在复选框中不是动态的，在这种情况下，您可以使用

cy.get('[type="checkbox"]').check(['name']) right?

你试过了吗？或者你正在尝试不同的东西？如果可以，请您再解释一下吗？

干杯，

【讨论】：

谢谢，但名称实际上是动态的。
存储值并使用它怎么样？我有同样的情况，但没有在复选框中，我对动态下拉菜单做了同样的事情。

【解决方案3】：

这样的东西有用吗？

        cy.get('.checkbox:contains("checkbox-container")').within(() => {
          cy.get('[type="checkbox"]').check();
        });

它显然与您发布的代码非常相似，但我最近使用selector:contains("specificThingImLookingFor") 让自己摆脱困境。

来源：https://glebbahmutov.com/cypress-examples/6.5.0/commands/querying.html#jquery-selectors

【讨论】：