In an acceptance test, is it better to use “id” or “class” to identify a target element:
<div id="button-i-want-to-click" class="button red">
OR
<div class="button red button-i-want-to-click">
(I’ve noticed Ember sometime sets it’s own ID such as <div id="ember-478">, is there any potential conflict here?)
Due to the reusable nature of components, I believe it’s a better practice to use classes since ids are supposed to be unique within the document.
If <your-component> had an id in it and was rendered twice in the same view, your ids would no longer be unique.
Ember generating an id is fine (and necessary) because if you have a component rendered twice on the same page, Ember will generate two different ids.
Consider adding a data- attribute to the element that is responsible for test interactions and reveals the intent of the element, e.g. data-delete-button.
This allows the class and id attributes to have minimal responsibilities. It reduces the likelihood that a class added solely for testing gets roped into styling responsibilities at a later date.
Would agree with @eliotsykes I tend to use data-attributes, others use prefixed classes e.g. js-users-table it you do prefer classes with js prefix, make sure your don’t apply any styling to them, I’ve found that to be a good rule to follow when working in teams.
Also, IDs mess with CSS specificity. If you can help it, avoid them.
Snake: +1. According to one blog I read recently (don’t remember where) you should automatically add a class with a test- prefix on every component and view and don’t use it for styling, making it easier for teammates who might come along and want to write tests aside from yours able to do so without having to go back and edit code.