free tool
will this selector survive the next redesign?
paste a css selector from a test, a product tour, or an in-app guide. you get a survival score and the specific reasons it might break. nothing leaves your browser.
20
survival score / 100
very likely to break soon.
- .sc-bdVaJa looks like a styled-components class. the next build can rename it.
- .css-1x2y3z looks like an Emotion-generated class. the next build can rename it.
sturdier: add a test attribute to the element and select it with button[data-testid="export-report"]
why selectors break
a selector is a promise that some element will keep looking the way it looked the day you wrote it. most selectors break because they promised the wrong thing. they said "the third button inside the second div" or "the element with class css-1x2y3z" when what they meant was "the export button".
generated class names are the worst offenders. css-in-js libraries and css modules hash class names at build time, so a harmless style change can rename every class on the page. utility classes fail more slowly but just as surely: bg-blue-500 is a statement about color, and colors get changed. position selectors like :nth-child break the moment someone adds a menu item above yours.
what to use instead
select elements by what they are. the most reliable option is an attribute that exists only to be selected, like data-testid. it tells anyone touching the markup that something depends on it. accessible attributes are a good second choice, because role and aria-labelfollow the meaning of a control rather than its styling. hand-written ids are fine when they're unique and nobody generates them.
why we built this
heytappr walks users through a product by spotlighting real controls, and every step points at a css selector. when a release breaks one, heytappr flags it in a needs-attention list so the guide gets fixed before a user hits it. this checker is the same thinking, pointed the other way: catch the fragile selector before it ships. more on this in our playbook for how-do-i tickets.
questions
What makes a CSS selector fragile?
Anything that describes how an element looks or where it sits, instead of what it is. Generated class names (css-1x2y3z, sc-bdVaJa), utility classes, :nth-child positions, and long chains of wrapper divs all change during ordinary refactors.
What is the most stable way to select an element?
A dedicated attribute that exists only to be selected, like data-testid, plus accessible attributes such as role or aria-label. They describe what the control is, so they survive restyles.
Why do product tours and in-app guides break after releases?
Most tour and guide tools anchor each step to a CSS selector. When a release renames a class or moves an element, the selector stops matching and the step points at nothing. Stable selectors, and tools that alert you when a target disappears, prevent this.
Does this tool send my selector anywhere?
No. The check runs entirely in your browser.