1

I am trying to select a search input using react-testing-library in the more semantic way possible. I tagged the input with type=search, and I was expecting to be able to do something like this:

  cy.findByRole('search').click().clear().type(content);

However the type fails because there is no element with the role search. Is this a limitation? Or is it supposed to be put in a different place? For example in a wrapping form? Currently the search input is just that, an isolated input that triggers search queries.

Fody
  • 23,754
  • 3
  • 20
  • 37
Danielo515
  • 5,996
  • 4
  • 32
  • 66

2 Answers2

1

If you want to use the command findByRole, then you have to tag your input as role="search", then the below command should work-

 cy.findByRole('search').click().clear().type(content);
Alapan Das
  • 17,144
  • 3
  • 29
  • 52
  • I will try it out, but it feels that it should not be necessary. For buttons it works just with the type submit, then you can find them by role submit. Is this semantic tough? – Danielo515 Jun 11 '22 at 07:30
1

If you don't have an explicit role attribute on the element,

<input type="search">

the role to use is searchbox

cy.findByRole('searchbox').click().clear().type(content);  // passes
Fody
  • 23,754
  • 3
  • 20
  • 37
  • I indeed have the input type set to search, but it still doesn't find it. On the other side,this works for buttons of type input, for example, so it feels a bit arbitrary – Danielo515 Jun 11 '22 at 06:53
  • The string to pass in is `searchbox` not `search`. It's working on my test. – Fody Jun 11 '22 at 08:27
  • You may have an old version of `@testing-library/cypress` installed, or the older `cypress-testing-library`. – Fody Jun 11 '22 at 08:44
  • Oh, that is a very interesting detail. I'll check that out and accept your answer. Thanks – Danielo515 Jun 12 '22 at 07:12