Menü

Sözdizimi ve Örneklerle Nihai XPath Yazma Hile Sayfası Eğitimi

ultimate xpath writing cheat sheet tutorial with syntax

Sorunları Ortadan Kaldırmak Için Enstrümanımızı Deneyin

HERHANGİ BİR Web Öğesi Türü için Ultimate XPATH Yazmanın En İyi 20 Yolu (XPATH hiçbir zaman geçersiz olmayacaktır):

Bir web uygulaması, bir düğmenin tıklanması için web öğesi, metin yazmak için giriş web öğesi, açılır menü, radyo düğmeleri vb. Gibi farklı web öğesi türlerinden oluşur.

Bu web öğelerine ayrıca etiketler veya düğümler de denir.

Web uygulamalarını otomatikleştirmek söz konusu olduğunda, web öğesini bulacak, üzerinde bir işlem gerçekleştirecek, bir düğmeyi tıklayıp, giriş kutusuna metin girme, bir onay kutusu seçme, bir radyo düğmesi seçme gibi bir işlem gerçekleştirecek bir otomasyon komut dosyası yazmakla başlar. yukarı veya aşağı kaydırın ve son olarak eylemin ardından beklenen davranışı doğrulayın.

HER TÜR WEB ELEMANI İÇİN XPATH YAZMAK İÇİN 20 YOL

Ne öğreneceksin:

XPath Nedir ve Nasıl Görünür?

Bir öğeyi bulmak, haritada birinin evini bulmak gibidir. Dışarıdan herhangi bir yardım almadan bir arkadaşımızın evini bulabilmemizin tek yolu, bir haritamız olması ve ne bulacağımızı (ev) bilmemizdir.

Bu benzetmeyi bizim durumumuza koymak için, harita, bulmak istediğimiz belirli web öğesiyle birlikte, tüm web öğelerinin bulunduğu DOM (HTML etiketleri, JavaScript, vb.) Olarak kullanılacaktır.

Bir elemanın benzersiz adresi veya yolu bulunduğunda, otomasyon betiği daha sonra test senaryosuna göre bazı eylemler gerçekleştirecektir. Örneğin, bir düğmeye tıkladıktan sonra açılan sayfanın URL'sini doğrulamak istiyorsunuz.

Ancak, 'XPATH' adlı bir web öğesine tam benzersiz adres oluşturmayı zorlaştıran benzer etiketler, aynı öznitelik değerleri, özdeş yollar olabileceğinden, bir web öğesinin benzersiz bir adresini / yolunu bulmak kolay değildir.

tarayıcılar arası uyumluluk nasıl test edilir

Burada, her tür web öğesi için geçerli ve benzersiz XPATH oluşturmak için bazı harika ve etkili teknikleri derinlemesine inceleyeceğiz.

Önerilen Okuma => Selenium'da XPath Kullanarak Web Öğelerini Tanımlayın

Bazen tarayıcı uzantılarını kullanarak kolayca XPath'ler oluşturabilirsiniz, ancak benim otomasyon testi kariyer, geleneksel tarayıcı uzantılarının çalışmadığı sayısız durumla karşılaştım ve kendi yaratıcılığınızı kullanarak kendi özelleştirilmiş XPath'lerinizi oluşturmalısınız. Eminim benzer durumlara sahipsin ya da karşılaşacaksın.

Bu eğiticide, kodunuz değiştiğinde bile XPath'inizin her zaman geçerli kalacağı şekilde bir web öğesi için nihai XPath oluşturmanın en iyi 20 yolunu inceleyeceğiz (geliştirici tamamını yeniden yazmadıkça) özellik / modül).

Tüm bu teknikleri bilerek, kendi XPath'inizi yazmanın ustası olacaksınız ve çok az geçersiz olma şansı ile katil XPath'ler yazabileceksiniz.

İlk olarak, XPath sözdizimini anlamakla başlayalım ve her bir parçasını tanımlayalım.

Aşağıdaki resim, XPath'in her bir parçanın açıklamasıyla birlikte nasıl görüneceğini gösterecektir:

