Powrót do: Praktyczne wprowadzenie do testów automatycznych z Playwright
Selektory i szukanie elementów HTML w przeglądarce
Prezentacja
Dodatkowe materiały
Link do testowanej stronyPodczas automatyzacji testów UI kluczowe jest wyszukiwanie elementów na stronie. Z tymi elementami następnie wchodzimy w interakcje np. przyciśnięcie przycisku lub wpisanie tekstu w pole tekstowe. Dzięki temu stymulujemy zachowanie użytkownika i wykonujemy testy.
Znajdować elementy na stronie możemy za pomocą selektorów:
- XPath
- CSS
Zarówno selektory XPath i CSS są to wyrażenia o określonej strukturze i regułach pisania.
Selektory XPath (XML Path) powstał jako język zapytań do formatu XML. Jako że HTML też jest językiem znaczników, to selektory XPath można stosować do HTMLa.
Selektory CSS są częścią ekosystemu CSS – powstały z myślą znajdowania elementów i aplikowania do nich stylów.
Wady i zalety selektorów XPath oraz CSS
Zalety Xpath:
- możliwość nawigacji w dół i w górę drzewa znaczników (można odnieść się do rodzica),
- wiele wbudowanych funkcji (np.
count()albotext()), - łatwa możliwość szukania elementów po fragmencie tekstu,
- możliwość pobrania wartości atrybutów (np.
//*[@id="id_elementu"]/@atrybut).
Wady Xpath:
- wysoki próg wejścia,
- odrobinę wolniejsze od selektorów CSS,
- skomplikowana składnia.
Zalety selektorów CSS:
- relatywnie prosta składnia co przekłada się na szybszą naukę,
- są znane przez front-end developerów,
- są szybsze on selektorów XPath.
Wady selektorów CSS:
- mają mniejsze możliwości niż selektory XPath – brak pewnych funkcji albo możliwości cofania się w górę drzewa.
Czasem, może się zdarzyć, że w projekcie będą wykorzystywane oba typy selektorów. Wszystko zależy od potrzeb i tego, jak łatwo można odszukać dany element.
Dlatego polecamy poznać oba typy selektorów 🙂
Przykładowe selektory
Kilka podstawowych selektorów CSS:
- wyrażenie do wyszukiwania elementów po nazwie klasy:
.nazwa_klasy
- wyrażenie do wyszukiwania elementów po ID elementu (czyli po atrybucie ID):
#id_elementu
- wyrażenie do wyszukiwania elementów po wartości atrybutu:
[atrybut="wartosc"]
Kilka podstawowych selektorów XPath:
- wyrażenie do wyszukiwania elementów po nazwie klasy:
//*[@class="nazwa_klasy"]
- wyrażenie do wyszukiwania elementów po ID elementu (czyli po atrybucie ID):
//*[@id="id_elementu"]
- wyrażenie do wyszukiwania elementów po wartości atrybutu:
//*[@atrybut="wartosc"]
body > section > div > div > div > div
Selektor ten zależy od wielu elementów, których zmiana, może negatywnie wpływać na wynik – szukany element nie zostanie znaleziony, albo zostanie znaleziony błędny element.
Wtedy przydaje się wiedza z selektorów, aby spróbować zoptymalizować powyższy selektor do optymalnej postaci biorąc pod uwagę jego atrybuty, np.:
.login-container
Również różne przeglądarki mogą generować różne selektory – np. FireFox vs. Chrome 😉
Testowanie selektorów w konsoli przeglądarki
Aby przetestować w konsoli selektor CSS, należy użyć następującej konstrukcji:
$$('selektor_CSS')
Czyli na przykład:
$$('.nazwa_klasy')
Aby przetestować w konsoli selektor XPath, należy użyć następującej konstrukcji:
$x('selektor_XPath')
Czyli na przykład:
$x('//*[@class="nazwa_klasy"]')
Linki i zasoby
Linki i zasoby zewnętrzne:
- Darmowy kurs z 50 zadaniami utrwalającymi wiedzę z selektorów XPath – XPath – Zadania
- XPath cheat sheet
Wydawało by się że tamat już znam dobrze, i szkoda czasu na oglądanie tej lekcji. Ale u was zawsze można się czegoś nowego nauczyć. W tym przypadku nie wiedziałem że można w ten sposób wyszukiwać w consoli. Do tej pory używałem tylko CTRL + F w elements
Dzięki i ciesze się, że znajdujesz u nas nowe sposoby na przyśpieszenie i usprawnienie swojej pracy 😀