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

雷·拉基维奇

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

这是我的HTML。

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

我以相同的形式使用了上面显示的确切HTML格式的大量输入。它们仅因<div>(即“标签文本”)中的文本而不同

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

我已经尝试了以下方法,但是它尝试键入标签而不是输入。

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

即使将重点放在赛普拉斯测试运行器上,它仍会尝试键入<div>而不是重点输入。

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

谢谢

杜尔科·马特科

我刚刚重现了与您完全相同的场景,即具有多个相同的标签,但内部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>

结果:

在此处输入图片说明

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章