XPATH Sözdizimi

  • //: Giriş, div vb. Gibi mevcut düğümü seçin.
  • Etiket adı: Web öğesinin / düğümünün etiket adı
  • @: Öznitelik seçin
  • Öznitelik: Düğümün / belirli web öğesinin öznitelik adı
  • Değer: Özniteliğin değeri

XPath nedeniyle otomasyon test betiğimin% 80'inin başarısız olduğu birkaç ipucunu burada paylaşmak istiyorum. Bunun nedeni, sağlanan XPath için birden fazla web öğesinin bulunması veya XPath'in geçerli olmaması veya sayfanın henüz yüklenmemiş olmasıdır.

Yani, test durumunuz başarısız olduğunda:

  1. XPath'inizi kopyalayın.
  2. Geçerli olup olmadığını doğrulamak için DOM'daki Tarayıcıda (F12 veya geliştirici aracı penceresi) arayın (Aşağıdaki resme bakın).

F12 Penceresi

Pro Tip 1: Benzersiz olduğundan ve DOM'da iki kez arama yaptığınızda başka hiçbir web öğesinin görünmediğinden emin olun.

Pro Tip 2: Bazen bir zamanlama sorunu vardır, bu da web öğenizin / sayfanızın henüz komut dosyası aradığı sırada yüklenmediği anlamına gelir, bu nedenle biraz bekleme süresi ekleyin ve yeniden test edin.

Pro Tip 3: Web öğesini aramadan önce tüm DOM'u yazdırmayı deneyin. Bu şekilde, Console'a bakarak web öğenizin DOM'da var olup olmadığını anlayabilirsiniz.

XPath aramasına derinlemesine dalmadan önce, paylaşmak istediğim önemli bir şey, geliştirme ekibine doğrudan erişiminiz varsa veya ekibiniz bulunduğunuz yerde bulunuyorsa, geliştirme ekibinizden size benzersiz kimlikler sağlamasını istemektir. her web öğesi veya en azından Otomasyon için kullanmak istedikleriniz ve bu size çok zaman kazandıracaktır.

Bu olasılık değilse, yaratıcılığınızı kullanmanız ve kendi özelleştirilmiş XPath'lerinizi oluşturmanız gerekebilir ve biz de şimdi öğreneceğiz.

Herhangi Bir Web Öğesi için XPath Yazmanın En İyi 20 Yolu

Katil bir XPath için en iyi 20 yolu oluşturmaya derinlemesine dalalım.

# 1) Geriye Doğru Arama

Diyelim ki bir düğmeyi tıklamak istiyorsunuz ve benzer bir düğme var. Her iki düğmenin de kimlik öznitelikleri vardır, ancak bunlar dinamiktir ve özniteliklerin hiçbiri her iki düğme öğesinde de benzersiz değildir.

Aşağıdaki senaryoda “Test Interactive” in “Ayar” düğmesine tıklamak istiyoruz.

Geriye Doğru Bakma

Kod

Geri arama kodu

'Ayar' düğmelerine bakarsanız, her iki kod da benzerdir. İd, ad, değer, içerir, vb. Gibi geleneksel yöntemler kullanıldığında, örneğin hiçbiri çalışmayacaktır.

// * (içerir (text (), 'Ayar')), Bu, iki web öğesi ile sonuçlanır. Dolayısıyla benzersiz değildir.

İşte son strateji,

>> İlk olarak, benzersiz olan en yakın etiketi bulun ve bu durumda

XPATH: “//*(@id='rcTEST')

>> İkinci olarak, bu durumda (text (), 'TEST Interactive') içeren amaçlanan web öğesine en yakın web öğesini bulun. Şimdi, 'Ayar' düğmesinin bulunduğu yerdeyiz, ancak üzerine tıklamak için, önce aşağıda gösterildiği gibi çift nokta kullanarak ana sayfaya gitmemiz gerekiyor.

XPATH: “//*(@id='rcTEST')//*(contains(text(), 'TEST Interactive'))/..

En yakın web öğesini bulun

