A CSS selector is a pattern for locating web elements by class, ID, tag, attribute, position, or relationships between nested elements. In UI acceptance tests, selectors provide flexible targets when clean IDs or names are unavailable. section 10.2.12
Common selector forms include:
- .class and #id match elements by class or ID, while tag matches elements such as img. section 10.2.12
- .navbar a and .navbar-header > a select nested elements, respectively anywhere inside or directly under a container. section 10.2.12
- Attribute selectors can match exact values, prefixes, suffixes, or contained text, such as a[href$="book"]. section 10.2.12
- Use By.cssSelector() with WebDriver, then use findElements when a requirement checks a collection. section 10.2.12 section 10.2.12
Checking featured destinations
Given three featured destinations appear on the home page, select them with .featured-destination and assert the collection size. To verify Singapore, narrow the search with #featured .destination-title, collect each element's text, and assert that the results contain Singapore. section 10.2.12
Table 10.2 Useful CSS selectors (view table figure)
| Matches all the |
||
| Matches |
||
Browse the selector table for class, ID, tag, relationship, attribute, and positional forms with examples and matching behavior. section 10.2.12
