如何使用赛普拉斯定位没有id属性的嵌套输入？

Question

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

这是我的HTML。

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

我以相同的形式使用上面显示的确切HTML进行了大量输入。它们仅因<div>中的文本（即LABEL TEXT）而不同。

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

我尝试了以下操作，但是它尝试键入标签而不是输入。

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

即使它专注于赛普拉斯测试运行程序，它仍然尝试键入<div>而不是集中输入。

由于我对赛普拉斯和断言非常陌生，所以我挠头了。我对一个解决方案（如果可能的话）感兴趣，该解决方案不涉及仅出于赛普拉斯测试的目的向我的输入添加类。我希望这只是我的CSS，赛普拉斯（Cypress）或断言知识的缺点。

谢谢

Answer 1

我觉得类似

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

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

将起作用。

我建议您为一些整洁的选择器签出https://github.com/testing-library/cypress-testing-library

Answer 2

是的，您可以使用CSS selectors来提高精度！

尝试：

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

---

您还可以使用CSS选择器在与选择器匹配的DOM中选择第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 3

我刚刚重现了您的完全相同的场景，即具有多个相同的标签，但内部div的文本不同。 Miguel Carvajal的答案很近，但需要进行一些调整。以下代码正常运行：

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

在以下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>

结果：