>> Gördüğünüz gibi 'Ayar' düğmesi olarak ikinci web öğesine sahip seviyedeyiz. Bunun içinde iki düğme var ve 'Ayar' düğmesi olan ikinci düğmeye gitmek istiyoruz. Sonuna '/ button (2)' ekleyerek, aşağıda gösterildiği gibi 'Ayar' düğmesi için benzersiz XPATH'ımızı alabiliriz.

Son XPATH:

“//*(@id='rcTEST')//*(contains(text(), 'TEST Interactive'))/../button(2)”

Web öğesi türünü 'düğme' den başka bir şeye değiştirebileceklerini düşünüyorsanız, oluşturmanın başka bir yolu.

“//*(@id='rcTEST')//*(contains(text(), 'TEST Interactive'))/..//*(contains(text(), 'Setting'))”

veya 'aşağıdaki-kardeş' kullanarak

“//*(@id='rcTEST')//*(contains(text(), 'TEST Interactive'))/following-sibling::button”

# 2) Değişkenleri ve Özel Değerleri Kullanma

Dosyaları yüklemek / indirmek için FTP ('Dosya Aktarım Protokolü') özelliğine sahip bir web uygulaması olduğunu ve indirme bağlantısına tıklayarak belirli bir dosyayı indirmek için bir test vakanız olduğunu varsayalım.

Öncelikle aradığımız dosya adını değişken olarak tanımlayabiliriz.

String beklenenfileName = 'Test1';

Şimdi XPATH kullanarak gerçek dosya adını bulabiliriz.

“String actualFileName = WebDriverAccess.getDriver().findElement (By.xpath('//*'+fileName +'/tr/td(1)')).getAttribute('title');”

Yukarıdaki XPath'de… '/ tr / td (1) .getAttribute (' title ')' belirli bir satıra ve ilk sütuna gidecek ve title özelliğinin değerini alacaktır. Gerçek dosya adını başka bir değişkene kaydedebiliriz.

Hem beklenen hem de gerçek dosya adlarına sahip olduğumuzda, ikisini de karşılaştırabiliriz ve her ikisi de eşleşirse, indirme bağlantısına tıklayabiliriz.

(if acutalFileName == expectedFileName) { WebDriverAccess.getDriver().findElement(By.xpath('//*'+fileName +'/tr/td(4)')).click(); }

Ayrıca her satırda bir döngü oluşturabilir ve siz bulana kadar dosya adını doğrulamaya devam edebiliriz.

Loop(int count <30) { String actualFileName = WebDriverAccess. getDriver ().findElement (By. xpath ('//*'+acutalFileName +'/tr(' + count + ')/td(1)')).getAttribute('title'); (if acutalFileName == expectedFileName) { WebDriverAccess. getDriver ().findElement(By. xpath ('//*'+fileName +'/tr/td(4)')).click(); } Count++; }

# 3) 'XML' etiketlerini, 'VE' vb. Kullanma

Özelleştirilmiş etiketleri kullanarak benzersiz XPATH oluşturabilir ve başka koşullar ekleyebiliriz.

Örneğin, Diyelim ki amaçladığımız web öğesi ana etikette var ve birden çok adres etiketi var, ancak yalnızca belirli bir tane bulmak istiyorsunuz. Tüm adres etiketlerinin bir sınıf niteliği vardır, bu nedenle başlayabiliriz.

// address(@class='ng-scope ng-isolate-scope')

Hedeflenen web öğemizin, 'Test' adlı bir metne sahip bir etiket içinde olduğunu fark ettik.

// address(@class='ng-scope ng-isolate-scope')//div(contains(.,'Testing')

Sonuç olarak bulunan birden fazla web öğesi olduğunu anladık. Bu nedenle, onu daha benzersiz kılmak için, nihayet bizi aradığımız web öğesine yönlendirecek olan “id” gibi diğer koşulları ekleyebiliriz.

// address(@class='ng-scope ng-isolate-scope')//div(contains(.,Testing') and @id='msgTitle')

# 4) Öznitelikleri ve Tablo XPATH'sini Kullanma

Bir tablonun içine yerleştirilmiş ve tablonun bir form öğesinin içine yerleştirilmiş bir web öğesine yazmak istediğimizi varsayalım.

