如何使用 Cypress 定位没有 id 属性的嵌套输入？

Question

我正在为 React 项目编写 Cypress 测试。我需要能够定位嵌套在 <label> 中的 <input>，以便我可以在该输入字段中键入内容。 <input> 没有 class id。

这是我的HTML。

    <label class="Input">
        <div class="label">LABEL TEXT</div>
        <input type="text">
    </label>

我有许多与上面显示的 HTML 相同形式的输入。它们仅在 <div> 中的文本不同（即 LABEL TEXT）。

我在标签标签中围绕 <input> 的原因是我希望用户能够通过单击标签文本或输入周围的任意位置来定位输入。仅出于赛普拉斯测试的目的，向输入添加 class 对我们的代码库没有意义。我不能使用诸如 :first cy.get('input[type="text"]:first') 之类的伪选择器，因为如果我向表单添加额外的输入，我不希望我的测试中断。

我尝试了以下方法，但它试图在标签中输入而不是输入。

  cy.contains('LABEL TEXT')
      .click()
      .type('test')

即使它将焦点放在 Cypress 测试运行器中，它仍然会尝试输入 <div> 而不是焦点输入。

由于我对赛普拉斯和断言还很陌生，所以我摸不着头脑。我对一种解决方案（如果可能的话）感兴趣，它不涉及为了 Cypress 测试而将 classes 添加到我的输入中。我希望这只是我的 CSS、赛普拉斯或断言知识中的一个缺点。

谢谢

Answer 1

是的，您可以使用 CSS selectors 来获得更高的精度！

尝试：

cy.get('.Input > input') // selects an <input> tag that is a direct
                         // descendant of a "Input" class
.click()
.type('test')

您还可以使用 CSS selectors 到 select DOM 中匹配 selector 的第 n 个元素:

cy.get('.Input:nth-child(2) > input') // selects all <input> tags that
                                      // are direct children of the
                                      // second "Input"-class element
                                      // in any containing element
.click()
.type('test')

Answer 2

我觉得像

cy.getByText("label text").parent().within(() => {

   cy.get('input') // this yields the input
})

会起作用。

我建议您查看 https://github.com/testing-library/cypress-testing-library 以获得一些简洁的选择器

Answer 3

我刚刚重现了与您完全相同的情况，即有几个相同的标签，只是内部 div 的文本不同。 Miguel Carvajal 的答案很接近，但需要一些调整。 以下代码工作正常：

cy.get("div[class='label']").contains("LABEL TEXT2").parent().within(() => {
   cy.get("input[type='text']").type("WhosebugHelp")
})

测试了以下 HTML：

<label class="Input">
  <div class="label">LABEL TEXT1</div>
  <input type="text">
</label>
<label class="Input">
  <div class="label">LABEL TEXT2</div>
  <input type="text">
</label>

结果：

如何使用 Cypress 定位没有 id 属性的嵌套输入？

How do I target a nested input that has no id attribute using Cypress?

html

css

reactjs

cypress

end-to-end