2bqtzg
Last Updated: February 25, 2016
·
1.811K
· anoras
2b777f45466faad61ab9f212faeb63e8

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>
Say Thanks
Respond

1 Response
Add your response

5515
2a95c3e3c8a952b6d953de6a9bc1a7ce

The role attribute in HTML5 is reserved for ARIA roles (http://www.w3.org/html/wg/drafts/html/master/dom.html#wai-aria), 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 ·