Opanowanie XPath w Selenium: Jak zlokalizować elementy

przez

Inżynierowie testowi są niezbędni w cyklu życia oprogramowania, ponieważ zapewniają, że zespół dostarcza wolne od błędów i działające aplikacje. Inżynierowie ci przeprowadzają różne testy aplikacji, zanim zostaną wysłane lub zadeklarowane jako gotowe dla użytkowników.

Testerzy powinni być wykwalifikowani i umieć lokalizować elementy sieciowe i wchodzić z nimi w interakcję. Selenium to jedno z najczęściej używanych narzędzi do automatyzacji testów przez nowoczesne zespoły programistyczne. To narzędzie ma cztery komponenty; Selenium Grid, Selenium WebDriver, Selenium IDE i Selenium RC.

Dzisiaj skupimy się na Selenium WebDriver, ponieważ zawiera on XPath. Ten artykuł zdefiniuje XPath, omówi podstawową składnię XPath i zilustruje sposób XPath w Selenium.

Co to jest XPath

XPath (XML Path Language) to język zapytań do wybierania i nawigacji po atrybutach i elementach w dokumentach XML. XPath definiuje wyrażenie ścieżki, oferując sposób adresowania określonych części dokumentu XML i pobierania z niego informacji.

Jego składnia przypomina ścieżkę systemu plików. Zawiera również funkcje i symbole, które ułatwiają wybieranie elementów na podstawie ich atrybutów i hierarchii. Możesz używać XPath z technologiami takimi jak XML, HTML i XSLT do wyodrębniania danych i manipulowania nimi.

Dlaczego warto używać XPath?

  • Jest elastyczny: w przeciwieństwie do selektorów CSS, które mogą lokalizować elementy tylko za pomocą nazwy znacznika, identyfikatora lub klasy, XPath umożliwia lokalizowanie elementów za pomocą innych atrybutów.
  • Wielokrotnego użytku: możesz przechowywać XPath w zmiennych i ponownie używać ich w swoim kodzie.
  • Precyzyjny wybór węzłów: XPath zapewnia ustandaryzowany sposób kierowania na określone elementy w dokumencie internetowym.

Podstawowa składnia XPath

XPath pozwala znaleźć dowolny element na stronie internetowej za pomocą DOM. Zanim jednak sprawdzimy składnię, musimy zrozumieć następujące wyrażenia XPath;

WyrażenieOpisnazwawęzła/nazwazmiennejWybiera wszystkie węzły o nazwie „nazwawęzła”/„nazwaznacznika”/Wybiera z węzła głównego//Wybiera węzły w bieżącym dokumencie z bieżącego węzła pasującego do zaznaczenia, niezależnie od tego, gdzie się znajdują@Wybiera atrybuty..Wybiera rodzica bieżący węzeł. Wybiera bieżący węzeł

Standardowa składnia XPath to;

XPath=//tagname[@attribute="value"]

