CODEWITHSUNDEEP
reactjscypresstesting-librarycypress-testing-library
Renato N_
Renato N_

Reputation: 159

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

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(
      '[email protected]'
    );
  });
});

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?

Upvotes: 0

Views: 1985

Answers (1)

M. Desjardins
M. Desjardins

Reputation: 1044

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: input accessibility information

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.

Upvotes: 2

Related Questions