Zapisy otwarte! Dołącz do kursu Selenium w Javie lub Selenium w C#. Tylko do 23.09.2021 do godz. 21:00. Zapisz się tutaj.

XPath 5. Potomkowie i dzieci w XPath

Dzisiejszą lekcją zaczniemy poznawać bardziej zaawansowane metody wyszukiwania elementów, czyli wtedy kiedy musimy się odwołać do pokrewieństwa, by zaznaczyć dany element. Omówimy sobie jak zaznaczać potomków i dzieci w XPath.

Konsola deweloperska i znaczniki

Jeżeli nie znasz konsoli deweloperskiej i nie wiesz czym są znaczniki HTML, zacznij od tej lekcji: Znaczniki i konsola deweloperska. Jeżeli jesteś tutaj z kursu Selenium w C#, to najpewniej masz ją już za sobą 😉

Przewodnik po selektorach CSS i XPath

Przy lekcjach dotyczących selektorów CSS i XPatha, a już szczególnie przy zadaniach, pomocny się może okazać przewodnik po selektorach CSS i XPath.

>> Dostaniesz go tutaj

Potomkowie i dzieci w XPath: linki i materiały

W XPathie mamy możliwość wyszukiwania dzieci i potomków danych elementów. Najpierw musimy zlokalizować rodzica albo przodka, by później móc wejść głębiej w dół i zaznaczyć to, czego potrzebujemy do naszych testów.

To się przydaje szczególnie w sytuacjach, gdy nie jesteśmy w stanie stworzyć unikatowego XPatha dla szukanego elementu (czyli gdy podobnych elementów o takich samych wartościach atrybutów jest więcej). Często jednak na wyższym poziomie w drzewie mamy jakąś różnicę, czyli np. dwa elementy wyglądają tak samo ale są np. w innych sekcjach. To z tej różnicy będziemy właśnie korzystać.

Dzieci

Dzieci danego elementu to elementy, które znajdują się bezpośrednio pod nim w drzewie. Na poniższym przykładzie element p jest dzieckiem elementu div.

<div>
  <p>Jakiś paragraf</p>
</div>

Jak zaznaczyć drugi input w poniższym przykładzie?

<div id="register-section">
  <input type="text" class="nickname">
</div>
<div id="login-section">
  <input type="text" class="nickname">
</div>

Nie posłużymy się niczym, co już znamy, bo w tym przykładzie mamy dwa elementy o tagu input. Oba mają tą samą wartość atrybutu type i class. W zasadzie niczym się te elementy nie różnią… oprócz rodzica.

Każdego z rodziców obu inputów jesteśmy w stanie w sposób jednoznaczny zaznaczyć, dzięki atrybutowi id, który to każdy z tych elementów posiada. Gdy zaznaczymy rodzica, musimy tylko dodać fragment, który z tego rodzica przejdzie do dziecka. Takie coś robimy pojedynczym slashem („/”).

Ukryta treść

Nie masz dostępu do tego kursu. Wykup dostęp albo zaloguj się, by móc zobaczyć pełną lekcję.

W zasadzie już pierwszy XPath z powyższych zadziałałby dla naszego przykładu, ale jeżeli to by nie wystarczyło do jednoznacznego wskazania konkretnego elementu, można także użyć taga albo atrybutów. Można użyć w zasadzie wszystkiego, co już widzieliśmy włącznie z funkcjami text(), contains() i starts-with().

Potomkowie

Potomkowie danego elementu to takie elementy, które znajdują się dowolnie głęboko w drzewie pod danym elementem. Potomkami są wspomniane już dzieci, ale także dzieci tych dzieci, ich dzieci… itd.

Na przykładzie poniższego fragmentu HTML, potomkami diva o klasie „register-section” będą zarówno div znajdujący się pod nim i będący jego dzieckiem, jak i dzieci tego diva, czyli elementy input i button. Gdyby te elementy miały jeszcze jakieś inne pod sobą, to one też by były potomkami diva o klasie „register-section”.

<div id="register-section">
  <div>
    <input type="text" class="nickname">
    <button class="confirm">OK</button>
  </div>	
</div>
<div id="login-section">
  <div>
    <input type="text" class="nickname">
    <button class="confirm">OK</button>
  </div>
</div>

I gdybyśmy w takiej sytuacji chcieli zaznaczyć drugi element input, to już nie będziemy wskazywać dziecka ale właśnie potomka diva, o klasie „login-section”. Od zaznaczania dziecka różni się to tylko slashem: teraz zamiast jednego podamy dwa.

Ukryta treść

Nie masz dostępu do tego kursu. Wykup dostęp albo zaloguj się, by móc zobaczyć pełną lekcję.

Wsparcie merytoryczne

Nie masz dostępu do wsparcia merytorycznego dla tego kursu. Wykup dostęp albo zaloguj się, by móc zadawać pytania.