Query a button with specific text

by

I’m surprised no one here gives the most idiomatic answer yet. You can use getByRole() and pass an accessible name. The accessible name is the text of the button or the value of aria-label attribute.

It can be used to query a specific element if multiple elements with the same role are presented on the screen.

Text button

<button>Text Button</button>

screen.getByRole('button', {
  name: /text button/i
})

Icon button

<button aria-label="edit">
  <edit-icon />
</button>

screen.getByRole('button', {
  name: /edit/i
})

Leave a Comment