Find elements by their roles

[VitorLuizC]

Does Capybara provides a way to query elements by their roles like Testing Library does? It would be great to avoid implementation details in the HTML elements, and just test using their semantics.

[tvdeyen]

You can query elements by css:

find("[role='#{role}']")

[VitorLuizC]

That's the opposite, because I would still need to check for implementation details and it wouldn't even work with implicit roles (e.g, <li> beeing a listitem).

Using RTL (the testing-library for React.js) I can match these 3 options that have different HTML structures, but the same semantics.

screen.queryAllByRole('option', { name: /^Item \d+/ });

<div role="option" aria-label="Item 1">Item 1</div>

<option>Item 1</option>

<input type="radio" id="item_3" name="item" role="option" value="Item 3" />
<label for="item_3">Item 3</label>

[franzliedke]

Check out capybara_accessible_selectors. It offers a whole bunch of semantic selectors, including one for sections.