Testing Playground Fails to find role="listitem"

[ashleyryan]

Bug Report 🐛

screen. getByRole('listitem') does nothing. It will correctly point out when clicking on the element that you should use getByRole('listitem') but then nothing happens when you do.

To Reproduce ✔️

https://testing-playground.com/gist/8e1c0a696406024c7ca3948328d11643/8926981ba1d5840186bdc0db0d039a90d202bd18
https://testing-playground.com/gist/8473f395e8e4cff53ad059184d268db0/4ef2f72a3abc6ee13f07b6f4887744c3053b4fd5

Click on an li element and see how the query displays // sorry, I failed to provide something useful

Expected behavior 🤔

Li elements would be found, just like getByRole('list') works

Your Environment 💻

• browser: Chrome
• os: Mac

[ashleyryan]

🤦‍♀️ It's getAllByRole not getByRole

[smeijer]

Thanks for reporting!

The error/notice is because there are multiple li elements matched to the same getByRole query. I guess we should make the query generator smarter and let it try less optimal queries in such cases (like the getByText).

[ashleyryan]

I think what complicates things too is that (at least locally) list items don't have a name so you can't even use getByRole('listitem', {name: 'blah'})

The notice makes sense, but it would be nice to get a better error message when the query doesn't work, like in this case. It looks like nothing happens (unless i'm just missing it)

[smeijer]

Yeah, that makes sense. Would a message like this have been better?

This element might be fine, but I can't auto-generate a query for you. Try using getAllBy or add some labels.

Do you have any ideas/suggestions?

[ashleyryan]

Yeah, a message like that would have been more helpful!