英文:
Cypress, cy.findByRole('textbox', { name: /Seu e-mail/i }) not finding a text input
问题
以下是您的翻译部分：
我有这段测试代码
describe('smoke', () => {
it('should type e-mail', () => {
cy.visit('/auth/login');
cy.findByRole('textbox', { name: /Seu e-mail/i }).type(
'analyst@open-cred.com'
);
});
});
这是HTML：
<div role="group" class="chakra-form-control css-1kxonj9">
<label for="email" id="field-:r1:-label" class="chakra-form__label css-1q3y7ys" data-invalid="">E-mail</label>
<input name="email" placeholder="Seu e-mail" type="text" id="email" class="chakra-input css-9m5lgx" value="" aria-invalid="true" aria-describedby="field-:r1:-feedback">
<div id="field-:r1:-feedback" aria-live="polite" class="chakra-form__error-message css-170ki1a">Um e-mail é necessário</div></div>
根据W3文档，文本输入具有role=textbox。但测试无法找到文本输入。
有人知道我做错了什么吗？
英文:
I have this test code
describe('smoke', () => {
it('should type e-mail', () => {
cy.visit('/auth/login');
cy.findByRole('textbox', { name: /Seu e-mail/i }).type(
'analyst@open-cred.com'
);
});
});
This is the HTML:
<div role="group" class="chakra-form-control css-1kxonj9">
<label for="email" id="field-:r1:-label" class="chakra-form__label css-1q3y7ys" data-invalid="">E-mail</label>
<input name="email" placeholder="Seu e-mail" type="text" id="email" class="chakra-input css-9m5lgx" value="" aria-invalid="true" aria-describedby="field-:r1:-feedback">
<div id="field-:r1:-feedback" aria-live="polite" class="chakra-form__error-message css-170ki1a">Um e-mail é necessário</div></div>
By W3 documentation a text input has role=textbox.
But the test can't find the text input.
Does somebody know what I'm doing wrong?
答案1
得分: 2
"Testing Library" 中的角色查询中的 "name" 选项是指辅助树中元素的名称。对于输入元素，通常是指输入的标签（如果有的话，应该有），而不是占位符。
您可以在 DevTools 中看到它的辅助名称是什么：
这显示它的辅助名称来自标签，而不是占位符。您还可以确认该角色也是 "textbox"。
在这种情况下，使用以下代码应该可以找到输入元素：
cy.findByRole('textbox', { name: /e\-mail/i })
最后，Testing Playground 可以帮助排除为什么 Testing Library 无法识别元素并识别更好的查询方法。
英文:
The name option on role queries in Testing Library refers to the element's name in the accessibility tree. For input elements, that usually refers to the input's label (if it has one, which it should), rather than its placeholder.
You can see in DevTools what its accessible name is:
This shows that its accessible name is coming from the label, rather than the placeholder. You can also confirm that the role is "textbox" there as well.
In this case
cy.findByRole('textbox', { name: /e\-mail/i })
should work to find that input element.
Finally, the Testing Playground can help troubleshoot why Testing Library is not picking up on elements and to identify better queries.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论