<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).
cypress-testing-library
version:10.0.1
node
version:21.1.0
yarn
version:1.22.19
Problem description:
I want to test the following button
In our unit tests (
@testing-library/react 14.2.1
) we can find the button withscreen.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)
.