CSS Seçici Selenium

By: Krishna Rungta Krishna Rungta
Hours Güncellenmiş

⚡ Akıllı Özet

CSS Seçici Selenium CSS Seçici, HTML etiketleri, kimlikler, sınıflar, öznitelikler ve iç metin kalıplarını kullanarak öğeleri tanımlayan güçlü bir konum belirleme stratejisidir. Bu kaynak, her CSS Seçici türünü adım adım örneklerle açıklamaktadır. Selenium IDE.

  • 🆔 Etiket ve Kimlik: Benzersiz bir ID özniteliğine sahip öğeleri tam olarak hedeflemek için HTML etiketini # önekiyle birleştirin.
  • 🎯 Etiket ve Sınıf: Aynı CSS sınıfını paylaşan öğeleri bulmak için nokta (.) sözdizimini kullanın; bu, tekrarlanan kullanıcı arayüzü bileşenleri için faydalıdır.
  • 🧩 Etiket ve Nitelik: Öğeleri ad, tür veya herhangi bir özel özellik çifti aracılığıyla tanımlamak için [attribute=value] parantezlerini kullanın.
  • 🪜 Etiket, Sınıf ve Nitelik: Sınıf adları ve öznitelik değerleri aynı olan öğeleri ayırt etmek için birden fazla koşulu bir araya getirin.
  • 🔤 İç Metin Eşleşmesi: Kimlik, ad veya sınıf içermeyen etiketleri ve öğeleri bulmak için `:contains(“text”)` kalıbını kullanın.
  • ✅ En iyi pratik: İstikrarlı kimlikleri, derinlemesine iç içe geçmiş seçicilere tercih edin. Selenium Otomasyon komut dosyaları, kullanıcı arayüzü değişikliklerine karşı dayanıklıdır.
Devamını Oku

CSS Seçici Selenium

CSS Seçici nedir? Selenium?

A CSS Seçici Selenium CSS seçiciler, HTML etiketi, kimlik (id), sınıf (class) ve özniteliklerin bir kombinasyonu aracılığıyla bir web öğesini tanımlayan bir dize kalıbıdır. CSS seçiciler, kimlik veya isimle bulmaktan biraz daha gelişmiş bir yöntemdir, ancak deneyimli kullanıcılar arasında en popüler stratejidir. Selenium Kullanıcılar, ID veya Name özniteliği olmayan öğelere ulaşabildikleri için bu avantajdan faydalanırlar.

CSS Seçiciler Selenium Çeşitli şekillerde karşımıza çıkabilirler, ancak bu kılavuz en sık kullanılan beş desene odaklanmaktadır. Selenium SDI:

  • Etiket ve kimlik
  • Etiket ve Sınıf
  • Etiket ve Özellik
  • Etiket, Sınıf ve Özellik
  • İç Metin

Bu stratejiyi kullanırken Selenium IDE, her zaman önekini ekler. Target kutu içindecss=Aşağıdaki her örnekte gösterildiği gibi.

CSS Seçicilerini Neden Kullanırsınız? Selenium?

CSS Seçiciler, birçok kişi için tercih edilen konum belirleme stratejisidir. Selenium Otomasyon mühendisleri için hız, esneklik ve okunabilirliği dengeledikleri için tercih edilirler. Modern web uygulamaları genellikle dinamik olarak oluşturulan kimlikleri kullanır veya ad niteliklerini tamamen kaldırır; bu da CSS Seçicilerini sayfadaki belirli bir öğeyi hedeflemenin tek güvenilir yolu haline getirir.

