Last Updated: February 25, 2016
· anoras

Stabilize web tests with the "role"-attribute

Whether you're using Selenium, Capybara or something different, a common problem with testing UIs under construction is that you're tests are prone to errors because of changes in the HTML document structure, changing IDs or CSS-classes. Rather than coupling your tests to attributes that are used for other things, I've found it useful to use the role-attribute to identify features in a webpage. For instance you can use the CSS-selector...

*[role="search"] find the search field on a page. Similarly, the selector...


...can be used to find the search button regardless of it being a a, button, input or something different.
This of course requires you to annotate your HTML code with the relevant attributes, but this is a good thing.

<input type="text" role="search" /><a href="#" role="search-button">Find it!</a>

1 Response
Add your response

The role attribute in HTML5 is reserved for ARIA roles (, has a limited set of values and changes the accessibility tree of a document. It might be better to use custom data attributes (data-*)

over 1 year ago ·