赛普拉斯 - select 另一个元素中的元素 - select 或 `within` 的语法快捷方式

Question

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

<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"]') returns 在完整文档中找到的第一个复选框；不是 checkbox-container.

下的那个

cy.get('[data-cy=checkbox-container] > [type="checkbox"]') 引发 "not found" 错误。

Answer 1

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

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

你试过吗？或者你正在尝试不同的东西？如果是这样，你能再解释一下吗？

干杯，

Answer 2

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

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

Answer 3

这样的东西行得通吗？

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

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

Cypress - select element within another element - selector syntax shortcut for `within`