Skip to content

Instantly share code, notes, and snippets.

@brian-mcallister-lab49
Last active September 11, 2020 13:19
Show Gist options
  • Save brian-mcallister-lab49/88e86eeb2f6e0eb8de0f4dc1302cf1b2 to your computer and use it in GitHub Desktop.
Save brian-mcallister-lab49/88e86eeb2f6e0eb8de0f4dc1302cf1b2 to your computer and use it in GitHub Desktop.
TIL-Lab49/Getting a11y information from the Chrome DevTools.

If you're using Testing Library, you're certainly using the *ByRole functions to query for elements rendered by your test.

However, it's not always obvious what arguments to use when using the *ByRole functions. Luckily, there is a feature in the Chrome DevTools that will show you the role and accessable name of a selected element in the elements panel.

There's an example image in the gist box below.

Now you can see exactly what to query by. In this particular example, it might look something like this:

expect(screen.getByRole('combobox', { name: /search/i })).toBeInTheDocument();

Happy testing!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment