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.

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

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

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

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

Elementi Tag-name ve Attribute Üzerinden Bulma

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

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.

Elementi Contains Ile Bulma

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

Starts-With Ile Bulma

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.

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.

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.

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

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.

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 🙋‍♀️ 👻

--

--

Test Automation Engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store