如何通过标签获取表单控件元素？答案

【问题标题】：How to get form control element by label?如何通过标签获取表单控件元素？
【发布时间】：2022-01-11 23:03:48
【问题描述】：

我有一个由可重用组件构建的表单，因此每个表单控件都使用唯一的id 生成，并由其标签引用：

<label for="2346157937rfl5v">Complaint</label>
<div>
  <textarea id="2346157937rfl5v" [(ngModel)]="value"></textarea>
</div>

使用 Cypress 根据文本识别标签元素很容易。但是我怎样才能识别关联的表单控件元素呢？

cy.contains('Complaint').???

我可以只使用.next().get('textarea')，但这似乎与当前的实现过于相关。理想情况下，有一些方法可以跟踪标签中的链接。

澄清：我想识别标签元素，获取其for 属性，然后使用该id 识别textarea 元素。这样测试就不依赖于 DOM 的结构。

【问题讨论】：

【解决方案1】：

您的解决方案非常适合普通 Cypress。

如果你想内置它，包cypress-testing-library 有标签相关的 find 作为它的范例之一，

cy.findByLabelText(/Complaint/i)                // looks for the label
  .should('have.prop', 'tagName', 'TEXTAREA')   // yields the textarea

【讨论】：

【解决方案2】：

基于您希望以更简洁的方式访问textarea 元素的假设，很少有建议可以提供帮助。

cy.get('textarea').eq(0) //Gets the first text area

cy.get('textarea[id*="2346157"]')

cy.contains('label','Complaint').next().next() //gets the textarea
OR
cy.get('label[for="2346157937rfl5v"]').next().next()

【讨论】：

【解决方案3】：

我不确定这是不是最好的方法，但它似乎确实有效。我更喜欢更干净的东西，所以希望这能说明目标。

cy.contains('label', 'Complaint').then(label => {
  return cy.get(`#${label.attr('for')}`);
}).type('this is inside the textarea');

这种方法识别标签，然后将标签的引用替换为标签的for 属性所标识的元素的引用。所以在.then()的另一边，textarea是可以访问的。

【讨论】：