SeleniumWeb Driver — Locators

Herkese merhaba,

Bu yazımda Selenium Web Driver kullanarak geliştirdiğimiz test otomasyonunda kullanılan yer buluculardan(locator) bahsetmek istiyorum.

Selenium Yer Bulucular, web sayfasındaki web öğelerini tanımlamak için kullanılır. Selenium’da; textBox, checkBox, LinkText, radioButton, comboBox ve diğer web öğeleri üzerinde eylemler gerçekleştirmek için yer buluculara ihtiyacımız vardır. Konum belirleyiciler bize nesneleri tanımlamada yardımcı olur.

Selenium Yer Bulucular(Locators) Nelerdir?

• ID
• Class Name
• CSS Selector
• Name
• Xpath
• Linktext
• Partial Linktext
• Tag Name
• DOM Locator

Web Sayfasındaki Öğeleri Nasıl Buluruz?

Yukarıdaki listelediğim yer bulucuları kullanmadan önce web sayfası üzerindeki elementlere nasıl ulaştığımıza bakalım.

1)Öncelikle otomasyon yazacağımız site içerisinde klavyeden F12’ye basarak geliştirici seçeneklerine ulaşıyoruz. Bu ekranı farklı bir pencerede ya da sayfamızın solunda, sağında, aşağısında ve ya farklı bir pencere duracak şekilde açabiliriz.(DockSide Görseli)

2)Burada ‘Elements’ tabını açıyoruz. Web sayfamızdaki bütün elementleri burada görebiliriz.

3)İlk 2 maddeyi bu ekranı görebilmemiz için yazdım ancak direk olarak ilgili elemente ulaşmak için elementin üzerine gelip(Örneğin bir ‘Üye Girişi’ butonu olabilir) sağa tıklayıp ‘İncele’ seçeneğine tıklayarak bu elemente ait yer buluculara ulaşabiliriz.(Inspect Görseli)

4)Elementin bilgilerinden bize uygun olan locator için gerekli bilgileri alıp otomasyonumuzda bu elemente ulaşmak için kullanabiliriz.(Element Bilgileri Görseli)

DockSide

Inspect

Element Bilgileri

Yer Bulucuların Özellikleri ve Kullanımları

Selenium Web Driver’da ilgili elementleri bulabilmek için ‘findElement/findElements’ syntaxını kullanırız.

1)ID

ID, web sayfasında her öğeye özgü olduğu düşünülerek kullanılan öğeleri bulmanın en yaygın yoludur. Genelde id’ler öğelere özgü olmalıdır ve bu nedenle öğeyi bulmak için en hızlı ve en güvenli yöntem olarak kabul edilir. Ancak ne yazık ki, tarayıcılar bu kuralı atlamaya izin verdiği için geliştiriciler bu kurala uymayabilir. Özellikle, bir tablo veya liste söz konusu olduğunda, id’ler verilere bağlı olarak artımlı veya dinamik olarak yerleştirilebilir ve bu da bu tür öğelerin başka yollarla bulunmasını gerektirebilir. Id’nin değişken olup olmadığı sayfa yenilenerek tekrar ilgili elemente ulaşıp kontrol ederek anlaşılabilir.

→ Syntax: driver.findElement(By.id(“username”))

2)ClassName

ClassName locator, elementin class özelliği kullanılarak bulunmasını sağlar. Element bilgileri içerisinden ‘class = ……’ etiketindeki bilgi alınır.

→ Syntax: driver.findElement(By.className(“ant-input”))

3)CSS Selector

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

3.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ı gerekir. Diğer özellikler için # işaretini kullanmamız gerekmez.

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

→ Syntax: driver.findElement(By.cssSelector(“input #username”))

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

→Syntax: driver.findElement(By.cssSelector(“button . ant-btn button button-primary”))

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

→Syntax: driver.findElement(By.cssSelector(“button [type = ‘submit’]”))

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

→Syntax: driver. findElement(By.cssSelector(“input. ant-input input [name = ‘name’]”))

3.5) Contains (*)

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

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

4)Name

Selenium WebDriver’daki Name locator, ID gibi kullanılabilir. Birden fazla elemente sahip bir sayfada benzersiz olabilir veya olmayabilir. Aynı Name’e sahip elementler olması durumunda, konumlandırıcı sayfada bu ada sahip ilk elementi seçer. Tanımlanan Name değeri ile böyle bir değerin eşleşmemesi durumunda NoSuchElementException oluşacaktır.

→ Syntax: driver.findElement(By.name(“username”))

5)Xpath

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

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

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

5.1)Standard Xpath

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

→Syntax: driver.findElement(By.xpath(“//input[@data-testid= ’input-name-testid-register-widget’]”))

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

→ Syntax: driver.findElement(By.xpath(“//input[contains(@class, ‘button-primary’)]”))

6)LinkText

Elementler, bağlantı metni aracılığıyla yerleştirilebilir. Aynı metnin birden çok bağlantısının bulunduğu bir senaryoda, ilk bağlantı seçilir.

→ Syntax: driver.findElement(By.linkText(“Üye Girişi”))

7)Partial LinkText

Partial LinkText yoluyla konum belirleme normal LinkText konumlandırıcısına benzer şekilde çalışır. Selenium WebDriver’da Partial LinkText kullanılma nedeni, uzun bir bağlantı metninizin olması ve üzerinde daha fazla işlem yapmak için yalnızca kısmi metin kullanmak istediğinizden kaynaklanmaktadır. Bazen bunu kullanma amacı, ortak kısmi metne sahip bir sayfada birden çok bağlantıyı bulmak olabilir.

→Syntax: driver.findElement(By.PartialLinkText(“izinlerini“))

8)Tag Name

Adından da anlaşılacağı gibi, Selenium WebDriver’daki bu bulucu, div etiketi, etiket vb. gibi etiket adlarına sahip öğeleri tanımlamak için kullanılır.

Syntax: driver.findElements(By.tagName());

Örnekler;

driver.findElements(By.tagName(a));

driver.findElements(By.tagName(div));

driver.findElements(By.tagName(tr));

driver.findElements(By.tagName(td));

9)DOM Locator

Elementi ID ve Name yoluyla DOM’un “getElementById” ve “getElementsByName” gibi yöntemlerini kullanarak tanımlayabiliriz. GetElementById yöntemi bir kerede yalnızca bir öğeyi bulur, diğer yöntem ise bu adla bulunan bir dizi elementi sağlamak için kullanılır. Bir dizi elementin olması durumunda belirtilen spesifik bir öğeye erişmek için index kullanabiliriz.

Syntax:

document.getElementById (“id”)

document.getElementsByNames (“name”)[index]

Özetle; Selenium Yer Bulucular ile web sayfasındaki web öğelerini tanımlar ve tanımladığımız web öğleri üzerinde çeşitli işlemler gerçekleştiririz. Bu yazımda sizlere Selenium Web Driver’da Locator’ların nasıl bulunduğunu ve bunların farklı kullanım yöntemlerini anlatmaya çalıştım. Umarım faydalı olmuştur.

Sonraki yazılarımızda görüşmek üzere, keyifli okumalar 👋