harden-locatorslisted

# Skill: harden-locators Replace selectors that describe where an element *sits* with selectors that describe what it *is*. A locator is a claim about the page. `.col-md-4 > div:nth-child(2) > span` claims a layout will never change, which is the one thing layouts do. `getByRole('status')` claims an element announces itself as a status, which changes only when the meaning changes — and if the meaning changed, the test *should* break. ## Preconditions `.claude/test-profile.md` exists and records the repo's observed locator habit and its configured test-id attribute. Without it you may "harden" a suite into a form inconsistent with the other 200 locators, which trades one problem for a worse one. ## The order to prefer Consult the profile first — match the repo's habit unless it is XPath or positional CSS, which are never the right habit. Absent a strong repo habit, prefer in this order: 1. **Role plus accessible name** — how assistive technology identifies the element. Survives styling, markup and framework changes. 2. **Label, placeholder, or associated text** for form controls — what the user reads to know what the field is for. 3. **Visible text** for content and links, exact-matched to avoid catching substrings. 4. **A dedicated test attribute** — stable and explicit, but invisible to users, so it cannot tell you the element is still labelled correctly. Prefer it over CSS, not over role. 5. **Semantic CSS** — a component-level class or tag that a developer