DOM içindeki tüm formları 'myForm' adıyla bulabiliriz.

“//*(@name='myForm')”

Şimdi tüm formlarda 'tbl_testdm' kimliğine sahip tabloyu bulun.

'//*(@name='myForm')//table(@id='tbl_ testdm’)”

Tablo içinde belirli bir satıra ve sütuna gidin.

'//*(@name='myForm')//table(@id='tbl_ testdm’)/tbody/tr/td(6)/”

Hücrenin içinde, birden fazla girdi varsa, değer = 'Açık RFS' olan bir girdi bulun ve bu bize alanın son XPath'ını verecektir.

//*(@name='myForm')//table(@id='tbl_ testdm’)/tbody/tr/td(6)/ input(@value='Open RFS')'

# 5) Nitelikleri, Tabloları ve Metni Kullanma

Amaçladığınız web öğesinin Panel Tablosunda olduğunu ve bazı ortak metinler içerdiğini varsayın.

Öncelikle, bu durumda 'TITLE' olan benzersiz bir özelliğe sahip bir panel ile başlayın.

//*(@title=’Songs Lis Applet')

Şimdi tüm tablo etiketlerinde gezinin.

//*(@title=’Songs Lis Applet')//table

Tüm tabloların içinde 'Yazar' metninin bulunduğu sütunu bulun.

Son XPath şöyle olacaktır:

//*(@title=’Songs List Applet')//table//td(contains(text(),'Author'))

# 6) Yuvalanmış Nitelikler Kullanarak XPATH Oluşturma

Hedef web öğesinin XPath'i, yuvalanmış öznitelikler kullanılarak da oluşturulabilir. Örneğin, bu durumda, DOM'da belirli bir özelliği arar ve ardından bunun içinde başka bir özelliği arar.

//*(@id='parameters')//*(@id='testUpdateTime')')

# 7) Nitelikleri, Div'leri ve Düğmeyi Birleştirerek XPath Üretimi

Örneğin, aşağıdaki XPath'de, bir id (göreceli XPath), bazı div etiketleri ve bir düğme kullanarak hedef web öğesini bulabildim.

“//*(@id='MODEL/PLAN')/div(1)/div(2)/div(1)/div(1)/widget/section/div(1)/div/div(1)/div/div/button(1)'

# 8) CONTAINS, REVERSE LOOKUP vb. Kullanarak XPATH Oluşturma

Bir zamanlar doğrudan kimliğim olmayan bir açılır listem vardı. Aşağıda gösterildiği gibi son XPATH'ı bulmak için CONTAINS, REVERSE, DIVs, öznitelikleri kullanmak zorunda kaldım.

//*(contains(text(),'Watch Dial))/../div/select(@data-ng-model='context.questions (subqts.subHandleSubId)')'),

# 9) Göreli kullanarak XPath Üretimi, İÇERİR, TERS, KARŞILAŞTIRMA, vb.

Uygulamanın bir grafik görüntülediği ve her bir grafik değerinin doğrulanması gereken bir durum yaşadım. Ancak maalesef, her değerin benzersiz bir kimliği yoktu, bu nedenle, göreli, içerir, ters, takip eden kardeş ve div etiketlerini birleştiren bir grafik değeri için aşağıda gösterildiği gibi son XPATH'yi buldum.

//*(@id='RESEARCH/PLAN')//*(contains(@id, 'A4'))/../../following-sibling::div(1)/div(1)/span(1)/span(1)

# 10) Nitelikler, İçerir, Ters, Önceki-Kardeş, Div'ler ve Aralık kullanarak XPath Üretimi

Farklı Alarm verilerini doğrulamak zorunda kaldım ve her alarm değeri belirli bir hesaplamaya veya zamanlamalara göre görüntülendi. Her bir değeri yakalamak için, öznitelikler, içeren, ters, önceki-kardeş, divs ve span etiketlerini kullanan aşağıdaki XPATH'yi bulmam gerekiyordu.

