Kaan Gedikli

Selenium kullanmak için web elementlerine ulaşmak önemli. Aslında istediğimiz elementin üstüne sağ tık yapıp inspect ile bulmak kolay bir yöntem ama ileri seviye kullanımda işe yaramadığı durumlar oluyor. Bunun için web elementlerine ulaşma yollarına da aşina olmak gerekebiliyor. ID ve Class Name bulmak kolay, inspect yapıp bu bilgilere kolayca ulaşabiliyoruz. Zaten ID, Class Name veya direkt Name gibi özellikler varsa CSS Selectors’e veya XPATH’e pek gerek kalmıyor ama bunların bulunmadığı durumlarda da ne yapacağımızı bilmek önemli. CSS Selectors ve XPATH ise biraz daha karmaşık, biraz onlara göz atacağız.

CSS Selectors

Bildiğimiz üzere web sayfaları bir HTML iskeletinden oluşuyor, bu element isimleri üzerinden işlem yapmak için de CSS Selectors veya Türkçesi ile CSS Seçicilerine ihtiyacımız var. CSS yazarken bir HTML öğesine nasıl ulaşıyorsak yöntem ona çok benzer ilerliyor. Örneğin, Geliştirici Ayarlarını açtık ve ctrl+f tuşuna basıp arama konsoluna ulaştık. Burada id’si baslik olan div’e ulaşmak için CSS’ten de bildiğimiz gibi #baslik olarak kullanabiliyoruz. Class’ı baslik olsaydı .baslik olarak ulaşabilecektik. Aynı arama ekranında alt öğeleri aramak istersek “>” işaretini kullanabiliyoruz. Örnek: div.baslik>h2 => bu kullanım baslik class name’ine sahip bir div’in altındaki h2 elementine ulaşmamızı sağlıyor. :nth-child() kullanımı ise örneğin div’in içindeki 3 tane span etiketinden hangisine ulaşmak istersek kullanabileceğimiz yöntem oluyor. Attiribute olarak ulaşmak istersek kullanacağımız yöntem şöyle; button[type=’button’] type’ı button olan web elementine ulaşmak için kullanabiliriz.

XPATH Kullanımı

XPATH aslında HTML’in içinde direkt adres tarifi diyebileceğimiz bir yöntem. Uzun uzun yazmak gerekirse HTML yapısındaki tüm elementleri sıralayıp yolu bulabiliyoruz ama bu önerilen bir yöntem değil. Otomatize ettiğimiz testlerde HTML’deki bir değişiklik bütün testin tekrar yazılması anlamına gelebiliyor. Bu sebeple öncelikli kullanıma sahip bir yöntem değil. Aşağıda kısa yollardan bazılarını eklemeye çalıştım, pratik yaptıkça akılda daha fazla kalabilir.

//sayfanın herhangi bir yerindeki path’i bulmak için kullanırız.
//button[@id=’baslik’] > id’si baslik olan button’ı bul.
//button[@class=’baslik’] > class’ı baslik olan button’ı bul.
//button[@name=’baslik’] > name’i baslik olan button’ı bul.
//div[@id=’baslik’]/h2 > id’si baslik olan div’in altındaki h2’yi bul.
//div[@id=’baslik’]//div[@class=’ornek’] > id’si baslik olan div’in içinde herhangi bir yerde class’i ornek olan div’i bul.
//div[@id=’baslik’ and @class=’ornek’] >> id’si baslik ve class’ı ornek olan div’i bul. “and” yerine “or” da kullanılabilir.
——
Metin ile bulmak:
//button[text()=’ClickMe’] > içinde ClickMe yazan butonu bul.
Contains Fonksiyonu:
//button[contains(text(),’Click’)] > herhangi bir metinde içerebilecek öğeleri bul.
Starts-with Fonksiyonu:
//button[starts-with(@id,’btn’)] > id’si btn ile başlayan butonları bul.
(//button[starts-with(@id,’btn’)])[2] >id’si btn ile başlayan sonuçların arasından ikincisini bul.
(//button[starts-with(@id,’btn’)])[following::button[@id=’ornek’]] > sonuçların arasında id’si ornek olan butondan önceki butonları bul.
(//button[starts-with(@id,’btn’)])[preceding::button[@id=’ornek’]] > sonuçların arasında id’si ornek olan butondan sonraki butonları bul.
//button[text()=’ClickMe’]/preceding-sibling::input > ClickMe yazan butondan önceki input’u bul.

Bunlar XPATH için kullanılabilecek bazı örneklerdi. Bizim el kitabımız olan MDN’de daha fazla fonksiyon da bulunmakta. İleri okuma yapmak için bu linki ziyaret edebilirsiniz.