I guess everyone who had to automate a web UI had the situation that it was a struggle to find a stable and study selector for some elements on a page. It is important to have stable selectors that the UI automated tests don’t fail if the structure of a page changes or the styling changes.
ID’s and also css class names have another purpose than for the usage in UI automated tests. Css classes are primarily used to style elements and they also can get uglified on the production page. ID’s have also another purpose and can also sometimes just change or they are not get implemented because they interfere with other functions on the page.
Data-*Attributes are new in HTML 5. These HTML attributes enable us to create custom attributes on every HTML element. So the solution is to create ‘data-QA’ attributes for HTML elements. These attributes can be only used for the UI automated test and don’t interfere with any functions or purposes on the page.