CSS Seçicilerini kullanmanın başlıca avantajları şunlardır:

  • Performans: CSS seçicileri tarayıcının yerel motoru tarafından işlenir, bu nedenle özellikle Internet Explorer gibi eski tarayıcılarda eşdeğer XPath ifadelerinden daha hızlı çalışırlar.
  • Esneklik: Etiket, sınıf, öznitelik ve kısmi eşleşme mantığını birleştirerek test uzmanlarının istikrarlı bir kimliğe sahip olmayan öğeleri hedeflemesine olanak tanırlar.
  • okunabilirlik: Sözdizimi, geliştiricilerin halihazırda CSS kurallarını yazma biçimini yansıtıyor; bu da hem kalite kontrol mühendisleri hem de ön uç ekipleri için öğrenme sürecini kısaltıyor.
  • Tarayıcılar arası kararlılık: CSS Seçicileri Chrome genelinde tutarlı davranır. FirefoxEdge ve Safari gibi tarayıcılarda, test hatalarının sıklığını azaltıyor.

Etiket ve Kimlik – CSS Seçici

Bu örnekte Facebook giriş sayfasındaki E-posta metin kutusu kullanılmıştır. Öğenin kimliği "E-posta", ve zaten "Kimliğe Göre Konum Belirleme" bölümünden erişilmişti. Şimdi aynı öğe, bir yöntem kullanılarak hedefleniyor. Selenium ID özniteliğine sahip CSS seçici.

Sözdizimi

css=tag#id

  • tag = erişilen öğenin HTML etiketi
  • # = kullanılırken her zaman bulunması gereken hashtag işareti. Selenium Kimlikli CSS Seçici
  • id = erişilen öğenin kimliği

Kimliğin önünde her zaman bir karma işaretinin (#) bulunduğunu unutmayın.

) 1 Adım Şu yöne rotayı ayarla www.facebook.comTarayıcınızın Geliştirici Araçlarını (veya Firebug gibi eski bir aracı) kullanarak "E-posta veya Telefon" metin kutusunu inceleyin.

HTML etiketinin “ olduğuna dikkat edin.girişve kimlik numarası "E-postaDolayısıyla, CSS Seçici'nin tamamı şu şekilde olur:css=giriş#e-posta".

Etiket ve kimlik - CSS Seçici Selenium

) 2 Adım Giriş "css=giriş#e-posta" içine Target kutusu Selenium IDE'yi seçin ve Bul düğmesine tıklayın. Selenium IDE, sayfadaki eşleşen öğeyi vurgular.

Selenium IDE, Etiket ve Kimlik aracılığıyla E-posta alanını vurguluyor.

Etiket ve Sınıf – CSS Seçici

Bir CSS Seçici Selenium HTML etiketi ve sınıf adı kullanan yapı, etiket ve kimlik (ID) ile aynı mantığa dayanır, ancak '#' işareti yerine nokta (.) kullanılır.

Sözdizimi

css=tag.class

  • tag = erişilen öğenin HTML etiketi
  • . = nokta işareti; sınıf içeren bir CSS seçici kullanılırken her zaman mevcut olmalıdır.
  • class = erişilen öğenin sınıfı

) 1 Adım Demo sayfasını açın https://demo.guru99.com/test/facebook.html ve “E-posta veya Telefon” metin kutusunu inceleyin. HTML etiketinin “girişve sınıfı şudur:metin girişi".

Etiket ve sınıf - CSS Seçici Selenium

) 2 Adım In Selenium IDE'ye "css=input.inputtext" içinde Target kutusuna tıklayın ve Bul'a tıklayın. Selenium IDE, E-posta veya Telefon metin kutusunu tanır.

Selenium IDE, Etiket ve Sınıf kullanarak öğeyi buluyor.

Birden fazla öğe aynı HTML etiketini ve sınıfını paylaştığında, kaynak kodda yalnızca ilk eşleşen öğenin tanındığını unutmayın. Aynı sayfadaki Parola metin kutusunu inceleyin ve E-posta veya Telefon metin kutusuyla aynı sınıfa ait olduğunu fark edin.

Aynı Etiket ve Sınıfı paylaşan birden fazla öğe

Önceki görselde yalnızca E-posta veya Telefon metin kutusu vurgulanmıştı çünkü sayfa kaynağında ilk sırada yer alıyordu.

Sayfa kaynağı sıralamasının belirlenmesi Selenium maç

Etiket ve Nitelik – CSS Seçici