Jak widać, składnia zaczyna się od podwójnego ukośnika (//), który zaczyna się od bieżącego węzła określonego przez nazwę znacznika/węzła.

Bezwzględna XPath a względna XPath

Mamy dwie ścieżki, gdy mamy do czynienia z XPath; Bezwzględna XPath i Względna XPath;

Absolutna XPath

Bezwzględna ścieżka XPath to bezpośrednia ścieżka od katalogu głównego do żądanego elementu. Zaczynasz od węzła głównego i kończysz na węźle docelowym.

Możesz mieć dokument HTML o następującej treści;

<!DOCTYPE html>
<html>
<head>
    <title>newsblog.pl</title>
</head>
<body>
    <div>
        <h1>Welcome to newsblog.pl</h1>
    </div>
</body>
</html>

Jeśli chcemy zlokalizować element z treścią „Witamy w newsblog.pl”, pójdziemy tą ścieżką;

/html/body/div/h1

W powyższym dokumencie mamy;

  • HTML jako węzeł główny: /html
  • Ciało jest węzłem nadrzędnym: /html/body
  • Div jako dziecko węzła body: /html/body/div
  • H1 jako dziecko węzła div: /html/body/div/h1

Aby zdobyć najgłębszy element, musisz podążać tą ścieżką.

Kiedy używać Absolute XPath

Bezwzględna XPath podąża „określoną” ścieżką. Będzie więc idealnie pasować, gdy na stronie znajduje się wiele elementów o podobnych atrybutach, zapewniając, że kierujesz dokładnie te elementy w dokumencie.

Jednak XPath jest zbyt wrażliwy na zmiany w strukturze dokumentu HTML. W związku z tym prosta zmiana może spowodować uszkodzenie Absolute XPath.

Względna ścieżka XPath

Względna ścieżka XPath zaczyna się od dowolnego węzła i kończy na węźle docelowym. Na tę ścieżkę nie mają wpływu zmiany w dokumencie, co czyni ją preferowaną w większości przypadków. Względna XPath umożliwia lokalizowanie elementów z dowolnej części dokumentu. Wyrażenie Względna XPath zaczyna się od podwójnych ukośników „//”.

Jeśli użyjemy dokumentu HTML, możemy zlokalizować nasz H1, który mówi „Witamy w newsblog.pl”;

<!DOCTYPE html>
<html>
<head>
    <title>newsblog.pl</title>
</head>
<body>
    <div>
        <h1>Welcome to newsblog.pl</h1>
    </div>
</body>
</html>

Nasza względna ścieżka XPath do h1 będzie; 

//body/div/h1

Kiedy używać względnej XPath

Powinieneś używać Relative XPath, gdy szukasz równowagi między elastycznością a specyficznością. Ta ścieżka jest odporna na zmiany w dokumencie HTML, biorąc pod uwagę, że relacja między elementami pozostaje specyficzna.

Zlokalizuj elementy za pomocą XPath w Selenium

Selenium to platforma typu open source, która umożliwia użytkownikom automatyzację przeglądarek internetowych. Framework zawiera zbiór bibliotek i narzędzi, które pomagają testerom automatycznie i systematycznie wchodzić w interakcje z elementami sieci.

Zakładając, że mamy dokument internetowy, który zawiera następującą listę utworów;

<!DOCTYPE html>
<html>
<head>
    <title>Song Library</title>
</head>
<body>
    <h1>Song Library</h1>
    <ul class="song-list">
        <li class="song" title="Song Title 1">Song 1 - Artist 1</li>
        <li class="song" title="Song Title 2">Song 2 - Artist 2</li>
        <li class="song" title="Song Title 3">Song 3 - Artist 1</li>
        <li class="song" title="Song Title 4">Song 4 - Artist 3</li>
    </ul>
</body>
</html>
  • Naszym węzłem głównym jest .
  • Mamy jako nasz węzeł nadrzędny.
  • Mamy

    jako dziecko .

  • Mamy
      jako dziecko .
    • Mamy
    • jako dziecko
        .

      W powyższym dokumencie HTML możemy użyć różnych lokalizatorów XPath. Na przykład możemy zlokalizować elementy według identyfikatora, nazwy, nazwy klasy, zawartości, tekstów, końcówek na i zaczynających się od, wśród wielu innych lokalizatorów. Możesz używać Selenium z różnymi językami programowania. Do demonstracji użyjemy Pythona.

      Zlokalizuj według indeksu

      Zakładając, że chcemy zlokalizować utwór numer 3, możemy mieć ten kod;

      third_song = driver.find_element_by_xpath("//li[@class="song"][3]")
print("Third Song:", third_song.text)

      Użyliśmy względnej ścieżki XPath i zaczęliśmy od węzła „li”. Kiedy Selenium zlokalizuje trzecią piosenkę na naszej liście, wydrukuje jej tekst.

      Zlokalizuj według atrybutu

      Możemy mieć XPath, który szuka wszystkich piosenek z „Artist 1” i drukuje ich tytuły. Nasz kod może wyglądać następująco;

      songs_by_artist1 = driver.find_elements_by_xpath("//li[contains(@class, 'song') and contains(text(), 'Artist 1')]")
print("Songs by Artist 1:")
for song in songs_by_artist1:
    print(song.text)

      Zlokalizuj według tekstu

      Ten lokalizator pomaga znaleźć elementy z określonym tekstem. Możemy wyszukać piosenkę z tekstem „Song 4” i wydrukować jej tekst. Możemy reprezentować ten lokalizator za pomocą tego kodu;

      song_with_text = driver.find_element_by_xpath("//li[contains(text(), 'Song 4')]")
print("Song with Text:", song_with_text.text)

      Osie XPath

      Podejścia, które omówiliśmy do tej pory, doskonale sprawdzają się w przypadku prostych stron internetowych. Istnieją jednak przypadki, w których metody wyszukiwania elementów XPath, takie jak tekst, identyfikator, nazwa klasy i nazwa, nie będą działać.

      Osie XPath są używane w przypadku treści dynamicznych, w których zwykłe lokalizatory nie działają. Tutaj lokalizujesz elementy na podstawie ich relacji z innymi elementami. Oto niektóre z popularnych lokalizatorów osi XPath;

      Przodek

      Metoda Ancestor Axis jest idealna do obsługi dokumentów XML z silnie zagnieżdżonymi elementami. Możesz wybrać wszystkie elementy przodków, takie jak dziadkowie i rodzice bieżącego węzła, od najbliższego do najdalszego.

      Możemy mieć następujący kod;

      <bookstore>
  <book>
    <title>The Great Gatsby</title>
    <author>F. Scott Fitzgerald</author>
    <genre>Fiction</genre>
  </book>
  <book>
    <title>The Biggest Dilemma</title>
    <author>George Orwell</author>
    <genre>Dystopian</genre>
  </book>
</bookstore>

      Jeśli chcemy wybrać wszystkich przodków elementu „title” dla książki „The Biggest Dilemma”, możemy skorzystać z metody Ancestor Axis;

      //title[text() = '1984']/ancestor::*

      Następny

      Metoda Follow Axis lokalizuje wszystkie węzły za znacznikiem zamykającym bieżącego węzła. Ta metoda nie uwzględnia hierarchii ani lokalizacji węzłów docelowych. Na przykład, jeśli masz dokument XML lub stronę internetową z wieloma sekcjami, możesz zidentyfikować element, który pojawia się po określonej sekcji bez poruszania się po całej strukturze drzewa.

      Rodzic

      Metoda Parent Axis w XPath wybiera rodzica bieżącego węzła. Możesz użyć następującej ścieżki, aby zlokalizować węzeł nadrzędny; 

      //tag[@attribute="value"]/parent::tagName

      Takie podejście działa, gdy elementy podrzędne w bieżącym węźle mają unikalne atrybuty, które można łatwo zlokalizować i które chcesz sprawdzić u rodzica.

      Dziecko

      Metoda Child Axis w XPath wybiera wszystkie elementy podrzędne bieżącego węzła. Pozostaje jedną z najpopularniejszych metod osi XPath, ponieważ pomaga wybrać węzły potomne określonego elementu.

      Rozważ ten fragment kodu;

      <section id='text'>
    <p>Paragraph one</p>
    <p>Paragraph two</p>
    <p>Paragraph three</p>
    <p>Paragraph four</p>
</section>

      Za pomocą tej osi możemy zlokalizować wszystkie elementy „p” w naszym kodzie;

      //section[@id='text']/child::p

      Często zadawane pytania

      Po co używać XPath zamiast selektorów CSS?

      Selektory CSS mogą znajdować elementy tylko na podstawie ich identyfikatora, nazwy znacznika i klasy. Z drugiej strony możesz użyć XPath do zlokalizowania elementów na podstawie ich lokalizacji, treści tekstowej i innych atrybutów w strukturze HTML. Możesz także przechowywać wyrażenia XPath w zmiennych i ponownie wykorzystywać je w swojej aplikacji.

      Jakie języki obsługuje XPath w Selenium?

      Możesz używać XPath z dowolnym językiem obsługującym Selenium. Skrypty możesz pisać w językach JavaScript, Java, Python, Ruby, C# i PHP.

      Jakie są alternatywy dla XPath?

      Możesz użyć selektorów CSS, rozpoznawania obrazu lub wbudowanych lokalizatorów Selenium jako alternatywy dla XPath. Najpopularniejsze są selektory CSS; możesz znaleźć elementy na podstawie ich nazwy znacznika, identyfikatora lub klasy. Rozpoznawanie obrazu umożliwia lokalizowanie elementów na podstawie ich obrazów. Wbudowane lokalizatory Selenium zostały zaprojektowane tak, aby były łatwe w użyciu.

      Wniosek

      Możesz teraz definiować XPath w Selenium, rozróżniać XPath bezwzględny i względny oraz lokalizować elementy za pomocą różnych lokalizatorów XPath. Wybór lokalizatora będzie zależał od charakteru treści i celów końcowych.

      Zapoznaj się z naszym artykułem na temat pytań do rozmowy kwalifikacyjnej Selenium, jeśli chcesz zaliczyć kolejną rozmowę kwalifikacyjną.