如何在柏树中引用没有 id 的输入答案

【问题标题】：How in cypress to refer to an input that does not have an id如何在柏树中引用没有 id 的输入
【发布时间】：2022-11-11 03:24:30
【问题描述】：

我有一个字段，您需要在其中为应用程序编写名称。如果我尝试通过类在 Cypress 中查找此字段，则会收到错误消息：

cy.type() can only be called on a single element. Your subject contains 40 elements.

如果它没有“id、type”等，我应该如何引用这个元素？

<div class="app-name-option"><label>App Name</label><input class="form-control" value=""></div>

【问题讨论】：

您可以：您可以添加id，或者如果您有权访问前端代码，则可以添加任何其他标识符。另外，我认为您可以像这样选择它：cy.get('label').contains('App Name').siblings()我还没有测试过
@ManuelAbascal 不幸的是，我无权访问前端代码。我会试试你的选择，谢谢
让我知道它是否有效，我很好奇
@ManuelAbascal 是的，它起作用了，我很惊讶它是如此简单）

标签： html css input cypress

【解决方案1】：

.siblings() 命令可以返回多个元素，所以最好和选择器一起使用

cy.contains('label', 'App Name')
  .siblings('input')
  .type('my app name')

【讨论】：

【解决方案2】：

在浏览器中，当您检查目标元素时，如果您右键单击，您将看到一个复制选项，该选项可以复制该特定元素的 CSS 选择器，您可以使用它来选择特定元素。

但是请注意，如果这个元素没有唯一标识符（如 Id 或 data-* 属性），则选择器将是一个脆弱的选择器，这可能可以满足当前的情况，但测试的维护是一种棘手。（项目中的小改动，会导致破坏选择器并破坏测试）。

在cypress document 中阅读有关选择器最佳实践的更多信息

【讨论】：

【解决方案3】：

根据 DOM 中表单节点中的 HTML 的其余部分，您可能希望使用以下几种方法来执行此操作。

// get form and limit input search in form
cy.contains('form', /App Name/i)
  .find('input')

// in case there are multiple inputs within form
cy.contains('form', /App Name/i)
  .contains('div', /App Name/i)
  .find('input')

【讨论】：

是的，复制粘贴。我更新了它。
cy.contains('form div', /App Name/i) 也短一些。

【解决方案4】：

您可以像这样组合 contains() 和 siblings() 方法：

cy.get('label').contains('App Name').siblings().type('my app name');

【讨论】：