如何使用Cypress将没有id属性的嵌套输入作为目标？-前端问题

How do I target a nested input that has no id attribute using Cypress?(如何使用Cypress将没有id属性的嵌套输入作为目标？)

本文介绍了如何使用Cypress将没有id属性的嵌套输入作为目标？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在为Reaction项目编写一个Cypress测试。我需要能够将嵌套在<label>中的<input>作为目标，这样我才能在该输入字段中键入内容。<input>%s没有类ID。

这是我的HTML。

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

我有许多相同表单中的输入，与上面显示的HTML完全相同。它们的区别仅在于<div>中的文本(即标签文本)。

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

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

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

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

因为我对Cypress和断言非常陌生，所以我只能挠头。我感兴趣的是一种解决方案(如果可能的话)，它不会仅仅为了Cypress测试而向我的输入中添加类。我希望这只是我在CSS、Cypress或断言知识方面的不足。

谢谢

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>

结果：

这篇关于如何使用Cypress将没有id属性的嵌套输入作为目标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！