testing-library / cypress-testing-library

🐅 Simple and complete custom Cypress commands and utilities that encourage good testing practices.
http://npm.im/@testing-library/cypress
MIT License
1.8k stars 152 forks source link

`findByRole` with `name` option does not consider element title when element contains text. #274

Open linuspahl opened 6 months ago

linuspahl commented 6 months ago

Problem description:

I want to test the following button

<button title="button title">
  button text
</button>

In our unit tests (@testing-library/react 14.2.1) we can find the button with screen.findByRole('button', { name: /button title/i })

The same query does not work in our e2e tests (@testing-library/cypress): cy.findByRole('button', { name: /button title/i })

Usually I would not define a title for the button and use the following query: cy.findByRole('button', { name: /button text/i })

But in my case the button contains just an icon (ligature), which is just a string in the DOM and it would be more appropriate to use the button title for the query, instead of this string.

As a workaround I am using cy.findByTitle(/button title/i).