Cypress, cy.findByRole('textbox', { name: /Seu e-mail/i }) not finding a text input

Question

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?

Answer 1

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.