Bu strateji, bir HTML etiketini, erişmek istediğiniz öğeye ait belirli bir öznitelikle birleştirir.

Sözdizimi

css=tag[attribute=value]

  • tag = erişilen öğenin HTML etiketi
  • [ ve ] = özniteliği ve ona karşılık gelen değeri çevreleyen köşeli parantezler.
  • attribute = kullanılacak özellik. Ad veya kimlik gibi öğeye özgü bir özellik seçin.
  • değer = seçilen özelliğin karşılık gelen değeri.

) 1 Adım gidin Mercury Turlar Kayıt sayfası https://demo.guru99.com/test/newtours/register.php ve “Soyadı” metin kutusunu inceleyin. HTML etiketini (“input”) ve ad özniteliğini (“lastName”) not edin.

Etiket ve öznitelik - CSS Seçici Selenium

) 2 Adım In Selenium IDE'ye "css=giriş[isim=soyadı]" içinde Target kutusuna tıklayın ve Bul'a tıklayın. Selenium IDE, Soyadı alanını başarıyla buldu.

Selenium IDE, soyadını öznitelik aracılığıyla buluyor.

Birden fazla öğe aynı HTML etiketini ve özniteliğini paylaştığında, yalnızca ilki tanınır. Davranış, aynı etiket ve sınıfa sahip öğeleri bulmakla tamamen aynıdır.

İLGİLİ MAKALELER

Etiket, Sınıf ve Öznitelik – CSS Seçici

Sözdizimi

css=tag.class[attribute=value]

  • tag = erişilen öğenin HTML etiketi
  • . = nokta işareti; sınıf içeren bir CSS seçici kullanılırken her zaman mevcut olmalıdır.
  • class = erişilen öğenin sınıfı
  • [ ve ] = belirli bir özniteliği ve ona karşılık gelen değeri çevreleyen köşeli parantezler.
  • attribute = kullanılacak özellik. Ad veya kimlik gibi öğeye özgü bir özellik seçin.
  • değer = seçilen özelliğin karşılık gelen değeri.

) 1 Adım Demo sayfasını açın https://demo.guru99.com/test/facebook.html ve “E-posta veya Telefon” ve “Şifre” giriş kutularını inceleyin. HTML etiketlerini, sınıflarını ve özelliklerini not edin. Bu örnekte “tabindex" bağlanmak.

Etiket, sınıf ve nitelik - CSS Seçici

) 2 Adım Öncelikle tabindex değeri 1 olan “E-posta veya Telefon” metin kutusuna erişin. Ardından “css=input.inputtext[tabindex=1]"İçine Selenium IDE'ler Target Kutucuğu açın ve Bul'a tıklayın. E-posta veya Telefon alanı vurgulanacaktır.

Selenium IDE, etiket, sınıf ve öznitelik kullanarak e-postaları buluyor.

) 3 Adım Parola giriş kutusunu hedeflemek için, tabindex değerini değiştirmeniz yeterlidir. "css=input.inputtext[tabindex=2]" içinde Target kutusuna tıklayın ve Bul'a tıklayın. Selenium IDE, Parola metin kutusunu başarıyla buldu.

Selenium IDE, etiket, sınıf ve öznitelik kullanarak parolayı buluyor.

İç Metin – CSS Seçici

HTML etiketlerine nadiren id, name veya class öznitelikleri verilir. Peki bunlara nasıl erişilir? SeleniumCevap, iç metinlerinde gizli. İç metinler, HTML etiketinin sayfada görüntülediği gerçek metin kalıplarıdır.

Sözdizimi

css=tag:contains("inner text")

  • tag = erişilen öğenin HTML etiketi
  • İç metin = öğenin görünür metin içeriği

) 1 Adım gidin Mercury Turlar ana sayfası https://demo.guru99.com/test/newtours/ ve “Şifre” etiketini inceleyin. HTML etiketine (“font” bu durumda) dikkat edin ve öğenin herhangi bir sınıf, kimlik veya ad özniteliğine sahip olmadığını gözlemleyin.

