XPath (XML Yol Dili), HTML ve XML belgelerinin Belge Nesne Modeli (DOM)'unda gezinmek için kullanılan güçlü bir sorgu dilidir. Web geliştiricileri, test uzmanları ve otomasyon mühendisleri için XPath'te ustalaşmak, web sayfalarındaki öğeleri hassas bir şekilde bulmak ve onlarla etkileşim kurmak için gereklidir. İster Selenium, Playwright veya diğer test çerçeveleriyle otomatik testler geliştiriyor olun, ister web sitelerinden veri çıkarıyor olun, XPath en karmaşık DOM yapılarında bile gezinmek için gereken esnekliği ve hassasiyeti sağlar.
Bu kapsamlı kılavuz, temel söz diziminden gelişmiş tekniklere kadar XPath hakkında bilmeniz gereken her şeyi size öğretecek ve sağlam ve verimli XPath ifadeleri oluşturma konusunda yetkin olmanıza yardımcı olacaktır.
XPath'e daha derinlemesine dalmadan önce, bugün mevcut en iyi Postman alternatifi olan Apidog'u tanıyalım. Apidog, API dokümantasyonunu, tasarımını, hata ayıklamasını, test etmeyi ve taklit etmeyi tek bir birleşik platformda birleştirir.
Postman'den farklı olarak Apidog, daha sezgisel bir arayüz, daha iyi ekip işbirliği özellikleri ve API tasarımı ile test arasında sorunsuz bir entegrasyon sunar. Güçlü test yetenekleriyle Apidog, API'leri doğrulamayı kolaylaştırır.
API'ler ve web testi ile çalışıyorsanız, Apidog'un kapsamlı araç seti iş akışınızı önemli ölçüde kolaylaştırabilir ve üretkenliği artırabilir.
XPath Nedir?
XPath, XML belgelerindeki düğümleri seçmek için tasarlanmış bir sorgu dilidir. HTML, XML'in özel bir biçimi olarak kabul edilebildiğinden, XPath aynı zamanda HTML belgelerine de etkili bir şekilde uygulanabilir. İlk olarak Dünya Çapında Ağ Konsorsiyumu (W3C) tarafından XSLT 1.0 spesifikasyonunun bir parçası olarak tanıtılmış ve o zamandan beri web otomasyonu ve veri çıkarma için temel bir araç haline gelmiştir.
XPath, bir HTML belgesinin hiyerarşisinde, bir dosya sistemindeki klasörlerde nasıl gezindiğiniz gibi, öğelere giden yolları tanımlayarak gezinmenizi sağlayan bir gezinme dilidir. XPath'i özellikle güçlü yapan şey şudur:
- Öğe hiyerarşisinde birden fazla yönde gezinme
- Öğeleri özniteliklere, içeriğe veya konuma göre filtreleme
- Üst, alt ve kardeş öğelere kolaylıkla erişme
- Verileri işlemek ve değerleri karşılaştırmak için yerleşik işlevleri kullanma
Web Otomasyonunda XPath Konumlandırıcıları
Selenium WebDriver gibi web otomasyon çerçevelerinde, XPath konumlandırıcıları bir web sayfasındaki öğeleri tanımlamak için birincil yöntem olarak hizmet eder. CSS seçiciler, ID veya sınıf adları gibi diğer konumlandırıcılar, basitlikleri ve performansları nedeniyle genellikle tercih edilse de, XPath karmaşık senaryolarda eşsiz bir esneklik sunar.
Web otomasyonunda XPath kullanmanın bazı temel avantajları şunlardır:
- Esneklik: XPath, diğer konumlandırıcıların kolayca yapamayacağı metin içeriğine, üst-alt ilişkilerine ve kardeş ilişkilerine göre öğeleri bulabilir.
- Metin Tabanlı Seçim: XPath, belirli metinler içeren öğeleri bulmanıza olanak tanır ve bu da onu dinamik içerik için paha biçilmez hale getirir.
- Geçiş Yetenekleri: DOM ağacında yukarı (üst öğelere), aşağı (alt öğelere) veya yanlara (kardeş öğelere) doğru gezinebilirsiniz.
- Mantıksal İşlemler: XPath, karmaşık seçim koşullarını etkinleştiren ve, veya ve değil gibi mantıksal operatörleri destekler.
XPath Temelleri
XPath'i etkili bir şekilde kullanmak için, temel bileşenlerini ve yapısını anlamak önemlidir.
1. Söz Dizimi ve Yapı
XPath ifadeleri, belgenin düğüm hiyerarşisinde gezinmek için eğik çizgiler (/) ile ayrılmış bir dizi adım olarak yazılır. Her adım şunlardan oluşur:
- Bir düğüm seçimi (bir öğe adı veya joker karakter gibi)
- İsteğe bağlı yüklemler (köşeli parantez içinde)
- İsteğe bağlı eksenler (ilişki yönünü belirtme)
Temel söz dizimi şu deseni izler:
axisname::nodetest[predicate]
Burada:
axisnamekullanılacak ilişkiyi tanımlar (çocuk, ebeveyn, vb.)nodetesthangi düğümlerin seçileceğini tanımlarpredicateseçilen düğümleri koşullara göre filtreler
2. Temel Eksenler ve Düğüm Türleri
XPath, düğümler arasındaki ilişkileri tanımlamak için çeşitli eksenler sağlar:
- child: Geçerli düğümün tüm çocuklarını seçer
- parent: Geçerli düğümün üst öğesini seçer
- ancestor: Tüm ataları (ebeveyn, büyükanne ve büyükbaba, vb.) seçer
- descendant: Tüm torunları (çocuklar, torunlar, vb.) seçer
- sibling: Kardeşleri (aynı üst öğeye sahip düğümler) seçer
- self: Geçerli düğümü seçer
Seçilebilen düğüm türleri şunları içerir:
- element: HTML/XML öğeleri
- attribute: Öğe öznitelikleri
- text: Öğeler içindeki metin içeriği
- comment: Yorum düğümleri
- processing-instruction: İşleme talimatı düğümleri
3. Ortak İşlevler
XPath, yeteneklerini artıran çok sayıda işlev içerir:
- text(): Bir öğenin metin içeriğini alır
- contains(): Bir dizenin belirli bir alt dize içerip içermediğini kontrol eder
- starts-with(): Bir dizenin belirli bir alt dize ile başlayıp başlamadığını kontrol eder
- concat(): Birden fazla dizeyi birleştirir
- substring(): Bir dizenin bir bölümünü çıkarır
- count(): Bir düğüm kümesindeki düğüm sayısını sayar
- position(): Bir düğümün bir düğüm kümesindeki konumunu döndürür
- last(): Bir düğüm kümesindeki son düğümün konumunu döndürür
XPath Türleri
XPath ifadeleri oluşturmak için iki ana yaklaşım vardır: mutlak ve göreli.
Mutlak XPath İfadesi
Mutlak XPath, belgenin kökünden hedef öğeye kadar olan tam yolu sağlar. Tek bir eğik çizgi (/) ile başlar ve hiyerarşideki her öğeyi içerir.
Örnek:
/html/body/div[2]/form/input[3]
Artıları:
- Öğeye kesin, benzersiz bir yol sağlar
- Bir öğenin belirli bir örneğini hedeflemeniz gerektiğinde kullanışlıdır
Eksileri:
- Son derece kırılgandır ve sayfa yapısı değiştiğinde bozulmaya eğilimlidir
- Uzun ve okunması zor
- Herhangi bir üst öğe değişirse güncellenmesi gerekir
Göreceli XPath
Göreceli XPath, belgedeki herhangi bir noktadan başlar ve yolun herhangi bir yerden başlayabileceğini belirtmek için çift eğik çizgi (//) kullanır. Bu yaklaşım, belgenin yapısındaki değişikliklere karşı daha esnek ve dayanıklıdır.
Örnek:
//input[@id='email']
Artıları:
- Belge yapısındaki değişikliklere karşı daha sağlam
- Daha kısa ve daha okunabilir
- Öğenin benzersiz özniteliklerine veya özelliklerine odaklanır
Eksileri:
- Karmaşık belgelerde daha az spesifik olabilir
- Dikkatli bir şekilde oluşturulmazsa potansiyel olarak birden fazla öğeyi eşleştirebilir
XPath Söz Dizimi
Etkili XPath ifadeleri oluşturmak için temel söz dizimi öğelerini anlamak çok önemlidir:
Temel Söz Dizimi Öğeleri:
- / (Tek eğik çizgi): Mutlak bir yolu temsil eden kök düğümden seçer
- // (Çift eğik çizgi): İfadeyle eşleşen belgedeki herhangi bir düğümü seçer
- . (Nokta): Geçerli düğüme atıfta bulunur
- .. (Çift nokta): Geçerli düğümün üst öğesine atıfta bulunur
- @ (At işareti): Öznitelikleri seçer
- [] (Köşeli parantezler): Yüklemleri (koşulları) içerir
- \(Yıldız): Herhangi bir öğe düğümüyle eşleşen joker karakter
Yüklemler
Yüklemler, düğüm seçimini filtreleyen köşeli parantez içinde yer alan koşullardır:
//div[@class='container'] // Sınıfı 'container' olan div öğelerini seçer
//button[text()='Submit'] // Metni 'Submit' olan düğme öğelerini seçer
//li[position()=3] // Üçüncü li öğesini seçer
//input[@type='text' and @required] // Gerekli metin giriş öğelerini seçer
XPath Seçiciler
XPath seçiciler, belgedeki düğümleri seçme kriterlerini tanımlar. İşte bazı yaygın seçici desenleri:
Öğe Seçiciler:
//div // Tüm div öğelerini seçer
//div/p // div'in doğrudan çocukları olan tüm p öğelerini seçer
//div//p // div içinde herhangi bir yerde bulunan tüm p öğelerini seçer
Öznitelik Seçiciler:
//*[@id='username'] // id'si 'username' olan öğeyi seçer
//input[@name='password'] // adı 'password' olan girişi seçer
//a[@href] // href özniteliği olan tüm bağlantıları seçer
//img[@src='logo.png'] // belirli bir src'ye sahip görüntüyü seçer
Konum Seçiciler:
//tr[1] // İlk tr öğesini seçer
//tr[last()] // Son tr öğesini seçer
//tr[position()>1] // İlk hariç tüm tr öğelerini seçer
//ul/li[position() mod 2 = 0] // Çift konumlu li öğelerini seçer
Metin İçeriği Seçiciler:
//h1[text()='Welcome'] // Tam metni 'Welcome' olan h1'i seçer
//p[contains(text(),'important')] // 'important' kelimesini içeren p'yi seçer
//label[starts-with(text(),'User')] // 'User' ile başlayan etiketleri seçer
XPath İfadeleri
XPath ifadeleri, bulmanız gereken öğelere bağlı olarak basitten karmaşığa kadar değişebilir. İşte giderek karmaşıklaşan ifadelere bazı örnekler:
Basit İfadeler:
//h1 // Tüm h1 öğeleri
//div[@class='header'] // Sınıfı 'header' olan tüm div öğeleri
//input[@type='submit'] // Tüm gönder düğmeleri
Orta Düzey İfadeler:
//div[contains(@class,'product')]//span[@class='price'] // Ürün div'leri içindeki fiyat aralıkları
//table//tr[position() > 1] // Başlıklar hariç tüm tablo satırları
//form[.//input[@required]] // Gerekli girişleri içeren formlar
Gelişmiş İfadeler:
//div[not(@class='hidden') and contains(@id,'section')] // Belirli bir Kimlik desenine sahip görünür bölümler
//ul[count(./li) > 5] // 5'ten fazla öğeye sahip listeler
//a[contains(@href,'https') and not(contains(@class,'external'))] // Dahili HTTPS bağlantıları
XPath Eksenleri
Eksenler, geçerli düğümden gezinme yönünü tanımlar. Eksenleri anlamak, daha gelişmiş öğe seçimi sağlar:
Çocuk ve Torun Eksenleri:
child::div // ./div ile aynı
descendant::p // .//p ile aynı
Üst ve Ata Eksenleri:
parent::div // Geçerli düğümün üst div'i
ancestor::form // Geçerli düğümün herhangi bir form atası
ancestor-or-self::div // Herhangi bir div atası veya bir div ise geçerli düğüm
Kardeş Eksenleri:
following-sibling::li // Geçerli düğümü izleyen tüm li kardeşler
preceding-sibling::div // Geçerli düğümden önce gelen tüm div kardeşler
Diğer Faydalı Eksenler:
following::h2 // Belgede geçerli düğümden sonra görünen tüm h2 öğeleri
preceding::input // Geçerli düğümden önce görünen tüm giriş öğeleri
self::p // Bir paragrafsa geçerli düğümü seçer
XPath Operatörleri
XPath, karmaşık koşullar oluşturmak için çeşitli operatörleri destekler:
Karşılaştırma Operatörleri:
- = : Eşittir
- != : Eşit değildir
- < : Küçüktür
- > : Büyüktür
- <= : Küçük veya eşittir
- >= : Büyük veya eşittir
Mantıksal Operatörler:
- and : Mantıksal VE
- or : Mantıksal VEYA
- not() : Mantıksal DEĞİL
Aritmetik Operatörler:
- + : Toplama
- : Çıkarma
- \: Çarpma
- div : Bölme
- mod : Modül
Örnekler:
//input[@value > 100] // Değeri 100'den büyük olan girişler
//div[@class='item' and @id] // Sınıfı 'item' ve ayrıca bir Kimliğe sahip div'ler
//product[price > 50 and price < 100] // Fiyatı 50 ile 100 arasında olan ürünler
//li[position() mod 2 = 1] // Tek numaralı liste öğeleri
XPath İşlevleri
XPath, veri işleme için çok sayıda yerleşik işlev sağlar:
Dize İşlevleri:
//a[contains(text(), 'Sign up')] // "Kaydol" metnini içeren bağlantılar
//label[starts-with(@for, 'user')] // 'for' özniteliği 'user' ile başlayan etiketler
//p[string-length(text()) > 100] // 100 karakterden uzun metne sahip paragraflar
//div[normalize-space(text())='Hello World'] // Tam metne sahip div'ler (ekstra boşluklar yok sayılır)
Sayısal İşlevler:
//ul[count(li) > 5] // 5'ten fazla öğeye sahip listeler
//div[round(number(@data-value)) = 42] // 42'ye yuvarlanan data-value'ye sahip div'ler
//product[floor(price) = 99] // Fiyatı 99'a yuvarlanan ürünler
Düğüm Kümesi İşlevleri:
//tr[position() = last()] // Son tablo satırı
//div[count(child::*) = 0] // Boş div öğeleri (çocuk öğe yok)
//div[not(descendant::a)] // Herhangi bir bağlantı içermeyen div'ler
XPath için Hata Ayıklama Konsolu
XPath ifadeleri geliştirmek ve test etmek için en etkili yöntemlerden biri, tarayıcınızın geliştirici araçlarını kullanmaktır:
Chrome'da:
- DevTools'u açmak için F12 veya Ctrl+Shift+I tuşlarına basın
- Konsol sekmesine gidin
- XPath ifadelerini değerlendirmek için
$x("your-xpath-here")kullanın - Sonuçlar, eşleşen öğelerin bir dizisi olarak görünecektir
Firefox'ta:
- DevTools'u açmak için F12 veya Ctrl+Shift+I tuşlarına basın
- Konsol sekmesine gidin
- XPath ifadelerini değerlendirmek için
$x("your-xpath-here")kullanın - Sonuçlar, eşleşen öğelerin bir dizisi olarak görünecektir
Edge'de:
- DevTools'u açmak için F12 veya Ctrl+Shift+I tuşlarına basın
- Konsol sekmesine gidin
- XPath ifadelerini değerlendirmek için
$x("your-xpath-here")kullanın - Sonuçlar, eşleşen öğelerin bir dizisi olarak görünecektir
Bu doğrudan geri bildirim döngüsü, XPath ifadelerinizi hedef öğeleri doğru bir şekilde tanımlayana kadar hızlı bir şekilde iyileştirmenize olanak tanır.
İpuçları ve En İyi Uygulamalar
1. Yaygın Tuzaklardan Kaçının
Basit Tutun: Daha basit XPath ifadelerinin bakımı daha kolaydır ve sayfa yapısı değiştiğinde bozulma olasılığı daha düşüktür. Benzersiz öznitelikleri kullanarak öğenizi doğrudan hedefleyen öz ifadeler hedefleyin.
Mutlak Yollardan Kaçının: Mutlak yollar son derece kırılgandır. Yoldaki herhangi bir öğe değişirse, XPath bozulur. Mümkün olduğunda benzersiz tanımlayıcılara odaklanan göreli yollar kullanın.
Belirli Olun: İfadelerinizi gerektiği kadar belirli yapın, ancak daha fazlasını yapmayın. Aşırı özgüllük, ifadeleri kırılgan hale getirebilirken, yetersiz özgüllük istenmeyen öğeleri eşleştirebilir.
Yüklemleri Akıllıca Kullanın: Yüklemler, öğeleri filtrelemek için güçlüdür, ancak çok fazla iç içe yüklem, ifadelerin okunmasını ve bakımını zorlaştırabilir.
Tarayıcılar Arası Uyumluluğu Göz Önünde Bulundurun: Bazı XPath özellikleri tarayıcılarda farklı çalışabilir. İfadelerinizi tüm hedef tarayıcılarda tutarlılığı sağlamak için test edin.
2. Performans İçin Optimize Edin
Verimli Seçiciler Kullanın: Mümkün olduğunda, Kimlikleri veya diğer benzersiz tanımlayıcıları kullanın. //*[@id='username'] ifadesi genellikle karmaşık hiyerarşik seçicilerden daha hızlıdır.
// Kullanımını Sınırlandırın: Çift eğik çizgi operatörü (//) tüm belgeyi arar, bu da yavaş olabilir. Bir öğenin genel konumunu bildiğinizde, daha özel bir yolla başlayın.
Öğeleri Önbelleğe Alın: Aynı öğeyle birden çok kez etkileşim kurmanız gerekiyorsa, XPath ile tekrar tekrar bulmak yerine referansı saklayın.
XPath Çağrılarını En Aza İndirin: Her XPath değerlendirmesi zaman alır. Mümkün olduğunda, aramaların sayısını azaltmak için işlemleri gruplandırın.
Performansı Test Edin: Otomatik testlerinizde yavaşlamalar fark ederseniz, XPath sorgularının darboğaz olup olmadığını belirlemek için bunları profilleyin. Gerekirse alternatif seçiciler düşünün.
3. Etkili Bir Şekilde Hata Ayıklayın
Tarayıcı Geliştirici Araçlarını Kullanın: Çoğu modern tarayıcı, XPath ifadelerini doğrudan konsolda test etmenize olanak tanır. Bu, ifadenizin çalışıp çalışmadığına dair anında geri bildirim sağlar.
Sonuçları Çıktı Alın: Geliştirme ve hata ayıklama sırasında, amaçlanan öğeleri seçtiğinizi doğrulamak için XPath sorgularınızın sonuçlarını günlüğe kaydedin.
Koddaki Adımları İzleyin: Uygulamanızın ve XPath sonuçlarınızın durumunu incelemek için test çerçevesinizde kesme noktaları ve adım adım hata ayıklama kullanın.
XPath'inizi Yorumlayın: Gelişmiş özellikleri kullanırken veya uç durumları ele alırken, karmaşık XPath ifadelerini açıklamak için yorumlar ekleyin.
Düzenli Olarak İnceleyin ve Yeniden Düzenleyin: Uygulamanız geliştikçe, güvenilir ve verimli kalmalarını sağlamak için XPath ifadelerinizi periyodik olarak inceleyin.
XPath Hile Sayfası
İşte XPath ifadeleri için kapsamlı bir referans kılavuzu:
Temel XPath Söz Dizimi:
/ // Kök düğümden seçer
// // Belgedeki herhangi bir düğümü seçer
. // Geçerli düğümü temsil eder
.. // Geçerli düğümün üst öğesini temsil eder
Seçiciler:
element // Verilen ada sahip tüm öğeleri seçer
@attribute // Belirtilen özniteliğin değerini seçer
* // Tüm çocuk öğeleri seçer
text() // Bir öğe içindeki metni seçer
[predicate] // Düğümleri filtrelemek için bir koşul ekler
Yüklemler:
[name='value'] // Belirtilen öznitelik değerine sahip düğümleri seçer
[position()] // Konumlarına göre düğümleri seçer
[last()] // Verilen bir türün son düğümünü seçer
[contains(@attribute, 'value')] // 'value' içeren öznitelik değerlerine sahip düğümleri seçer
[not(predicate)] // Bir koşulu olumsuzlar
Eksenler:
ancestor:: // Tüm ataları seçer
ancestor-or-self:: // Ataları ve geçerli düğümü seçer
child:: // Tüm çocukları seçer
descendant:: // Tüm torunları seçer
descendant-or-self:: // Torunları ve geçerli düğümü seçer
following:: // Tüm sonraki düğümleri seçer
following-sibling:: // Sonraki kardeşleri seçer
parent:: // Üst düğümü seçer
preceding:: // Tüm önceki düğümleri seçer
preceding-sibling:: // Önceki kardeşleri seçer
self:: // Geçerli düğümü seçer
Operatörler:
= // Eşittir
!= // Eşit değildir
< // Küçüktür
<= // Küçük veya eşittir
> // Büyüktür
>= // Büyük veya eşittir
and // Mantıksal VE
or // Mantıksal VEYA
not // Mantıksal DEĞİL
İşlevler (Örnekler):
name() // Geçerli düğümün adını döndürür
count(nodes) // Düğüm kümesindeki düğüm sayısını döndürür
concat(string1, string2) // İki dizeyi birleştirir
substring(string, start, length) // Bir alt dize döndürür
contains(string, substr) // Bir dizenin bir alt dize içerip içermediğini kontrol eder
normalize-space(string) // Baştaki/sondaki boşlukları kaldırır ve boşlukları birleştirir
Örnekler:
/bookstore/book // Kök kitapçıdaki tüm kitap öğelerini seçer
//title[text()='XPath'] // Belgedeki herhangi bir yerde metni 'XPath' olan başlık öğelerini seçer
//*[@id='myId'] // id özniteliği 'myId'ye eşit olan öğeleri seçer
/bookstore/book[position()=1] // İlk kitap öğesini seçer
//div[@class='highlight']//p // Sınıfı 'highlight' olan div içindeki p öğelerini seçer
//a[contains(@href, 'example.com')] // href özniteliğinde 'example.com' olan a öğelerini seçer
Gelişmiş XPath Teknikleri
Dinamik Kimlikler ve Sınıflarla Çalışmak
Modern web çerçeveleri genellikle her sayfa yüklemesinde değişen dinamik Kimlikler ve sınıflar oluşturur. İşte bu senaryoları ele almak için kullanılan teknikler:
// Kısmi öznitelik eşleştirmeyi kullanma
//div[contains(@id, 'main-content')]
//button[starts-with(@id, 'submit-')]
//input[ends-with(@id, '-input')] // Not: Bu, XPath 2.0'dır ve tüm tarayıcılarda desteklenmez
// Sınıf adı desenlerini kullanma
//div[contains(@class, 'btn') and contains(@class, 'primary')]
Iframe'leri İşleme
Iframe'ler içindeki öğeleri seçmek özel işlem gerektirir:
// İlk olarak, iframe'i bulun
//iframe[@id='content-frame']
// Ardından, Selenium'da, XPath'i kullanarak içindeki öğeleri bulmadan önce iframe bağlamına geçersiniz
// driver.switchTo().frame(driver.findElement(By.xpath("//iframe[@id='content-frame']")));
// Geçiş yaptıktan sonra, iframe bağlamında normal olarak XPath kullanabilirsiniz
//button[@id='submit']
Öğe Görünürlüğünü Algılama
XPath'in kendisi doğrudan bir öğenin görünür olup olmadığını belirleyemez, ancak genellikle görünürlüğü gösteren özellikleri kontrol edebilirsiniz:
// display:none olan öğelerin genellikle satır içi stili vardır
//div[not(contains(@style, 'display: none'))]
// Öğeler sınıflar aracılığıyla gizlenebilir
//div[not(contains(@class, 'hidden'))]
// Öğelerin aria-hidden özniteliği olabilir
//div[not(@aria-hidden='true')]
Aynı Özelliklere Sahip Birden Fazla Öğeyi İşleme
Birden fazla öğe aynı öznitelikleri veya özellikleri paylaştığında, dizin oluşturmayı veya daha özel öznitelikleri kullanabilirsiniz:
// Sınıfı 'action' olan ikinci düğmeyi seçin
(//button[@class='action'])[2]
// Metin içeriğine ve sınıfa göre seçin
//button[@class='action' and contains(text(), 'Save')]
// Çevredeki öğelere göre seçin
//div[@class='card']//button[contains(text(), 'View details')]
Farklı Test Çerçevelerinde XPath
Selenium WebDriver
Selenium, XPath konumlandırıcıları için doğrudan destek sağlar:
// Java örneği
WebElement element = driver.findElement(By.xpath("//button[@id='submit']"));
# Python örneği
element = driver.find_element(By.XPATH, "//button[@id='submit']")
// JavaScript örneği
const element = await driver.findElement(By.xpath("//button[@id='submit']"));
Playwright
Playwright, daha iyi performans için CSS seçiciler önerilse de, XPath seçicileri destekler:
// JavaScript örneği
const element = await page.locator('xpath=//button[@id="submit"]');
await element.click();
# Python örneği
element = page.locator('xpath=//button[@id="submit"]')
element.click()
Cypress
Cypress, bir eklenti ile XPath'i destekler:
// İlk olarak eklentiyi yükleyin: npm install -D cypress-xpath
// cypress/support/e2e.js'ye ekleyin:
// require('cypress-xpath')
// Ardından testlerde kullanın
cy.xpath('//button[@id="submit"]').click()
Gerçek Dünya XPath Örnekleri
E-ticaret Web Sitesi Örnekleri:
// İndirimi olan tüm ürünleri bulun
//div[@class='product'][.//span[@class='discount']]
// Fiyatı belirli bir aralıkta olan ürünleri bulun
//div[@class='product'][.//span[@class='price' and number(translate(text(), '$', '')) < 100]]
// 4+ yıldız derecelendirmesine sahip ürünleri bulun
//div[@class='product'][.//div[@class='rating' and @data-stars >= 4]]
Form Doğrulama Örnekleri:
// Tüm gerekli alanları bulun
//input[@required]
// Doğrulama hataları olan alanları bulun
//input[../span[@class='error']]
// Gerekli alanların etiketlerini bulun
//label[./following-sibling::input[@required] or ./input[@required]]
Tablo Veri Örnekleri:
// Belirli bir içeriğe sahip tablo satırlarını bulun
//table[@id='data']//tr[td[contains(text(), 'Completed')]]
// Belirli bir sütun için başlık hücresini bulun
//table//th[contains(text(), 'Status')]
// Belirli bir başlıkla aynı sütundaki hücreleri bulun
//table//th[contains(text(), 'Status')]/following-sibling::td
