Etkili XPATH Kullanımı

Herkese Merhaba 🙋‍♀️ Bu yazımda örneklerle etkili xpath kullanımından bahsedeceğim.

Öncelikle xpath nedir, nerelerde kullanılır? Bunlardan bahsedelim. Sonrasında örneklerle birlikte kullanım yapılarından bahsedelim.

Ben hazırım hadi başlayalım.

Test otomasyon senayolarımızı yazarken bir web sayfasının öğelerini bulurken genellikle (Id,name,classname,linktext gibi) elementlerin ayırt edici özelliklerini kullanırız. Bazen de bir elementin pathini verirken xpath yazımını tercih ederiz. Xpathler benzersiz, tanımlayıcı, esnek ve kısa olmasından dolayı otomasyonda tercih ettiğimiz yapılardır. XPath veya CSS’de deneyim kazanmak, etkili dinamik web öğelerini yazarken sayfadaki kodsal değişikliklerde kırılganlığı en aza indirmek için çok önemlidir. Genellikle otomasyona başlarken xpath yazımında birçok kişi zorlanır. Bundan dolayı biraz örneklerle konuyu paylaşmak istedim.

Şimdi bir Xpath’in syntax’ine yani yazılış biçimi ve yapısına bakalım.

Xpath syntax: //tagname[@attribute=’Value‘] şeklindedir.

Örneğin başlangıç için ilk örneğimizde Trendyol’un login sayfasını ele alalım.

Burada e-posta alanı için syntaximizdeki gibi xpath yazalım. Buradaki Dom elementine yakından bakalım.

<input class=”q-input valid” type=”text” id=”login-email” >

Buradaki tagname=input , attribute=class,type,id value=q-input valid, text, login-email şeklindedir.

Email alanın xpath yazılım şekli de

//input[@id=’login-email’]

gibi olacaktır. Kontrol ettiğimizde aşağıdaki gibi bu söz diziminden bir tanesinin var oldugunu görmeliyiz.

Kısaca bir giriş yaptıktan sonra xpath tiplerini gruplandıralım.

Xpathler gruplandırılırken genellikle ikiye ayrılır. Yazım ve tavsiye bakımında relative tercih edilir. Çünkü absolute xpathler “/” çizgi ile kök öğeden başlar ve sayfadaki ufak değişikliklerden hemen etkilenir. Bu da verdiğiniz xpathte sürekli güncelleme yapmanıza ve efor kaybınıza neden olur.

Absolute Xpath’e Örnek;

/html/body/div[2]/div/div[1]/form/div[2]/input

Relative xpath ise yukarıdaki trendyol örneğinde verdiğimiz gibi daha az kırılgan ve okunaklıdır. Genellikle bu söz dizimi tercih edilir.”//” ile başlar. Absolute xpathden daha kısadır. Biz de yazımızın geri kalanında bu stille devam edeceğiz.

Bu tanımlamalardan sonra örneklerimize devam edelim.

Elementi Value Üzerinden Bulma

Syntax -> //*[@attributeName=’value’] 👈

Yukardaki password için yer alan kod bloğunun aşaağıdaki gibi dört şekilde xpathini yazabiliriz.

//*[@id=”login-password-input”]
//*[@data-testid=”password-input”]
//*[@name=”login-password”]
//*[@type=”password”]

Elementi Tag-name ve Attribute Üzerinden Bulma

//tagName[@attributeName=’value’] 👈

Yukardaki password için yer alan kod bloğunun aşağıdaki gibi tag-name ve attribute üzerinden dört şekilde xpathini yazabiliriz.

.//input[@id=’login-password-input’]
.//input[@type=’password’]
.//input[@name=’login-password’]
.//input[@data-testid=’password-input’]

Text üzerinden Bulma

Şimdi de giriş yap butonun textli şekilde xpathini bulalım.

Normalde üye ol butonu //*[text()=’Üye Ol’] şekilde yazılarak bulunabilir. Fakat trendyolun bu texte ait üç tane alanı oldugundan biz de üye olma adımını bir üst elementin yani butonun özelliğini alarak altına inerek zincirleme üye ol alanını almış oluyoruz.

