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: @data-testid@: "reference":https://kentcdodds.com/blog/making-your-ui-tests-resilient-to-change
* If we are Or simply using @data-description@ or @data-id@ to add semantically
* Using semantic descriptors, why not using "ARIA":https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA ARIA attributes and might also improve provide a placeholder for this while improving accessibility for in our dashboard ("reference":https://css-tricks.com/why-how-and-when-to-use-semantic-html-and-aria/)