Bug #41781
Updated by Ernesto Puerta over 4 years ago
Most unit & e2e tests use CSS (e.g.: @".card-title"@) or Angular component attributes (@[cardTitle="Cluster Status"]@) to retrieve HTML/DOM contents for assertions/navigation.
While this works, it means that we are anchoring tests to elements that might change due to refactors. For example:
* CSS classes might change with framework updates (e.g.: the recent Bootstrap 3 to 4 refresh) or simple cleanups.
* Adding new elements with the same attributes would modify/break the query results.
* Angular component attributes include literal strings that might change ("Cluster Status" -> "Cluster Health").
HTML5 provides free-from @"data-*"@ attributes that might perfectly fit for this purpose:
* Either by adding @data-testid@/@data-description@/@data-id@ to semantically describe/identify elements: "reference":https://kentcdodds.com/blog/making-your-ui-tests-resilient-to-change
* If we are to add semantic descriptors, why not using "ARIA":https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA attributes and also improve accessibility for our dashboard ("reference":https://css-tricks.com/why-how-and-when-to-use-semantic-html-and-aria/)
<pre><code class="diff">
const anchor = fixture.debugElement.nativeElement
- .querySelector('.card-title')
+ .querySelector('[aria-label="Card Title"]')
</code></pre>