Test Otomasyonunda CSS Seçicileri ile Güçlü ve Esnek Testler Yazmak

Test otomasyonu yaparken, özellikle web testlerinde elementleri seçmek için en iyi yöntemlerden biri CSS seçicileridir. XPath ile kıyaslandığında, CSS seçicileri daha okunaklı, daha hızlı ve bakımı daha kolay bir yöntem sunar. Bu yazıda, CSS seçicilerinin test otomasyonundaki kullanımına dair detayları ele alacağız.

1. CSS Seçicileri Neden Önemli?

Test otomasyonunda elementleri bulmak ve onlarla etkileşim kurmak temel gereksinimlerden biridir. CSS seçicileri, hızlı, basit ve güçlü olmalarıyla öne çıkar. İşte bazı avantajları:

✅ Daha Kısa ve Okunaklıdır → XPath’e kıyasla daha sade bir yapıya sahiptir.
✅ Performanslıdır → Modern tarayıcılarda XPath’ten daha hızlı çalışır.
✅ Bakımı Kolaydır → Kod içinde okunabilirliği artırır ve değişiklikler daha rahat yapılabilir.

2. CSS Seçicilerinin Kullanımı

Temel CSS Seçicileri

Seçici	Açıklama	Örnek
`element`	Belirtilen etiketleri seçer.	`button` → Tüm `<button>` etiketlerini seçer.
`#id`	Belirtilen ID’ye sahip öğeyi seçer.	`#login-button`
`.class`	Belirtilen sınıfa sahip öğeleri seçer.	`.input-field`
`element.class`	Belirtilen element ve sınıfa sahip öğeleri seçer.	`input.text-field`

Gelişmiş CSS Seçicileri

Seçici	Açıklama	Örnek
`[attribute="value"]`	Belirli bir attribute değerine sahip öğeleri seçer.	`input[type="text"]`
`parent > child`	Sadece belirtilen üst öğenin doğrudan alt öğesini seçer.	`div > p`
`element:first-child`	İlk çocuğu seçer.	`li:first-child`
`element:last-child`	Son çocuğu seçer.	`li:last-child`
`element:nth-child(n)`	Belirtilen sıradaki öğeyi seçer.	`li:nth-child(2)` → 2. `<li>` öğesini seçer.

3. Robot Framework ve Selenium ile CSS Kullanımı

Robot Framework kullanıyorsanız, SeleniumLibrary ile CSS seçicilerini doğrudan kullanabilirsiniz:

robotCopyEditClick Element    css=#login-button
Input Text      css=input[name="username"]    testuser
Click Element    css=button[type="submit"]

Benzer şekilde, Python ile Selenium kullanıyorsanız:

pythonCopyEditfrom selenium import webdriver

driver = webdriver.Chrome()
driver.get("https://example.com")

# CSS Seçicisi ile Element Bulma
login_button = driver.find_element("css selector", "#login-button")
login_button.click()

4. XPath mi, CSS mi?

✅ XPath, dinamik içerik ve karmaşık DOM yapılarında daha esnek olabilir.
✅ CSS seçicileri, hız, okunabilirlik ve basitlik açısından daha avantajlıdır.

Genellikle CSS seçicileri yeterlidir ve tercih edilmelidir. Ancak dinamik yapıları yönetmek veya yukarı doğru gezinmek gerektiğinde XPath kullanılabilir.

Test otomasyonunda CSS seçicileri, hızlı, performanslı ve bakımı kolay testler yazmak için mükemmel bir çözümdür. XPath’in karmaşıklığını minimize ederek, daha temiz ve etkili test kodları yazabilirsiniz.

Siz testlerinizde CSS seçicilerini nasıl kullanıyorsunuz? Deneyimlerinizi yorumlarda paylaşın! 🚀

Deniz Güzel