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.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.1)Html Etiketi: Bulmak istediğimiz etiketi sağlamak için kullanılır, örnek giriş etiketi.

1.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.1.3) ID: Bulmak istediğimiz elementin kimlik değerini temsil eder.

Tag ve ID Kullanımı için Linkedin İş Arama Alanı Örneği

‘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”))

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

Tag ve Class Kullanımı için Linkedin İş Arama Örneği

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

driver.findElement(By.cssSelector(“input . jobs-search-box__text-input”))

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

Tag ve Attribute Kullanımı için Pegasus ‘Ucuz Uçuş Ara’ Butonu

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

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

Tag, Class ve Attribute Kullanımı için Facebook Şifre Alanı

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

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

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

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

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

1.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)”);

2)Xpath Kullanımları

Xpath, XML ifadelerini kullanarak web sayfasındaki öğeleri bulmaya yardımcı olur.

Syntax: Xpath= //tagname[@attribute=’value’]

tagname= hedeflediğiniz elementin etiketi, örneğin bir giriş(input) etiketini veya bağlantı(anchor) etiketini, vb. belirtir.

attribute= ‘@’ ön eki ve karşılık gelen değerleri ile tanımlanır. Name, ID, Class vb. olabılır.

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

Standard Xpath

Contains

AND & OR

Starts-with

Text

2.1)Standard Xpath

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

Bir element şöyle tanımlanmış olsun;

<input type=”email” name=”email” value=”” placeholder=”Email” required=”required” autofocus=”autofocus” class=”form-control mt-3 form-control-lg”>

İlgili xpath’iyle bulmak için;

driver.findElement(By.xpath(“//input[@name= ’email’]”))

Bu örnekte attribute olarak ‘name’ kullanılmıştır.

2.2)Contains

CSS Selector’deki Contains ile benzer çalışır. Herhangi bir element değeri dinamik ve kısmen değiştiğinde kullanılabilir.

Syntax: Xpath= //tagname[contains(@attribute, ‘partial value of attribute’)]

Element şu şekilde verilmiş olsun;

<input type=”text” placeholder=”Full Name*” name=”name” value=”” class=”form-control sign-up-input-2 “>

Contains kullanarak xpath’ini yazalım;

driver.findElement(By.xpath(“//input[contains(@class, ‘form-control’)]”))

2.3) AND ve OR Kullanımı ile Xpath

Bu yöntem, bir elementi iki koşul kümesi aracılığıyla bulmak istediğimizde kullanılır. “AND” durumunda her iki koşul da doğru olmalı ve “OR” için bu ikisinden biri doğru olmalıdır.

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

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

Yine aynı örneği kullanalım;

<input type=”email” name=”email” value=”” placeholder=”Email” required=”required” autofocus=”autofocus” class=”form-control mt-3 form-control-lg”>

Elementi ilgili xpath kullanımlarıyla bulmak için;

driver.findElement(By.xpath(“//input[@type=’email’ AND @name=’email’]))

driver.findElement(By.xpath(“//input[@type=’email’ OR @name=’email’]))

2.4) Starts-With

Kullanımı yine CSS Selector’deki ile benzer şekildedir.

Syntax: Xpath=//tagname[starts-with(@attribute,’starting name of the attribute value’)]

Elementimiz;

<input type=”password” placeholder=”Desired Password*” name=”password” class=”form-control sign-up-input-2 ” aria-autocomplete=”list”>

İlgili xpath kullanımıyla elementi bulmak için;

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

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

Örnek elementimiz;

<p class=”signup-title”>SIGN UP</p>

İlgili xpath kullanımıyla elementimizi bulmak için;

driver.findElement(By.xpath(“//p[@text()=’ SIGN UP’]”))

CSS Selector ve Xpath’i devTools kullanmadan kendimiz yazabilmemiz için yöntemleri anlattım. Umarım faydalı olmuştur 🙂