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"] 

...to find the search field on a page. Similarly, the selector...

*[role="search-button"]

...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>