如何通过标签获取表单控件元素？
How to get form control element by label?
我有一个由可重用组件构建的表单，这样每个表单控件都生成了一个唯一的 id，它由其标签引用：
<label for="2346157937rfl5v">Complaint</label>
<div>
<textarea id="2346157937rfl5v" [(ngModel)]="value"></textarea>
</div>
使用Cypress很容易根据文本识别标签元素。但是我怎样才能识别关联的表单控件元素呢？
cy.contains('Complaint').???
我可以只使用 .next().get('textarea')，但这似乎与当前的实现太相关了。理想情况下，有一些方法可以遵循标签中的 link。
说明：我想识别 label 元素，获取其 for 属性，然后使用该 id 识别 textarea 元素。这样测试就不会依赖于 DOM.
的结构
基于您希望以更简洁的方式访问 textarea 元素的假设，很少有可能有所帮助的建议。
- 使用
eq。如果你有多个文本区域并且位置是固定的。您可以直接访问它们。
cy.get('textarea').eq(0) //Gets the first text area
- 我假设每次编译都会重新生成 id。但是如果你的 id 的一部分保持不变，你也可以使用它来访问你的元素。
cy.get('textarea[id*="2346157"]')
- 使用
next()
cy.contains('label','Complaint').next().next() //gets the textarea
OR
cy.get('label[for="2346157937rfl5v"]').next().next()
我不确定这是最好的方法，但它似乎确实有效。我更喜欢更干净的东西，所以希望这能说明目标。
cy.contains('label', 'Complaint').then(label => {
return cy.get(`#${label.attr('for')}`);
}).type('this is inside the textarea');
此方法标识标签，然后将对标签的引用替换为对标签的 for 属性标识的元素的引用。所以在.then()的另一边，文本区域是可以访问的。
您的解决方案对于普通 Cypress 来说几乎是最优的。
如果你想内置它，包 cypress-testing-library 有标签相关的查找作为它的范例之一，
cy.findByLabelText(/Complaint/i) // looks for the label
.should('have.prop', 'tagName', 'TEXTAREA') // yields the textarea
我有一个由可重用组件构建的表单，这样每个表单控件都生成了一个唯一的 id，它由其标签引用：
<label for="2346157937rfl5v">Complaint</label>
<div>
<textarea id="2346157937rfl5v" [(ngModel)]="value"></textarea>
</div>
使用Cypress很容易根据文本识别标签元素。但是我怎样才能识别关联的表单控件元素呢？
cy.contains('Complaint').???
我可以只使用 .next().get('textarea')，但这似乎与当前的实现太相关了。理想情况下，有一些方法可以遵循标签中的 link。
说明：我想识别 label 元素，获取其 for 属性，然后使用该 id 识别 textarea 元素。这样测试就不会依赖于 DOM.
基于您希望以更简洁的方式访问 textarea 元素的假设，很少有可能有所帮助的建议。
- 使用
eq。如果你有多个文本区域并且位置是固定的。您可以直接访问它们。
cy.get('textarea').eq(0) //Gets the first text area
- 我假设每次编译都会重新生成 id。但是如果你的 id 的一部分保持不变，你也可以使用它来访问你的元素。
cy.get('textarea[id*="2346157"]')
- 使用
next()
cy.contains('label','Complaint').next().next() //gets the textarea
OR
cy.get('label[for="2346157937rfl5v"]').next().next()
我不确定这是最好的方法，但它似乎确实有效。我更喜欢更干净的东西，所以希望这能说明目标。
cy.contains('label', 'Complaint').then(label => {
return cy.get(`#${label.attr('for')}`);
}).type('this is inside the textarea');
此方法标识标签，然后将对标签的引用替换为对标签的 for 属性标识的元素的引用。所以在.then()的另一边，文本区域是可以访问的。
您的解决方案对于普通 Cypress 来说几乎是最优的。
如果你想内置它，包 cypress-testing-library 有标签相关的查找作为它的范例之一，
cy.findByLabelText(/Complaint/i) // looks for the label
.should('have.prop', 'tagName', 'TEXTAREA') // yields the textarea