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

Question

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

这是我的 HTML。

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

我有大量相同表单的输入，其 HTML 与上面所示的完全相同。它们仅在文本<div>（即标签文本）上有所不同。

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

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

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

尽管它将焦点放在 Cypress 测试运行程序中的 上，但它仍然尝试键入<div>而不是焦点输入。

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

谢谢

Answer 1

我刚刚重现了您完全相同的场景，即有几个相同的标签，只是内部 div 的文本不同。米格尔·卡瓦哈尔的回答很接近，但需要一些调整。以下代码工作正常：

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>

结果：

Answer 2

我认为像

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

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

将工作。

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