Skip to content
Development
Skill

/quality-engineering-selector-stability

Cross-stack selector and test-id policy for web and mobile automation. Use when writing or reviewing E2E/UI test locators, or adding data-testid/accessibility identifiers to components.

Boost this skill
@hoangnguyen0403hoangnguyen0403@hoangnguyen0403
From plugin
agent-skills-standard
565200 skills21 agents21 commands1 MCP
Install
$ npx -y skills add hoangnguyen0403/agent-skills-standard --skill quality-engineering-selector-stability --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/quality-engineering-selector-stability

Context preview

The summary Claude sees to decide when to auto-load this skill.

Cross-stack selector and test-id policy for web and mobile automation. Use when writing or reviewing E2E/UI test locators, or adding data-testid/accessibility identifiers to components.

SKILL.md

quality-engineering-selector-stability.SKILL.md
name: quality-engineering-selector-stability
description: Cross-stack selector and test-id policy for web and mobile automation. Use when writing or reviewing E2E/UI test locators, or adding data-testid/accessibility identifiers to components.
metadata:
  triggers:
    files:
      - "**/e2e/**/*.{ts,js}"
      - "**/*.e2e.{ts,js}"
    keywords:
      - selector
      - locator
      - data-testid
      - testID
      - accessibilityIdentifier
      - testTag
      - stable locator
      - selector drift

Quality Engineering: Selector Stability

**Priority: P0 (CRITICAL)**

Web Ladder

`getByRole` / `getByLabel` > `getByTestId` (`data-testid`) > attribute CSS. Never XPath, `nth-child`, or generated class names.

Mobile Ladder

Accessibility id > resource-id / `testTag` > predicate/uiautomator > XPath. Never XPath.

Framework Map

  • React/Next.js: `data-testid`. React Native: `testID` + `accessibilityLabel`.
  • Flutter: `Semantics(identifier:)` for black-box E2E; `WidgetKeys` stay for widget tests.
  • SwiftUI/UIKit: `.accessibilityIdentifier`. Compose: `Modifier.testTag` + `testTagsAsResourceId = true`.

Naming

`<screen>-<element>-<role>`, kebab-case (e.g. `checkout-submit-button`).

Insertion Policy

Add ids to leaf interactive/assertable elements only, never layout wrappers. Never rename an existing id — ids are a public contract other tests depend on.

Drift Classes

`rename` (id changed), `restructure` (DOM/tree moved), `i18n` (visible text changed, id untouched).

Anti-Patterns

  • Text selectors on translated strings, index-based locators (`nth`), generated/hashed class names.
  • Using `accessibilityLabel` as a test id (it is user-facing a11y text, not a stable identifier).
  • "xpath just for now" — there is no temporary XPath; use the ladder from the first commit.

References

  • [Selector Ladder Details](references/selector-ladder.md)
  • [Test-ID Naming](references/testid-naming.md)
  • [Insertion Policy](references/insertion-policy.md)
  • [Drift Classification](references/drift-classification.md)
Read more
Read it on GitHub ↗
Ships withagent-skills-standard

The portable SDLC standards layer for AI coding agents. Sync once, then work in your own runtime.

Get the whole plugin
Stats
TypeScriptAngularGoJavaKotlin
+7 tags
PHPGitHubAnthropicMCPiOSAndroidFlutter
566
Stars
164
Forks
Active
Maintenance
TypeScript
Language
MIT
License
7h ago
Last commit
8mo ago
Created

Repo: hoangnguyen0403/agent-skills-standard

In this plugin
200 skills21 agents21 commands1 MCP
See everything inside

Other skills on agent-skills-standard.

See all 200 skills in agent-skills-standard