//*(@id='ALARMDATA')//*(contains(@id, 'AFC2'))/../../preceding-sibling::div(1)/div(1)/span(1)/span(1)

# 11) Öznitelikleri, XML Etiketlerini vb. Kullanma

Aşağıdaki XPATH, öznitelikler ve XML etiketlerinde, bir web öğesinin son benzersiz adresini bulmak için bir sıra kullanılır.

//*(@id='RESEARCH/REVIEW') //widget/section/div(1)/div/div(2)/div(1)/div(3)/div(1)//span(@class='details')

# 12) Tüm Sayfaya Bakmak yerine Tüm Bağlantılara Bakarak ve İçeren XPath Üretimi

Aşağıdaki XPath, yalnızca tüm sayfada 'Parametre Verileri Manuel Giriş' olarak metin içeren bağlantıları arar.

//a(contains(.,'Parameter Data Manual Entry'))

# 13) İçerir ve Nitelikleri Kullanma

//*(contains(@style,'display: block; top:'))//input(@name='daterangepicker_end')

# 14) Öznitelikleri Kullanmak, Kardeşleri ve Altını Takibi

//*(@id='dropdown-filter-serviceTools')/following-sibling::ul/descendant::a(text()='Notepad')

# 15) Öznitelikleri Kullanmak, Kardeşleri Takip Etmek, Soyundan Gelmek ve Metin

//*(@id='dropdown-filter-service tools') /following-sibling::ul/descendant::a(text()='Trigger Dashboard')

# 16) Üstbilgi ve Metni Kullanma

Web öğesi belirli bir metin içeren bir başlıksa, XPath aşağıda gösterildiği gibi olabilir:

//h3(text()='Internal Debrief')

# 17) Başlık Metni, Kardeşleri Takip Etme, Yol vb.

//h3(contains(text(),'Helium Level'))/following-sibling::div/label/input

# 18) Nitelikleri, İçerir ve Önceki Kardeşleri Kullanma

Benzersiz bir niteliğe sahip olmayan bir yayılma alanına sahip olduğumda, mutlak, İçerir, önceki kardeşler ve başka bir mutlak yolu birleştirerek XPATH oluşturdum.

//div(div(p(contains(text(),'Status'))))/preceding-sibling::div/div/span(3)/span

# 19) Kimlik Özniteliği, bazı Belirli Metinler ve Geriye Doğru Arama kullanarak açılır liste arama

//*(@id='COUPLING')//*(contains(text(),'COUPLE Trend'))/../div/select

# 20) 'id' Özniteliğini birleştirmek ve Belirli Metin ile bir bağlantı aramak

//*(@id='ffaHeaderDropdown')//a(contains(text(),'Start Workflow'))

Sonuç

Katil bir XPATH yazmaya gelince, bu gerçekten kodu ne kadar iyi anladığınıza ve analiz ettiğinize bağlıdır. Kodu ne kadar çok anlarsanız, etkili XPATH'ler yazarken bulacağınız yolların sayısı o kadar fazla olacaktır.

XPath yazmanın ilk adımı, hedef web öğenize en yakın benzersiz web öğesini bulmak ve nitelikler, DIV'ler, takip etme, içerme vb. Gibi yukarıda tartışılan farklı teknikleri kullanarak yaklaşmaya devam etmektir.

Sonunda, geliştirme ekibinizden ilgilendiğiniz tüm web öğelerine benzersiz kimlikler eklemesini talep etmeniz hayatınızı gerçekten kolaylaştıracağını tekrar söyleyeceğiz.

Bir sprint döngüsü veya yeni gereksinim üzerine çalışma başladığında ve takım yeni maketlerle paylaşıldığında, her zaman tüm maketleri gözden geçiririm ve aklımdaki olası otomasyon test durumlarını düşünürüm, kullanılacak tüm potansiyel web öğelerinin bir listesini hazırlarım otomasyon testlerinde ve kendi kimliklerimi hazırladım.

Önerilen kimliklerimle birlikte tüm web öğelerinin bir listesi tamamlandığında, geliştirme kodunda kullanılmak üzere önceden geliştiriciyle paylaşırdım. Bu şekilde, XPATH yazma savaşımı kolaylaştırarak her zaman benzersiz kimlikler elde ederdim.

