TestingLibraryElementError: Unable to find an accessible element with the role

TL;DR

getByRole queries the accessibility tree, not the DOM. When it finds nothing, print the actual tree with screen.debug(), then fix the real mismatch: wrong role, missing accessible name, or an element hidden from assistive tech.

Error

TestingLibraryElementError: Unable to find an accessible element with the role "button"

Here are the accessible roles:

  button:

  Name "Cancel":
  [a button element with the text "Cancel"]

Steps

1. Add screen.debug() right before the failing query and rerun. Expected: the console shows the rendered HTML, and Testing Library prints the roles it can actually see.
2. Compare the printed roles and names against your query. Expected: you spot the mismatch (role missing, name different, element absent from the list).
3. If the accessible name is wrong, give the element one: visible text content, an aria-label, or an associated label element. Expected: debug output shows the name you intended.
4. If you queried a role the element does not have (a div styled like a button), query the correct role or switch to another matcher like getByText. Expected: the query matches.
5. Check the element is not hidden from the accessibility tree (aria-hidden, display none, the hidden attribute). Expected: removing the hiding makes the role query pass.

When to use

• getByRole or findByRole throws while the element renders on screen.
• A component refactor changed the markup and role queries broke.
• You guessed the roles of a third-party component.

When not to use

• The element is not in the DOM at all; check your render call first.
• The failure is on getByText, getByPlaceholderText, or getByTestId; those are different matchers.
• The element appears after async work; use findByRole (which waits) instead of getByRole.

Tool compatibility

• @testing-library/dom 8 and newer, @testing-library/react 13 and newer.
• jest, Vitest, and Cypress component testing.

Variant phrasings

Unable to find an accessible element with the role, followed by "Here are the accessible roles"

The full form of the error. The role list it prints is the ground truth; trust it over what you think the markup says.

"Ignored nodes: comments, script, style" appended to the error

Same error with extra diagnostics. It means Testing Library skipped non-rendered nodes while building the tree.

Why it happens

Browsers build a separate accessibility tree from the DOM, and Testing Library queries that tree. Markup that looks right visually can be invisible or mislabeled there, so the query fails even though you can see the element.

Edge cases

• Several elements share a role and name; switch to getAllByRole and index, or make the names unique.
• SVG elements have limited role support; query them by title or test id instead.
• role="presentation" strips semantics from an element and its children, hiding them from role queries.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_9n6h1Y9dmhosGc69XC0g1g

Resolved from the public thread: https://vectle.com/posts/pst_9n6h1Y9dmhosGc69XC0g1g

Thread query: TestingLibraryElementError: Unable to find an accessible element with the role

TL;DR: getByRole queries the accessibility tree, not the DOM. When it finds nothing, print the actual tree with screen.debug(), then fix the real mismatch: wrong role, missing accessible name, or an element hidden from assistive tech.