60 lines
1.7 KiB
Markdown
60 lines
1.7 KiB
Markdown
# Selector Strategy
|
|
|
|
The source catalog already mixes stable and brittle selectors. Use this order when validating or refreshing selectors.
|
|
|
|
## Preferred Order
|
|
|
|
1. Stable `href` selectors for direct links
|
|
2. `aria-label` and `role` selectors for tabs, menus, and buttons
|
|
3. `data-testid` selectors when available
|
|
4. Stable semantic class names tied to product structure
|
|
5. Generic class selectors only as a last resort
|
|
6. CSS hash classes only when no better hook exists
|
|
|
|
## Good Patterns In The Current Catalog
|
|
|
|
- `a[href='/']`
|
|
- `a[href='/hot']`
|
|
- `a[href='/creator']`
|
|
- `button[aria-label='通知']`
|
|
- `[role='tab'][aria-label*='回复']`
|
|
- `[data-testid='sort-button']`
|
|
|
|
These are relatively resilient because they describe user-facing semantics instead of transient layout implementation.
|
|
|
|
## Known Brittle Or Weak Patterns
|
|
|
|
- `div.css-1q62b6s > div.css-byu4by`
|
|
- `button:has(img)`
|
|
- `.MoreButton`
|
|
- `.Popover`
|
|
- `.Tooltip`
|
|
- `.floating-menu`
|
|
- `.Modal`
|
|
- `.Dialog`
|
|
|
|
Risks:
|
|
|
|
- hash classes can change on any frontend build
|
|
- generic popup selectors can match the wrong layer
|
|
- image-based button matching is vulnerable to layout and icon changes
|
|
|
|
## Revalidation Rule
|
|
|
|
Before relying on a weak selector:
|
|
|
|
1. Check whether an `href`, `aria-label`, `role`, or `data-testid` selector now exists.
|
|
2. Confirm the selector matches exactly one intended element.
|
|
3. Confirm the element is visible and actionable in the current page state.
|
|
4. If the selector is still generic, pair it with a stronger page-context check before acting.
|
|
|
|
## Failure Handling
|
|
|
|
If a weak selector stops working:
|
|
|
|
- do not silently substitute another generic selector
|
|
- report which selector failed
|
|
- describe the page context where it failed
|
|
- request a selector refresh or DOM inspection before retrying
|
|
|