What is a CSS selector?
A CSS selector is an address for finding the right HTML element on a page. In the Testvoy visual editor, it tells which button, heading or banner should change.
Should be unique
Should select the same element on mobile
Should not break easily when layout changes
Stable selector example
<button data-testvoy="hero-primary-cta">
Start free
</button>
/* Good */
[data-testvoy="hero-primary-cta"]
/* Fragile */
body > div:nth-child(3) > section:nth-child(2) > buttonSelector examples
ID selectors are strong when the id is unique. Class selectors can be risky when reused. Data attribute selectors are usually the most stable for experiments.
#signup-button
.cta-button
[data-testid="pricing-cta"]
button.primary-cta
.hero .cta-button
a[href*="/pricing"]
Selectors to avoid
body > div:nth-child(3) > section:nth-child(2) > button
- Unique?
- Works on mobile?
- Appears after SPA route changes?
- Preview selects the right element?