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.

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 („/”).

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.