Xpath – lokalizowanie elementów. W tym tekście poruszymy co jest XPATH, jak tworzyć takie składnie by wyszukiwać elementy na stronie. Dzięki kilku poradom będzie Ci łatwiej tworzyć xpathy.
Co to jest xpath.
Xpath to w tłumaczeniu XML Path Language. Jest to język służący do opisu ścieżek XML. Tłumacząc prościej podajemy ścieżkę jaką trzeba przebyć by dostać się do elementu którego szukamy. Pisząc swojego xpatha możemy korzystać ze ścieżek – relatywnej, lub absolutnej a także korzystać z atrybutów. Xpathy będą nam służyły do lokalizowania elementów i np. sprawdzania ich obecności w ramach testów Selenium.
Struktura do pisania xpath.
Jak wspomnieliśmy wyżej wyszukując xpathy posługujemy się drzewkiem w strukturze. Jeżeli masz minimalną wiedzę o HTML (struktura) to temat będzie dla Ciebie łatwiej przyswajalny. W innym wypadku musisz nadrobić te zaległości (na serwisie dlaTesterów.PL będzie seria artykułów o HTMLu). Idąc dalej poniżej wklejamy kod ze strony Google.com.
To co zostało oznaczone na powyższej fotografii to ścieżka do odnalezienia loga Google.com. Chcąc napisać selector w przeglądarce Chrome musisz wpisać polecenie $x następnie otwieramy nawias i będziemy tworzyć ścieżkę do odnalezienia elementu.
- / – rozpoczyna wyszukiwanie od element root
- // – zaznacza wszystkie węzły w dokumencie
- . – jest aby zaznaczyć aktualny węzeł
- .. – wskazuje rodzica aktualnego węzła
- nazwa_węzła – wskazuje wszystkie węzły danego typu
- @ – służy do określenia atrybutów
Wstęp do podstaw.
Jednak ten przykład może nie wiele Wam powiedzieć. Zacznijmy na przykładzie google.com. Otwórz u siebie stronę w przeglądarce i następnie wejdź do DevToolsów i wejdź do zakładki console.
Wpisz następnie $x i dodaj („/html”).
Teraz spróbuj wpisać $x(„//div[@class=’content’]”).
Dzięki tym czynnościom znaleźliśmy jakieś elementy. Teraz spróbujemy znaleźć logo googla. Możemy to zrobić na kilka sposobów i wszystko zależy od tego jak zbudowana jest strona, a także czy są inne podobne, elementy, czy będzie rozwijana itd.
$x("//img[contains(@src, '.gif')]")
W takim poszukiwaniu znajdujemy wszystkie elementy //img zawierające (contains) atrybut src o rozszerzeniu gif. Metoda ta jest dobra w przypadku gdy szukasz np. loga swojej strony i zgodnie z założeniami Waszej firmy zawsze będą umieszczane w takim rozszerzeniu (bez zmian nazw itd).
$x("//div[@id='viewport']//div[@class='content']//span[@id='body']//a//img[@src='/logos/doodles/2020/wear-a-mask-save-lives-copy-6753651837108810-law.gif']")
Taki potworek stworzony został jako ścieżka – krok po kroku, oraz dodatkowo pełna nazwa pliku z obrazkiem. Widzimy, że po drodze, jeżeli zmieni się jakikolwiek element, wówczas xpath nie znajdzie nam elementu. Najlepiej jest zatem ćwiczyć, ćwiczyć i rozmawiać z deweloperami, czy rozmawiać w ramach zespołu by móc tworzyć jak najlepsze i najbardziej uniwersalne xpathy – ale odnajdujące konkretne elementy.
Szukamy elementu i znajdujemy dwa takie same
W ramach pisania testu otrzymasz scenariusz by sprawdzić czy kliknięcie w przycisk udostępniania w google.com powoduje daną interakcję. Zatem tworzymy jak wcześniej xpatha, pamiętając że linki w HTMLu to <a href>.
$x("//div[@id='viewport']//div[@class='content']//span[@id='body']//a").
Odnajdujemy dwa elementy
Chcą znaleźć ten konkretny element, dodaliśmy kolejnego diva by móc dokładnie zlokalizować element.
$x("//div[@id='viewport']//div[@class='content']//span[@id='body']//div[@class='fOwUFe']//a")
Czy to jedyna możliwość by znaleźć ten element? Możemy tego samego xpatha napisać na kilka sposobów:
$x("//div[contains(@class, 'fOwUFe')]//a");
$x("//div[@class='fOwUFe']//a")
$x("//div[@class='content']//div[@class='fOwUFe']//a")
Każdy z powyższych xpathów znajduje element.
Szersza lekcja
Nie będziemy odkrywać xpathów na nowo, gdy jest od tego idealne miejsce. Jeżeli chcesz to wiele możliwości daje odwiedzenie strony Xpath cheatsheet. Poniżej zaprezentujemy elementy jakie mogą być wyszukiwane za ich pośrednictwem i jakich poleceń używać. Opierać się będziemy na powyższej stronie.
Kilka podpowiedzi
Budując xpathy pamiętaj o ich budowanie, możliwości wyszukiwania elementów w kolejności. Tworząc xpath zwróć uwagę na kilka rzeczy. Pierwszy z nich to odnalezienie „content” na stronie Google.
$x(„//div[@class=’content’]”) – celowo zaznaczyliśmy nawiasy kwadratowe bo to w nich znajduje się określenie elementu.
$x(„//div[contains(@class, 'content’)]”) – tutaj podobna struktura, jednak wpisaliśmy słowo contains. Taka konstrukcja powoduje konieczność otwarcia nawiasu () i wpisaniu wewnątrz odpowiedniego polecenia.
W ramach pisania xpathów można też używać określania elementów – numerycznie za pomocą [1]. W przypadku gdy posiadacie jakieś elementy, które występują po kolei a nie posiadają konkretnych atrybutów, ID, czy nazw musimy ratować się taką metodą. Ten przykład będzie trywialny i nie obejmuje strony google.com.
$x(„//div[@class=’content’][2]”) – opisanie w nawiasie kwadratowym [2] poleca wyszukanie kolejnego elementu o takiej nazwie.
Mamy też możliwość w trudnych przypadkach wyszukiwać za pomocą potomków.
$x(„/descendant::div[@id=’body’]”);
Na powyższym zrzucie widać dokładnie jak można wykorzystywać descendant
w swoich xpathach.
Ważne
Pamiętaj – polecenie $x działa obecnie już w przeglądarkach Chrome, Firefox, Opera oraz Edge na Chromium. Dodatkowo gdy będziesz już implementował xpath do swojego testu pamiętaj by usuwać $x.
driver.FindElement(By.XPath("//div[contains(@class, 'fOwUFe')]//a");
Podsumowanie
Mamy nadzieje, że tekst Xpath – lokalizowanie elementów, przybliżył Wam trochę możliwości jakie dają xpathy. Dzięki tym kilku poradom powinno Ci być łatwiej tworzyć xpathy dla swoich testów. Jeżeli będzie duże zainteresowanie tym tematem, stworzymy kolejne z ćwiczeniami, przykładami. Więcej informacji o testach automatycznych w Selenium znajdziesz tutaj.