CSS Seçici Test Aracı

CSS Seçici Test Aracı Nasıl Çalışır

Araç Ne Yapar

CSS Seçici Test Aracı, CSS seçicilerini HTML girdisine karşı değerlendirir ve eşleşen tüm öğeleri görsel olarak vurgular. Bir panelde HTML'yi yapıştırır veya yazarsınız, bir CSS seçicisi girersiniz ve toplam eşleşme sayısıyla birlikte hangi öğelerin eşleştiğini anında görürsünüz. Bu, tarayıcı DevTools'u açmadan veya canlı bir sayfayı değiştirmeden seçici özgüllüğü ve kapsamı hakkında anında geri bildirim sağlar.

Yaygın Geliştirici Kullanım Senaryoları

Frontend geliştiricileri bu aracı, stil vermek için hassas seçiciler oluşturmak, çıkarım kodunu yazmadan önce örnek HTML üzerinde scraping seçicilerini test etmek ve bir CSS kuralının neden hedeflenen öğelere uygulanmadığını hata ayıklamak için kullanır. QA mühendisleri, Cypress veya Playwright seçicilerini sayfa anlık görüntülerine karşı doğrular. Ayrıca RSS okuyucuları, e-posta ayrıştırıcıları veya headless tarayıcı otomasyon betikleri için içerik çıkarma kuralları yazarken de faydalıdır.

Veri Biçimleri, Türleri veya Varyantlar

Araç, tür seçicileri, sınıf ve ID seçicileri, operatörlü öznitelik seçicileri ([attr^=value], [attr$=value]), pseudo-class'lar (:nth-child, :not, :first-of-type), birleştiriciler (alt öğe, child >, bitişik kardeş +, genel kardeş ~) ve pseudo-element'ler (::before, ::after) dahil olmak üzere CSS Selectors Level 3 belirtiminin tamamını destekler. Karmaşık bileşik seçiciler ve seçici listeleri (virgülle ayrılmış) tamamen desteklenir.

Yaygın Hatalar ve Sınır Durumları

CSS seçici eşleştirme, ham HTML metnine değil, ayrıştırılmış DOM yapısına bağlıdır — kapatılmamış etiketler, örtük öğeler (tbody) ve tarayıcı hata düzeltmesi, gerçek DOM'un kaynakta gördüğünüzden farklı olmasına neden olabilir. Pseudo-element'ler (::before, ::after) gerçek DOM düğümleri değildir ve querySelector ile seçilemez. XML/SVG içeriğindeki namespace önekleri özel işlem gerektirir. Örnek HTML'de çalışan aşırı özgül seçiciler, işaretlemesi biraz farklı olan üretim sayfalarında bozulabilir.

Bu Aracı Ne Zaman Kullanmalı, Ne Zaman Kod Yazmalı

Etkileşimli seçici geliştirme ve HTML parçacıklarına karşı hızlı doğrulama için bu tarayıcı aracını kullanın. Üretim web scraping'i veya test otomasyonu için, JavaScript yürütme, dinamik içerik, shadow DOM dolaşımı ve iframe işleme ile statik HTML eşleştirmenin kopyalayamayacağı şekilde gerçek render edilmiş DOM üzerinde çalışan framework'ünüzün yerleşik seçici testini (Playwright'ın page.locator, Puppeteer'ın page.$) kullanın.