Playwright Locator ile Karmaşık UI Öğelerini Kolayca Yönetme
Merhaba, ben Fatih Soysal. Bu yazıda, Playwright’in güçlü yer belirleyici (locator) özelliğini kullanarak karmaşık UI öğelerini nasıl kolayca yönetebileceğinizi detaylı bir şekilde ele alacağız. Playwright, modern web uygulamalarının otomasyonunda büyük kolaylık sağlayan bir araçtır. Özellikle karmaşık ve dinamik UI’lar söz konusu olduğunda, güçlü yer belirleyici mekanizması sayesinde testlerinizi daha sağlam ve güvenilir hale getirebilirsiniz.
Öncelikle, Playwright locator’larının ne kadar güçlü olduğunu anlamak önemlidir. Basit CSS seçicilerinden çok daha fazlasını sunar. XPath ve özel seçicilerle birlikte kullanıldığında, neredeyse her web öğesini hedeflemenize olanak tanır. Bu, özellikle dinamik ID’ler veya sınıf adları kullanan uygulamalar için büyük bir avantaj sağlar. Örneğin, her sayfa yenilenmesinde değişen ID’li bir butona ulaşmak için, daha kararlı bir seçici stratejisi izlemek gereklidir. Bu noktada Playwright’in sunduğu esneklik devreye girer.
Farklı Locator Türleri ve Kullanım Alanları
Playwright, çeşitli locator türlerini destekler. Bunlardan bazıları şunlardır:
- CSS Seçiciler: Bilinen CSS seçicileri (örneğin,
#myButton,.myClass,button[type="submit"]) kullanarak öğeleri seçebilirsiniz. Bu, basit ve yaygın bir yöntemdir. - XPath: Karmaşık hiyerarşik yapılardaki öğeleri hedeflemek için XPath kullanabilirsiniz. XPath, CSS seçicilerine göre daha güçlü ancak daha karmaşık olabilir. Örneğin, belirli bir tablodaki 3. satırın ikinci sütunundaki hücreyi seçmek için XPath kullanabilirsiniz.
//table/tbody/tr[3]/td[2]gibi. - Text: Öğenin metin içeriği ile seçimi gerçekleştirebilirsiniz. Örneğin, “Gönder” metnini içeren bir butonu
button:has-text("Gönder")ile seçebilirsiniz. Bu, dinamik ID’lere sahip öğeler için idealdir. Bu seçici, metni içeren bütün öğeleri seçtiğinden dikkatli kullanılmalıdır. - Role: Erişilebilirlik rollerini kullanarak öğeleri seçebilirsiniz. Örneğin, bir ARIA role’ü olan bir öğeyi
role="button"ile seçebilirsiniz. Bu özellikle erişilebilirlik testleri için çok kullanışlıdır. - Özel Seçiciler: Playwright, kendi özel seçicilerinizi oluşturmanıza da izin verir. Bu, karmaşık senaryolar için çok güçlü bir özelliktir. Özellikle, her zaman aynı şekilde tanımlanamayan, rastgele ID’ler kullanan bir web sayfasında bu seçici türüne ihtiyaç duyabilirsiniz.
Örnek Kodlar
İşte farklı locator türlerini kullanan bazı örnek kodlar:
// CSS seçici ile bir butonu tıklama
await page.click('button#submitButton');
// XPath ile bir öğeyi bulma
const element = await page.$x('//div[@class="container"]/p');
// Text ile bir öğeyi seçme
await page.click(':text("Kaydet")');
// Role ile bir öğeyi bulma
const element2 = await page.locator('role=button');
Karmaşık Senaryolar İçin İpuçları
Karmaşık UI öğelerini yönetmek için bazı ipuçları:
- Bekleme Mekanizmaları: Sayfanın tam olarak yüklenmesini ve öğelerin görünür olmasını beklemek için
page.waitForSelector()veya benzeri fonksiyonları kullanın. - Locator Kombinasyonları: Birden fazla locator türünü birleştirerek seçicilerinizi daha spesifik hale getirin. Örneğin,
button[type="submit"]:has-text("Gönder")gibi. - Dinamik Seçiciler: Dinamik değerler içeren öğeleri seçmek için değişkenler kullanın.
- Debugging: Locator’larınızın doğru çalışıp çalışmadığını kontrol etmek için Playwright’in debugging araçlarını kullanın. Sayfa yapısının görsel incelemesi hataları bulmanıza yardımcı olacaktır.
Playwright’in güçlü locator mekanizmasını öğrenmek ve kullanmak, web uygulaması testlerinizin güvenilirliğini ve sürdürülebilirliğini önemli ölçüde artıracaktır. Daha fazla bilgi için fatihsoysal.com adresindeki diğer yazılarımı inceleyebilirsiniz.
#Etiketler: Playwright, Locator, UI, Öğeler, Karmaşık, Yönetim, Kolay, CSS, XPath, Text, Role, Özel Seçiciler, Otomasyon, Test, Web Uygulaması, Debugging