selector-strategies

Name: selector-strategies
Rating: 8.4 (4 reviews)
Author: omerlefaruk

by omerlefaruk00GitHub

Provides concrete guidance on writing reliable CSS/XPath selectors for web automation, focusing on stable attributes like data-testid and avoiding brittle patterns. Includes priority tables, anti-pattern warnings, and handling strategies for dynamic content in React apps.

Unlock Deep Analysis

Use AI to visualize the workflow and generate a realistic output preview for this skill.

Target Audience

RPA developers, test automation engineers, and web developers writing reliable selectors for Playwright, Selenium, or Puppeteer

10/10Security

Low security risk, safe to use

Clarity

Practicality

Quality

Maintainability

Innovation

Testing

web-automationcss-selectorsxpathrpatest-engineering

Compatible Agents

Claude Code

~/.claude/skills/

Codex CLI

~/.codex/skills/

Gemini CLI

~/.gemini/skills/

OpenCode

~/.opencode/skills/

OpenClaw

~/.openclaw/skills/

GitHub Copilot

~/.copilot/skills/

Cursor

~/.cursor/skills/

Windsurf

~/.codeium/windsurf/skills/

Cline

~/.cline/skills/

Roo Code

~/.roo/skills/

Kiro

~/.kiro/skills/

Junie

~/.junie/skills/

Augment Code

~/.augment/skills/

Warp

~/.warp/skills/

Goose

~/.config/goose/skills/

SKILL.md

Selector Strategies

Best practices for CSS and XPath selectors in RPA automation.

Core Principles

Prefer stable attributes: data-testid, aria-label, name over classes/IDs
Anchor to reliable parents: Combine structural + semantic selectors
Avoid brittle indices: Never nth-child, :first, [1]
Handle dynamic content: Use text contains, partial matches, attributes
Document intent: Comment why selector was chosen

Robust Attributes (Priority Order)

Attribute	Stability	Notes
`data-testid`	★★★★★	Made for testing, never changes for styling
`data-*`	★★★★☆	Custom data attributes are stable
`aria-label`	★★★★☆	Accessibility, rarely changes
`name`	★★★★☆	Form inputs, usually stable
`id`	★★★☆☆	Can be dynamic (e.g., `user-12345`)
`class`	★★☆☆☆	Often changes with CSS refactors

Selector Hierarchies

GOOD: Anchor → Semantic → Leaf
[data-testid="login-form"] → input[name="username"]

BAD: Deep chain of classes
div.container > div.row > div.col > input.form-control

Dynamic Element Handling

Pattern	CSS	XPath
Text contains	`:has-text("Submit")`	`//*[contains(text(),"Submit")]`
Partial attr	`[href*="/products"]`	`//*[contains(@href,"/products")]`
Attr starts	`[id^="user-"]`	`//*[starts-with(@id,"user-")]`
Attr ends	`[class$="-active"]`	`//*[ends-with(@class,"-active")]`
Sibling	`h2 + p`	`//h2/following-sibling::p[1]`

Maintenance Tips

Group selectors by feature: Create selector constants per page/feature
Version selectors: Tag selectors with app version when known to break
Fallback selectors: Provide primary + backup for critical elements
Wait strategies: Combine selectors with proper wait conditions

Anti-Patterns

/* NEVER */
div:nth-child(3)           /* Brittle - breaks on DOM change */
.button:first             /* Fragile - assumes button order */
#react-root-12345         /* Dynamic ID - changes each render */
[class*="active"]         /* Too broad - matches multiple */

Examples

See examples/ folder for good/bad comparisons.

Parent: ../_index.md

Source: https://github.com/omerlefaruk/CasareRPA#.claude~skills~selector-strategies

Content curated from original sources, copyright belongs to authors

Grade A

8.4AI Score

Best Practices

Checking...

Try this Skill

User Rating

USER RATING

0UP

0DOWN

Loading files...

WORKS WITH

Claude

Codex

Gemini