CSS selector nedir?
CSS selector, sayfadaki doğru HTML elementini bulmak için kullanılan adrestir. Testvoy görsel editörde selector, hangi butonun, başlığın veya banner’ın değiştirileceğini belirler.
Benzersiz olmalı
Mobilde de aynı elementi seçmeli
Sayfa tasarımı değişince kolay kırılmamalı
Stabil selector örneği
<button data-testvoy="hero-primary-cta">
Ücretsiz dene
</button>
/* Good */
[data-testvoy="hero-primary-cta"]
/* Fragile */
body > div:nth-child(3) > section:nth-child(2) > buttonSelector örnekleri
ID selector benzersiz id varsa güçlüdür. Class selector aynı class birden çok yerde kullanılıyorsa risklidir. Data attribute selector deneyler için en stabil yaklaşımdır.
#signup-button
.cta-button
[data-testid="pricing-cta"]
button.primary-cta
.hero .cta-button
a[href*="/pricing"]
Kaçınılması gereken selector
body > div:nth-child(3) > section:nth-child(2) > button
- Benzersiz mi?
- Mobilde çalışıyor mu?
- SPA route sonrası tekrar geliyor mu?
- Preview doğru elementi seçiyor mu?