Selenium locatorları seçerken, Dev Tools tarafından sağlanan XPath veya CSS Seçiciyi kullanmaktan kaçınmalıyız. Xpath veya css selector’u geliştirici araçlarından kopyalamak, yapılması en kolay yoldur, ancak komut dosyalarınızın kararlılığı ve okunabilirliğinde sorunlara neden olabilmektedir. Bu değerleri sağlayan tarayıcı anlamlı XPath veya CSS konum belirleyicilerini aramaz ve karmaşık olanları verir bu da sık sık kırılmalara neden olabilir. Bu da otomasyonunuzu çalıştırdığınızda ilgili elementin bulunamamasına neden olabilir. Bu sebeple en sağlıklı yöntem aşağıda anlatacağım yollarla CSS Selector’u veya Xpath’i kendiniz tanımlamanızdır.
1)CSS Selector Kullanımları
Bir elementte ID yada name ile ilgili bir bilgi yoksa veya bunlar değişken ise genellikle CSS Selector veya xpath kullanılır. xpath ile karşılaştırıldığında CSS Selector daha hızlı çalışmaktadır. Bu nedenle bir engel yoksa öncelikle CSS Selector tercih edilir.
CSS Seçicileri çeşitli biçimlerde bulunabilir:
- Tag ve ID
- Tag ve Class
- Tag ve Attribute
- Tag, Class ve Attribute
- Matches (Starts with, Ends with, Contains)
- Child elementler
1)Tag ve ID
Tag ve ID kullanarak öğeyi bulmak için üç bileşen kullanırız.
Syntax: css = (Html etiketi) (#) (ID’nin değeri)
1.1)Html Etiketi: Bulmak istediğimiz etiketi sağlamak için kullanılır, örnek giriş etiketi.
1.2) #: Bu işaret ID değerini temsil etmek için kullanılır. Bir öğeyi CSS seçici aracılığıyla kimlik yoluyla bulmak istediğinizde, aynı şekilde bir # işaretinin olması gerektiğini unutmayın. Diğer özellikler için # işaretini kullanmamız gerekmez.
1.3) ID: Bulmak istediğimiz elementin kimlik değerini temsil eder.
‘Tag ve ID Kullanımı için Linkedin İş Arama Alanı Örneği’ görselindeki alanı Css Selector Tag ve ID ile bulmak için;
driver.findElement(By.cssSelector(“input #jobs-search-box-keyword-id-ember458”))
2) Tag ve Class
Bu locator da ID gibi çalışır tek farkı syntaxında # işareti yerine nokta kullanılır.
Syntax: css = (Html etiketi) (.) (Class’ın değeri)
Bunun için de Linkedin örneğini kullanalım.
Bu alanı Tag ve Class ile bulmak için;
driver.findElement(By.cssSelector(“input . jobs-search-box__text-input”))
3)Tag ve Attribute
Bu yöntemde de elementin tag name’i ve elemente özel olan bir özelliği(type, name vb.) kullanılarak css selectoru yazılır. Birden fazla öğenin aynı etikete ve niteliğe sahip olması durumunda, ilk öğe seçilecektir.
Syntax: css= (HTML Tag)[Attribute=Value]
Görseldeki ‘Ucuz Uçuş Ara’ butonu için Tag ve Attribute kullanarak Css Selector’u yazalım;
driver.findElement(By.cssSelector(“button [type = ‘submit’]”))
4)Tag, Class ve Attribute
Bu locator; Tag, Class ve seçilen bir Attribute değerinin kombini olarak yazılır.
Syntax: css=(HTML Tag)(.)(Class)([attribute=’Value of attribute’])
Görseldeki Facebook Şifre alanı Css Selectorunu Tag, Class ve Attribute kullanarak yazalım.
driver. findElement(By.cssSelector(“input. inputtext login_form_input_box [name = ‘pass’]”))
5) Elementleri Eşleşme ile bulma(Matches)
Elementleri bulmak için her zaman ilgili Attribute değerinin tamamını yazmaya gerek yoktur. Başını, sonunu yada içerdiği bir bölümü yazarak da css selectorunu oluşturmak mümkündür. Bunu bazı semboller kullanarak yapabiliriz.
5.1) Starts With (^)
Syntax: css=(HTML tag)([attribute^=’start of the string’])
Element şu şekilde tanımlanmış olsun;
<input type=”email” name=”email” value=”” placeholder=”Email” required=”required” autofocus=”autofocus” class=”form-control mt-3 form-control-lg”>
Bu elementin Css Selectorunu Starts With yöntemiyle yazalım;
driver.findElement(By.cssSelector(“input[name^=’em’]”))
5.2)Ends With ($)
Syntax: css=(HTML tag)([attribute$=’end of the string’])
Element şu şekilde tanımlanmış olsun;
<input type=”email” name=”email” value=”” placeholder=”Email” required=”required” autofocus=”autofocus” class=”form-control mt-3 form-control-lg”>
Bu elementin Css Selectorunu Ends With yöntemiyle yazalım;
driver.findElement(By.cssSelector(“input[name$=’ail’]”))
5.3) Contains (*)
Syntax: css=(HTML tag)([attribute*=’partial string’])
Element şu şekilde tanımlanmış olsun;
<input type=”email” name=”email” value=”” placeholder=”Email” required=”required” autofocus=”autofocus” class=”form-control mt-3 form-control-lg”>
Bu elementin Css Selectorunu Contains yöntemiyle yazalım;
driver.findElement(By.cssSelector(“input[class*=’control’]”))
6) Child Elementler
Child Elementler, başka bir elementin altında tanımlanan elementlerdir. Genellikle bir liste yada tablonun altındaki verileri ulaşmak istediğimizde kullanırız.
Syntax: Css= tagname . class name li : nth-of-child(child element indexi)
Kategoriler Listesi görselindeki gibi tanımlanmış bir listemiz olsun
Bu listedeki ‘Erkek’ kategorisine erişmek için yazağımız css selector;
driver.findElement(By.cssSelector(“ul. Giyim li:nth-of-child(2)”);
CSS Selector’i devTools kullanmadan kendimiz yazabilmemiz için yöntemleri anlattım. Umarım faydalı olmuştur