Skip to content

Update guide-which-query.md #454

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 4, 2020
Merged

Update guide-which-query.md #454

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ddff095
Update guide-which-query.md
kentcdodds May 4, 2020
5e375e6
Update guide-which-query.md
kentcdodds May 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 10 additions & 7 deletions docs/guide-which-query.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,20 +11,23 @@ possible. With this in mind, we recommend this order of priority:

1. **Queries Accessible to Everyone** queries that reflect the experience of
visual/mouse users as well as those that use assistive technology
1. `getByRole`: This can be used to query every element that is exposed in
the
[accessibility tree](https://developer.mozilla.org/en-US/docs/Glossary/AOM).
With the `name` option you can filter the returned elements by their
[accessible name](https://www.w3.org/TR/accname-1.1/). This should be your
top preference for just about everything. There's not much you can't get
with this (if you can't, it's possible your UI is inaccessible). Most
often, this will be used with the `name` option like so:
`getByRole('button', {name: /submit/i})`
1. `getByLabelText`: Only really good for form fields, but this is the number
one method a user finds those elements, so it should be your top
preference.
1. `getByPlaceholderText`:
[A placeholder is not a substitute for a label](https://www.nngroup.com/articles/form-design-placeholders/).
But if that's all you have, then it's better than alternatives.
1. `getByRole`: This can be used to query every element that is exposed in
the
[accessibility tree](https://developer.mozilla.org/en-US/docs/Glossary/AOM).
With the `name` option you can filter the returned elements by their
[accessible name](https://www.w3.org/TR/accname-1.1/). This should be your
top preference for interactive elements such as buttons.
1. `getByText`: Not useful for forms, but this is the number 1 method a user
finds most non-interactive elements (listitems or divs).
finds most non-interactive elements (like divs and spans).
1. `getByDisplayValue`: The current value of a form element can be useful
when navigating a page with filled-in values.
1. **Semantic Queries** HTML5 and ARIA compliant selectors. Note that the user
Expand Down