Xpath ve CSS Selector Kullanımları

Selenium locatorları seçerken, Dev Tools tarafından sağlanan XPath veya CSS Seçiciyi kullanmaktan kaçınmalıyız .En sağlıklı yöntem aşağıda anlatacağım yollarla CSS Selector’u veya Xpath’i kendiniz tanımlamanızdır.

1)Xpath Kullanımları

Bir önceki yazımda Xpath kullanımından kısaca bahsetmiştim.Şimdi daha detaylı olacak şekilde Xpath kullanımının inceleyelim.

Xpath Seçicileri çeşitli biçimlerde bulunabilir:

• Standard Xpath
• Contains
• AND & OR
• Starts-with
• Text

1.1)Standard Xpath

Xpath’in standart syntax’ı ile kullanımıdır.

driver.findElement(By.xpath(“//input[@id= ’login-username’]”))

1.2)Contains

Herhangi bir özelliğin değeri dinamik olarak değiştiğinde kullanılır.

Contains kullanarak xpath’ini yazarsak;

driver.findElement(By.xpath(“//input[contains(@name, ‘q’)]”))

1.3) Starts-With

Yenilenen veya web sayfasındaki diğer dinamik işlemlerle değiştirilen web öğesini bulmak için kullanılan bir işlevdir.Aramalarımızda uzun kodları daha kolay bulmamızı sağlar.

driver.findElement(By.xpath(“//input[starts-with(@class,’gLFyf’)]”))

1.4) AND ve OR Kullanımı ile Xpath

OR ifadesinde 1.koşulun ya da 2. Koşulun doğru olması yeterlidir. Her iki koşulun doğru olması durumunda da geçerlidir. AND ifadesinde iki koşul kullanılır, öğeyi bulmak için iki koşul da doğru olmalıdır. Herhangi bir koşul yanlışsa öne bulunamaz.

OR için syntax: Xpath=//input[@class=’value of id’ OR @name=’value of name’]

2.ifade yanlış olmasına rağmen doğru elementi bulabildi.

AND için syntax: Xpath=//input[@class=’value of id’ AND @name=’value of name’]

Her iki ifade doğru olmalıdır.

1.5) Text

Metin eşleşmesini kullanarak elementi bulmak için kullanılan bir yöntemdir. Bazen elementler id, class gibi özelliklere sahip değilken sadece text barındırabilir. Bu elementleri bulmamız için text yöntemiyle xpathini yazmak bize yardımcı olmuş olur.

Syntax: Xpath=//div[text()=’value of text’]

Xpath=//div[text()=’ve Siparişler’]

2)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

2.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)

Html Etiketi: Bulmak istediğimiz etiketi sağlamak için kullanılır, örnek giriş etiketi.

#: 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.

ID: Bulmak istediğimiz elementin kimlik değerini temsil eder.

driver.findElement(By.cssSelector(“a#login”))

2.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)

Bu alanı Tag ve Class ile bulmak için;

driver.findElement(By.cssSelector(“div.SearchBoxOld-buttonContainer”))

2.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]

2.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’]”))

2.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.

2.5.1) Starts With (^)

Syntax: css=(HTML tag)([attribute^=’start of the string’])

Element şu şekilde tanımlanmış olsun;

Bu elementin Css Selectorunu Starts With yöntemiyle yazalım;

driver.findElement(By.cssSelector(“input[name^=’em’]”))

2.5.2)Ends With ($)

Syntax: css=(HTML tag)([attribute$=’end of the string’])

Bu elementin Css Selectorunu Ends With yöntemiyle yazalım;

driver.findElement(By.cssSelector(“input[name$=’ail’]”))

2.5.3) Contains (*)

Syntax: css=(HTML tag)([attribute*=’partial string’])

Bu elementin Css Selectorunu Contains yöntemiyle yazalım;

driver.findElement(By.cssSelector(“input[class*=’control’]”))

2.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

Kategoriler Listesi

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 ve Xpath’i devTools kullanmadan kendimiz yazabilmemiz için tüm yöntemleri detaylıca anlattım. Teşekkürler🌸