Bu yazımda temel xpathlerin kullanım alanları ve relative xpath ile web veya mobil tabanlı test otomasyonlarında kendi xpathinizi üreterek browser yada mobil kaynaklı olası xpath değişikliklerinden minimum oranda etkilenmenizi sağlayacak relative xpath türünü ele alacağız. Keyifli okumalar dilerim. 😊
XPATH NEDİR VE NASIL YAZILIR?
XPath, XML belgelerinde gezinmek ve belirtilen veri düğümlerini seçmek için geliştirilen bir sorgu dilidir. XPath’in kullandığı ifadeleri kullanarak web sayfaları arasında tutarlı bir yapı olduğu sürece bir web sitesinden ihtiyacınız olan herhangi bir veriyi etkili bir şekilde çekebilirsiniz. Bu durum web sitelerindeki kaynak kodda yer alan ve herkese açık verileri çekmek için Xpath’i dili kullanabileceğiniz anlamına gelmektedir. HTML yapısını kullanarak bir web sayfasındaki herhangi bir öğenin konumunu bulmak amacıyla kullanılır. Selenium kullanılan otomasyonlarda elementlerin id, sınıf, isim gibi genel konum belirleyiciler ile bulunamadığı durumlarda xpath web sayfalarındaki elementleri bulmak için kullanılır.
Xpath’in Temel Formatı
//: Kullanılan node’u seçmek için
Tagname: Belirli bir node’un etiket ismi.
@ : nitelik seçimi. (class, id gibi )
Attribute: Node’un özelliğinin ismi.
Value : Özelliğin değeri.
Xpath konumlandırıcıları
ID: Ögenin ID’sine göre bulmak için kullanılır.
Classname: Öğeyi sınıf ismine göre bulmak için kullanılır.
Name: Öğeyi ögenin adına göre bulmak için kullanılır.
Link text: Öğeyi öğenin bağlantısının metnine göre bulmak için kullanılır.
XPath: Dinamik öğeyi bulmak için kullanılır.
CSS path : CSS yolu adı, sınıfı veya kimliği olmayan öğeleri de bulabilmek için kullanılır.
Xpath, Absolute ve Relative olarak 2 türe ayrılır.
Absolute Xpath, bir öğeyi doğrudan ve kolay bir şekilde bulabileceğiniz yoldur. Devtools’dan almak istediğiniz verinin copy full xpath ile yolunu alabilirsiniz. Absolute hem okunaklılığı zor hem de kodsal değişikliklerden direkt etkilendiği için kodsal kırılganlığı fazladır. Bu yüzden test otomasyon yazımlarında çok fazla tercih edilmez.
Relative Xpath ise DOM içerisinde almak istediğiniz veriyi tümüyle aramanızı sağlar. Absolute xpath haricinde bu yol için Devtools’tan copy xpath üzerinden erişim sağlayabilirsiniz. Relative xpath kısa olduğu için okunaklıdır ve seçilen öğeye göre yazılabildiği için kodsal kırılganlığı düşüktür. Bakım maliyeti az olduğu için test otomasyon yazımlarında sıklıkla kullanılır.
Ayrıca Relative xpath, HTML DOM yapısının ortasından başlar. Çift eğik çizgi (//) ile başlar, yani öğeyi web sayfasının herhangi bir yerinde arayabilir ve (//) ifadesinden sonra * ile tüm nodelarda arama yapılabilirsiniz.
Kuveyt Türk İnternet Şubesinde Müşteri No alanının absolute ve relative xpath örnekleri aşağıdaki gibidir.
Müşteri No Absolute Xpath: /html/body/div[2]/div[3]/div[2]/div/div[1]/div[2]/div[2]/div[2]/div[2]/div[1]/form/div[1]/div/div[2]/div/table/tbody/tr[2]/td[2]/div/input
Müşteri No Relative XPath: //*[@id=”IntUserName”]
Yukardaki örneklerden de anlaşıldığı gibi Relative Xpath daha okunaklı ve bakım maliyeti azdır.
Şimdi Relative Xpath örneklerimizi çeşitlendirelim ve xpath eksenleri ile kendi pathlerimizi oluşturalım.
Contains Kullanımı
Contains özelliği, aşağıdaki örnekte gösterildiği gibi, kısmi metin içeren öğeyi bulma yeteneğine sahiptir.
// Tagname [contains(@Attribute,’Bulunmak istenen metin içeriği’)]
Kuveyt Türk İnternet Şubesi Kurumsal Giriş sayfasında Müşteri No ve Kullanıcı Adı xpathlerinde yer alan name attributelerinin içerisinde Name ifadesinin geçtiği alanları kontrol ettirmek için aşağıdaki şekilde relative xpath yazımından faydalanabiliriz.
//*[contains(@name,’Name’)]
OR & AND kullanımı:
OR ifadesinde, 1. Koşulun veya 2. koşulun doğru olması durumu için 2 koşul kullanılır. Herhangi bir koşulun doğru veya her iki kodun doğru olması durumunda da geçerlidir. Öğeyi bulmak için herhangi bir koşulun doğru olması gerektiği anlamına gelir.
XPath ifadesinde, tek veya her iki koşulu da geçerli olan öğeleri tanımlar.
Yine aynı örnek üzerinden ele alacak olursak;
Aşağıdaki resimde belirtilen “type” özelliğine sahip “Şifre” text giriş öğesi ve “name” özelliğine sahip “Kullanıcı adı” text giriş öğesi or koşulu kullanılarak relative xpath ile seçildi.
//*[ @name=”UserName” or @type=”password”]
AND ifadesinde, iki koşul kullanılır, öğeyi bulmak için her iki koşul da doğru olmalıdır. Herhangi bir koşul yanlışsa öğe bulunamaz.
Relative Xpath=//input[@type=’submit’ and @name=’btnLogin’]
Aşağıdaki ifadede hem ‘type’ hem de ‘name’ özniteliğine sahip ‘Kullanıcı adı’ öğesi and koşulu kullanılarak relative xpath ile seçildi.
//*[ @name=”UserName” and @type=”text”]
Starts-with Fonksiyonu:
Starts-with fonksiyonu yenilenen veya web sayfasındaki herhangi bir işlemde öznitelik değeri değişen ögeyi bulur. Bu ifadede, niteliği dinamik olarak değişen öğeyi bulmak için özelliğin başlangıç metniyle eşleşir. Tabi ki nitelik değeri statik olan ögeyi de bulabilirsiniz.
Örneğin: Belirli bir öğenin kimliğinin dinamik olarak şu şekilde değiştiğini varsayalım:
Id=”message12” Id=”message345” gibi ancak ilk metin (message) aynı. Bu durumda Starts-with ifadesini kullanırız.
//tagName[starts-with(text(),’Textin başlangıc ifadesi’)]
Aşağıdaki örnekte XPath, ID’si “message” ile başlayan öğeleri bulur.
Relative Xpath=//*[starts-with(@id,’message’)]
Text():
Text() ifadesinde, metin işleviyle, tam olarak eşleşen metin ögesini aşağıda gösterildiği gibi buluruz. Bizim örneğimizde, “UserID” metnine sahip ögeyi buluyoruz.
Relative Xpath=//*/text()[normalize-space(.)=’Müşteri No/TC Kimlik No’]
Bundan sonraki Relative Xpath eksen yöntemleri, karmaşık veya dinamik öğeleri bulmak için kullanılır.
Following:
Relative Xpath=//*[@type=’text’]//following::input
“Following” eksen Şifre, Kullanıcı adı ve Devam butonu ile eşleşen 3 input node vardır. Belirli bir öğeye odaklanmak istiyorsanız aşağıdaki Xpath yöntemini kullanabilirsiniz.
Relative Xpath= //*[@type=”text”]//following::input[1]
XPath’i [1], [2] ………… vb. koyarak gereksinime göre değiştirebilirsiniz. Input ‘1’ olarak yazdığınızda aşağıdaki ekran görüntüsü ‘Şifre’ input elemanı olan node’u bulur.
Child:
Relative Xpath=//*[@id=’allMenuRootNodes’]//ul/child::li
“Child” ekseni kullanılarak eslesen 17 “li” node var. Belirli bir ögeye odaklanmak istiyorsanız, asagıdaki xpath’i kullanabilirsiniz:
Relative Xpath= //*[@id=’allMenuRootNodes’]//ul/child::li[1]
Daha detaylı yazım stilleri için https://devhints.io/xpath sayfasına bakabilirsiniz.
Bu yazımda otomasyon senaryolarımızı yazarken sıklıkla kullandığımız relative xpath yazımından bahsettim. Sonraki yazılarımda görüşmek dileğiyle. 😊
Kaynakça
- http://belgeler.org/recs/xpath/xpath.xml
- https://devhints.io/xpath
- https://www.guru99.com/
- http://demo.guru99.com/v1/index.php
- https://sevilayal.medium.com/etkili-xpath-kullan%C4%B1m%C4%B1-6c5b58d3c055