Principle:DevExpress Testcafe Selector Filtering And Traversal
| Knowledge Sources | |
|---|---|
| Domains | Testing, Web_Automation |
| Last Updated | 2026-02-12 04:00 GMT |
Overview
Selector Filtering and Traversal is the concept of refining element selection and navigating the DOM tree through chainable operations on initial element queries.
Description
Once an initial set of elements is selected, automated tests often need to narrow down the selection or navigate to related elements in the DOM hierarchy. Filtering and traversal provide this capability through:
- Filtering: Reducing a set of selected elements based on criteria (index, text content, attributes, custom functions)
- Traversal: Moving from selected elements to related elements (parents, children, siblings)
- Property Access: Extracting information from selected elements (text, attributes, state)
This concept enables precise element targeting without requiring overly specific initial selectors, making tests more resilient to markup changes. The chainable API allows complex queries to be built incrementally, improving code readability and maintainability.
Usage
Use filtering and traversal when:
- Initial selector matches multiple elements and you need a specific one
- Target element lacks unique identifiers but has distinguishing text or attributes
- Target element is best identified by its relationship to other elements
- Building complex queries from simple base selectors
- Creating flexible page object methods that adapt to varying contexts
- Extracting and verifying element properties and state
Theoretical Basis
Selector filtering and traversal follows these principles:
Chainable Operations:
// Pseudocode
selector
.filter(criteria)
.traverse(direction)
.filter(criteria)
.getProperty()
Filtering Methods:
- Index-based: Select nth element from a set
- Text-based: Filter by visible text content
- Attribute-based: Filter by HTML attributes
- Function-based: Custom filtering logic
- Visibility-based: Filter visible/hidden elements
Traversal Directions:
- Descendant: Find children matching criteria
- Ancestor: Navigate to parent elements
- Sibling: Move to adjacent elements (next/previous)
Property Access:
// Properties return promises that resolve to values
element.count // Number of matched elements
element.exists // Boolean existence check
element.visible // Boolean visibility
element.textContent // String content
element.value // Input value
element.attributes // Object of attributes
element.style // Computed styles
Composition:
- Each method returns a new selector
- Original selector remains unchanged
- Enables reusable base selectors with variations
- Methods can be chained indefinitely