İç metin - CSS Seçici incelemesi

) 2 Adım Menşei css=font:contains(“Şifre:”) içine Selenium IDE'ler Target kutusuna tıklayın ve Bul'a tıklayın. Selenium IDE, aşağıda gösterildiği gibi Parola etiketini bulur.

Selenium IDE, parola etiketini iç metne göre buluyor.

) 3 Adım Bu sefer iç metni "Boston" ile değiştirin, böylece Target "olur"css=font:contains(“Boston”)"Bul'a tıklayın. "Boston'dan San Francisco'ya" etiketi vurgulanarak şunu gösterir: Selenium IDE, etiket içeriğinin yalnızca ilk kelimesi girildiğinde bile uzun bir etiketi bulabilir.

Selenium IDE kısmi iç metin eşleşmesi

CSS Seçici ve XPath Karşılaştırması Selenium

Hem CSS seçicileri hem de XPath, web öğelerini tanımlamak için kullanılır. SeleniumAncak, farklı güçlü yönleri vardır. Aşağıdaki tablo, iki konum belirleme stratejisini temel boyutlarda karşılaştırmaktadır:

Kriterler CSS Seçici XPath
hız Daha hızlı, tarayıcının yerel motorunda çalışır. Özellikle eski tarayıcılarda daha yavaş.
Kullanım Şekli Yalnızca ilet (ebeveynden çocuğa) İleri ve geri (çocuktan ebeveyne)
Sözdizimi Daha kısa ve CSS kurallarına benzer. Daha uzun, hiyerarşik yol ifadeleri
Metin eşleştirme :contains() sözde sınıfıyla sınırlıdır. Güçlü text() ve contains() fonksiyonları
İçin en iyisi Statik düzenler ve modern web uygulamaları Karmaşık DOM dolaşımı ve metin tabanlı konum belirleyiciler

CSS Seçicilerini Yazmak İçin En İyi Uygulamalar Selenium

Güvenilir CSS seçicileri yazmak, sadece sözdizimini bilmekten daha fazlasını gerektirir. Aşağıdaki uygulamalar, test uzmanlarının istikrarlı ve sürdürülebilir seçiciler oluşturmasına yardımcı olur. Selenium Kullanıcı arayüzü değişikliklerinden etkilenmeyen komut dosyaları:

  1. Benzersiz özelliklere öncelik verin: Otomasyon için özel olarak eklenen id, data-test-id veya name özelliklerini her zaman seçin. Görsel düzen değişse bile bunlar sabit kalır.
  2. Aşırı iç içe geçmiş seçicilerden kaçının: Uzun zincirler gibi div > div > ul > li > a Geliştiriciler işaretlemeyi yeniden düzenlediğinde kolayca bozulabilir. Seçicileri mümkün olduğunca kısa tutun.
  3. Kısmi eşleşmeleri akıllıca kullanın: Gibi desenler [class*="btn-primary"] Sınıf adlarında yapılan küçük değişikliklere tolerans gösterirler, ancak istenmeyen öğelerle de eşleşebilirler.
  4. İndeks tabanlı konum belirleyicilerden kaçının: Seçiciler gibi nth-child(3) Bir kardeş öğe eklemek her pozisyonu değiştirdiği için kırılgandırlar.
  5. Geliştirici Araçları'nda seçicileri doğrulayın: çalıştırmadan önce Selenium Komut dosyasını kullanarak seçiciyi Chrome Geliştirici Araçları Konsoluna yapıştırın. document.querySelector() Tam olarak bir öğe döndürdüğünü doğrulamak için.
  6. Benzersizlik için özellikleri birleştirin: Bir sınıf birçok öğe tarafından paylaşıldığında, aşağıdaki gibi bir öznitelik filtresi ekleyin: input.form-control[name="email"] Hedefi netleştirmek için.
  7. Belgeleme ve yeniden kullanım: Sayfa Nesnesi sınıfı içindeki seçicileri merkezileştirerek, tek bir güncelleme ile aynı öğeye referans veren her testin düzeltilmesini sağlayın.

