Smart Selector Strategy
AutomateX follows Playwright's official recommendations for choosing stable selectors.
The Problem with Selectors
Most test failures aren't bugs — they're broken selectors.
Common issues:
- CSS classes change with styling updates
- IDs are auto-generated by frameworks
- DOM structure changes with refactoring
- XPath breaks with any hierarchy change
Playwright's Recommendation
From the official Playwright docs:
"We recommend prioritizing user-facing attributes and explicit contracts such as
page.getByRole()"
AutomateX Selector Priority
We automatically choose the best selector for each element:
| Priority | Method | Example | Stability |
|---|---|---|---|
| 1 | getByTestId() | data-testid="login-btn" | Highest |
| 2 | getByRole() | button with name "Sign In" | Highest |
| 3 | getByLabel() | Input with label "Email" | High |
| 4 | getByPlaceholder() | Input with placeholder | Medium |
| 5 | getByText() | Button containing text | Medium |
| 6 | locator('#id') | Stable ID (non-generated) | Medium |
| 7 | locator('.class') | CSS class (last resort) | Low |
Generated ID Detection
AutomateX detects and avoids auto-generated IDs from popular frameworks:
- React
useId()— patterns like:r1:,:r2: - Styled Components — patterns like
sc-bdnylx - CSS-in-JS — patterns like
css-1a2b3c - Next.js — patterns like
__next_123abc - Angular — patterns like
ng-c-123 - Ember — patterns like
ember123
These are automatically skipped in favor of more stable alternatives.
Duplicate Selector Handling
When multiple elements share the same label or text, AutomateX:
- Tries alternative selector strategies (placeholder, name, ID)
- Falls back to
.nth()disambiguation if all strategies collide - Lowers confidence scores to flag these for manual review
Warnings for Fragile Selectors
When stable selectors aren't available, AutomateX warns you:
Warning: 3 elements missing data-testid.
Consider adding for stable selectors.This helps you improve testability over time.
Focus Selector
For pages with complex navigation, limit detection to the main content area:
--focus-selector="main"
--focus-selector=".content"
--focus-selector="#app"This automatically excludes headers, footers, and navigation — generating page objects only for the content you care about.