skill-lib/skills/zhihu-navigate/references/selector-strategy.md

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