Bu yönergeleri takip etmek, kararsızlığı azaltır, test yürütme hızını artırır ve Selenium Süitlerin zaman içinde bakımı daha kolaydır.

Özet: CSS Seçici Sözdizimi Hızlı Referans Kılavuzu

Aşağıdaki tablo her şeyi bir araya getiriyor. Selenium Bu kılavuzda ele alınan CSS Seçici kalıbı:

Yöntem Target Sözdizimi Örnek E-posta
Etiket ve kimlik css=etiket#id css=giriş#e-posta
Etiket ve Sınıf css=tag.class css=input.inputtext
Etiket ve Özellik css=etiket[özellik=değer] css=giriş[isim=soyadı]
Etiket, Sınıf ve Özellik css=tag.class[öznitelik=değer] css=input.inputtext[tabindex=1]
İç Metin css=etiket:içerir("metin") css=font:contains(“Şifre:”)

SSS

Evet. CSS seçicileri genellikle XPath'ten daha hızlı çalışır çünkü tarayıcılar CSS kurallarını doğal olarak işler. Bu fark, Internet Explorer'ın eski sürümlerinde daha belirgindir, ancak Chrome gibi modern tarayıcılar daha az belirgindir. Firefox Aradaki farkı daraltın.

Evet. CSS Seçiciler şu amaçla yazılmıştır: Selenium IDE doğrudan çalışır Selenium WebDriver aracılığıyla By.cssSelector()Tek fark, WebDriver'ın "css=" önekine ihtiyaç duymamasıdır, çünkü konum belirleyici türü yöntemin kendisi tarafından belirtilir.

Hayır. Firebug, 2017 yılında başka bir projeyle birleştirildikten sonra kullanımdan kaldırıldı. Firefox Geliştirici Araçları. Günümüzde test uzmanları Chrome'da yerleşik Geliştirici Araçlarını kullanıyor. FirefoxVeya Edge tarayıcısını kullanarak öğeleri inceleyebilir ve CSS Seçicilerini eklemeden önce doğrulayabilirsiniz. Selenium komut.

Evet. Yapay zeka destekli araçlar, örneğin... TestimMabl ve ChatGPT, DOM'u analiz ederek CSS seçicileri önerebilir. Geliştiriciler sınıfları yeniden adlandırdığında veya sayfayı yeniden yapılandırdığında seçicileri uyarlayarak bakım çabasını azaltırlar.

Yapay zekâ destekli kendi kendini onaran motorlar, çevredeki DOM'u analiz eder ve bozuk konum belirleyicilerden otomatik olarak kurtulur. Bir CSS Seçici başarısız olduğunda, motor öznitelik benzerliği, metin içeriği ve geçmiş kalıpları kullanarak en yakın eşleşen öğeyi belirler ve test kararlılığını geri yükler.

Kısmi eşleşme kalıplarını kullanın, örneğin: [id^="user_"] Ön ekler için, [id$="_btn"] son ekler için veya [id*="cart"] Alt dizeler için. Bu kalıplar, tam bir değer gerektirmeden dinamik olarak oluşturulan kimliklerle eşleşir.

CSS seçicileri, alt öğeden üst öğeye doğru yukarı doğru geçiş yapamaz ve sınırlı metin eşleştirme desteği sunar. Bu senaryolar için XPath daha iyi bir seçenektir. CSS ayrıca, bitişik ve genel kardeş öğelerin ötesinde kardeş öğe mantığı için yerleşik işlevlerden yoksundur.

Tarayıcı Geliştirici Araçlarını açın, Konsol sekmesine geçin ve çalıştırın. document.querySelectorAll("your-selector")Döndürülen NodeList, eşleşen her öğeyi gösterir. Güvenilir bir Selenium Benzersiz hedefleme için konum belirleyici tam olarak bir öğe döndürmelidir.

Bu yazıyı şu şekilde özetleyin: