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

Question

我的 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"]')引发“未找到”错误。

Answer 1

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

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