Aşağıda, XPATH yazmanın farklı yollarının birleşik bir listesi bulunmaktadır:

  1. '// * (@ id =’ rcTEST ’) // * (içerir (text (),‘ TEST Interactive ’)) /../ düğme (2)'
  2. '// * (@ id =’ rcTEST ’) // * (içerir (text (),‘ TEST Etkileşimli ’)) /..//* (içerir (text (),‘ Ayar ’))”
  3. '// * (@ id =’ rcTEST ’) // * (içerir (text (),‘ TEST Interactive ’)) / following-sibling :: button'
  4. 'String gerçekFileName = WebDriverAccess.getDriver (). FindElement (By.xpath (' // * '+ dosyaAdı +' / tr / td (1) ')). GetAttribute (' başlık ');'
  5. WebDriverAccess.getDriver (). FindElement (By.xpath (“// *” + dosyaAdı + ”/ tr / td (4)”)) tıklayın ();
  6. '// adres (@ class = 'ng-kapsam ng-izolat-kapsam') // div (içerir (., Test ') ve @ id =' msgTitle ')'
  7. “// * (@ name =’ myForm ’) // tablo (@ id =’ tbl_ testdm ’) / tbody / tr / td (6) /
  8. girdi (@ value = ’Açık RFS’) ”
  9. “// * (@ title =’ Songs List Applet ’) // table // td (contains (text (),’ Author ’))”
  10. '// * (@ id =’ parametreler ’) // * (@ id =’ testUpdateTime ’)”) ”
  11. '// * (@ id = 'MODEL / PLAN') / div (1) / div (2) / div (1) / div (1) / widget / section / div (1) / div / div (1) / div / div / düğme (1) ”
  12. '// * (içerir (text (),’ İzle Çevirme)) /../ div / select (@ data-ng-model = ’context.questions (subqts.subHandleSubId)’) '),'
  13. “// * (@ id = 'ARAŞTIRMA / PLAN') // * (içerir (@id, 'A4')) /../../ following-sibling :: div (1) / div (1) / aralık (1) / aralık (1) ”
  14. '// * (@ id = 'ALARMDATA') // * (içerir (@id, 'AFC2')) /../../ preceding-sibling :: div (1) / div (1) / span ( 1) / span (1) ”
  15. '// * (@ id = 'ARAŞTIRMA / İNCELEME') // widget / bölüm / div (1) / div / div (2) / div (1) / div (3) / div (1) // span ( @ class = 'ayrıntılar') ”
  16. '//A(contains(.,’Parameter Data Manual Entry’)) ”
  17. '// * (içerir (@ style,’ display: block; top: ’)) // input (@ name =’ daterangepicker_end ’)”
  18. '// * (@ id =’ dropdown-filter-serviceTools ’) / following-sibling :: ul / descendant :: a (text () =’ Not Defteri ’)”
  19. '// * (@ id =’ dropdown-filter-serviceTools ’) / following-sibling :: ul / descendant :: a (text () =’ Trigger Dashboard ’)”
  20. '// h3 (text () =' Dahili Bilgilendirme ')'
  21. '// h3 (içerir (text (),' Helyum Seviyesi ')) / following-sibling :: div / label / input'
  22. '// div (div (p (içerir (text (),’ Durum ’)))) / preceding-sibling :: div / div / span (3) / span'
  23. '// * (@ id =’ COUPLING ’) // * (içerir (text (),’ COUPLE Trend ’)) /../ div / select”
  24. '// * (@ id =’ ffaHeaderDropdown ’) // a (içerir (text (),’ İş Akışını Başlat ’))'

Umarım bu bilgilendirici makale, XPath yazma konusundaki bilginizi zenginleştirirdi.

Yazar Özgeçmişi: Bu makale, 9 yılı aşkın kariyerinde farklı deneyim ve becerilere sahip bir bilişim uzmanı olan Adnan Arif tarafından yazılmıştır.

Önerilen Kaynaklar

^