padosoft-frontend-testabilitylisted

Use this skill when writing or reviewing user-interface markup or components — a page, a form, a modal, a list, a widget, a screen — in a project that has end-to-end tests or will have them. Also when the user says a test broke after a purely visual refactor, that a test waits on a timer, that a selector depends on a generated class name, that a test cannot tell loading from empty, or asks how to make the interface testable. It gives the locator hierarchy the markup has to support, the eight contract rules, and the observable states every asynchronous action owes its test. Do not use it to write the tests themselves (padosoft-test-integrity), to design the interface, or to pick a testing framework.
padosoft/skills · ★ 1 · Web & Frontend · score 80

Install: claude install-skill padosoft/skills

# Frontend testability contracts A brittle end-to-end suite is usually not the tests' fault. The interface gave them nothing stable to hold on to, so they held on to a class name and a delay. **The rule: the markup owes the test a stable anchor and an observable state. Both are part of the interface's contract, like an API response shape.** --- ## 1. The locator hierarchy the markup has to support From most to least resilient. Whoever writes the interface decides how high the test can climb. | # | Anchor | Survives | |---|---|---| | 1 | **the accessible role and name** | restyling, restructuring, copy changes in most cases | | 2 | **the form label** | anything except renaming the label | | 3 | the placeholder | last resort for a field with no label | | 4 | visible text | only for **stable** text — page titles, fixed labels | | 5 | **an explicit test identifier** | everything, because it exists for this | | 6 | a style selector | nothing. Requires a written justification | Markup that forces the test down to level 6 is a contract violation, and it is the interface that has to change. ## 2. The eight rules **A. Semantically stable markup.** Buttons, links, inputs, dialogs and checkboxes expose a role and an accessible name that do not depend on a class or the shape of the tree. ```html  <div class="btn-primary" onclick="addToCart()">🛒</div>  <button type="button" aria-label="Add to cart">🛒</button>  <div class="modal-wrapper-v2">