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 („/”).
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.
Komentarze
Nie masz aktywnej subskrypcji. Wykup subskrypcję albo zaloguj się, by móc komentować.