Using CSS selectors in tests
- Selecting elements via CSS can be brittle. We are selecting elements based on something that could change.
- The purpose of CSS classes are styling, not testing.
Tell me more...
- Use HTML5 data attributes for your elements
- Provides a testSelector function - you provide a data attribute and it returns the element
- Strips out the attributes on production builds (can override via the build file)
- Does some heavy lifting for data attributes and components for you, just pass a data test attribute and you're done
This test looks at a collection of usage charges and asserts
0 dependencies on CSS classes!
- Less brittle tests, since they are no longer dependent on CSS classes
- Can be used with integration or acceptance tests
- Really easy to implement
- Great docs and resources online