//*[@type=”submit”]//*[text()=’Üye Ol’] veya
//*[@type=”submit”]//span[text()=’Üye Ol’]

Elementi Contains Ile Bulma

//tagName[contains(text(),’substring’)]
//tag[contains(@attribute, ‘value‘)]
//*[contains(text(),’substring’)]
//tagName[contains(.,’substring’)]

Burada üç farklı contains yöntemiyle Saat ve aksesuar Tabının elementini bulalım.

.//a[contains(text(),’SAAT’)] — Texti saat olanları bulur
.//a[contains(@href,'saat--akse')] — a hrefi saat ve akse içerenleri bulur
//a[contains(.,’SAAT’)] — A elementinin içerisindeki saat olanları bulur

Starts-With Ile Bulma

//tagName[starts-with(text(),’Textin başlangıc ifadesi’)]
//a[starts-with(text(),’SAAT’)]
//a[starts-with(text(),’SA’)]
//a[starts-with(@href, ‘/butik/liste/saat’)]

Yukardaki örnekler gibi elementlerin iç metnindeki textleri Xpath ile yazarken bazen de Input değerlerindeki verilen öznitelik değerlerini de kullanabiliriz.

Örneğin Trendyol sayfasından ürün arama alanını placeholder üzerinden bulalım.

.//input[@placeholder=’Aradığınız ürün, kategori veya markayı yazınız’]

Burada görüldüğü gibi verilen tekil placeholder alanındaki texti yazarak search alanını tanımlayıp istediğimiz değeri aratabiliriz.

And Operatoru

And operatoru ile de iki veya daha fazla attribute’u bağlayabiliriz. Yine yukardaki kod blogunu esas alarak and operatoru ile xpathinimizi yazalım.

.//input[@type=’text’ and @class=’search-box’] veya
.//input[@type=’text’][@class=’search-box’] şeklinde de yazılabilir. Burada and operatorunun büyük küçük harf duyarlılıgı oldugundan küçük harflerle yazmak gereklidir.

Following Sibling

Following-sibling’inde ise aynı hiyerşide olan elementlerin bir sonrakini bulmak için kullanırız.

Örneğin ; Yukardaki kod blogunu esas alarak ürün arama alanının yanındaki search ikonu bulalım.

//*[@class=’search-box’]/following-sibling::i veya
//*[@class=’search-box’]/following-sibling::* şeklinde yazılabilir. Böylece input classını belirterek aynı hiyerarşide olan i elementini yani search ikonu bulmuş oluyoruz.

Following de ise verdiğimiz değerin altındaki sayfada yer alan tüm i elementlerini buluruz. Örneğin

//*[@class=’search-box’]/following::i Fakat bundan oldukça fazla sayıda oldugu için biz ilk elemanı alalım.
//*[@class=’search-box’]/following::i[1] 👈

Elementi Child-Parent Üzerinden Bulma

Şimdi son olarak child ve parent durumuna bakalım. Child yazımı bir elemente bağlı olan altındaki çocuklarını bulurken parent ise elementin bağlı oldugu ebeveynine ulaşır.Bu yazım stiline de Trendyol’un kaydolma formu alanındaki elementlerden örnek verelim.

Giriş yap buttonu üzerindeki form ve altındaki span alanını bulalım.

//button[@type='submit']/parent::form 👈 Submit butonunun parentı olan form elementini bulur veya //button[@type='submit']/.. 
şekinde de buttonu parentı olan forma erişebilriz.
//button[@type='submit']/child::span 👈 Submit butonunun childı olan span elementini bulur 
veya child veya parent alanından sonra * yazarak da elemente erişebiliriz. 
//button[@type='submit']/child::*

Bir yazımınızın daha sonuna geliyoruz. Daha detaylı yazım stilleri için benim de çok kullandığım https://devhints.io/xpath sayfasını örnek alabilirsiniz.

Bu yazımızda otomasyon senaryolarımızı yazarken sıklıkla kullandığımız xpath yazımından bahsettim. Sonraki yazılarımda görüşmek dileğiyle 🙋‍♀️ 👻