CSS Selectors for Automated Tests · CSS-02

CSS selectors are unique identifiers added to HTML elements, enabling Test Engineers to reliably target and interact with specific UI components, when doing automated UI testing.

Adding CSS selectors to UI elements is required for effective UI automation but need not exist on every element.

Input fields () including text input, checkboxes, radio buttons and date pickers often require CSS selectors to ensure stability.

CSS selectors should be added, to enable automated tests to consistently identify and interact with specific components. Without selectors, tests become fragile and may break when the page structure changes e.g. Andy is no longer shown as the first member of an alphabetized list of names.

1. Use the data-test attribute for selectors.
2. Use standardized wording throughout the selector, adding to the provided lists over time.
3. Mirror user-visible wording where possible in selectors.
4. Structure selectors in three parts (verb-selection-element), separated by double underscores (__).
5. Write each part in kebab-case.

Part 1: The Component Verb

1. Represent the Angular (or Vue, etc.) component using a verb.
2. Add the -modal suffix for modal components only.

Common verbs like add-, view-, edit-, search-, or select- should be used, for example:

• view- in view-sales-contract
• edit- in edit-sales-invoice

Part 2: The Section

1. Employ standard section types e.g., -search-form, -input-form, -results-table.
2. Provide sufficient detail to distinguish similar page sections.
3. Use the -modal suffix in the second part for components containing a modal.

Part 3: The Element

1. Use meaningful suffixes to clarify the element type, preferring standard element types.
2. Add selectors to table rows when targeting elements within the row.
3. Avoid adding loop index numbers to repeating elements. Optionally include database IDs.
4. Use the -icon suffix for icons, adding a clarifying word if multiple icons are present.

Employ these standardized element types in the third part of the CSS selectors to ensure consistency and clarity across the codebase. These suffixes clearly indicate the type of UI element being targeted, reducing ambiguity and improving readability.

• -header - A title at the top of a section
• -heading - A table heading
• -table
• -table-row - A less ambiguous way to document a -row
• -checkbox
• -radio-button
• -dropdown - A dropdown input i.e. the element in HTML -button -menu - A button like the ‘Actions’ menu -datepicker -input - A text or number input -label - The text associated with a single input -text -error - Error text or a validation message -warning -icon -popover - The contents of a popover, not the element which triggers its display