Elementy strony w przeglądarce

Powrót do: Praktyczne wprowadzenie do testów automatycznych z Playwright

Spis treści

Selektory i szukanie elementów HTML w przeglądarce

TIP: Ta lekcja jest częścią rozwijanego Programu Testy Automatyczne z Playwright 🎭

Prezentacja

Dodatkowe materiały

Link do testowanej strony

https://demo-bank.vercel.app/

Podczas 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() albo text()),
ł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.

TIP: Oba typy selektorów posiadają swoje plusy i minusy i nie ma jednego wiodącego typu selektorów, które powinno się zawsze stosować. Z doświadczenia mogę powiedzieć, że selektory CSS są popularniejsze, ale również XPath jest wykorzystywany w wielu projektach.

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"]
```

TIP: Możliwość automatycznego generowania selektorów przez narzędzia developerskie są przydatną opcją. Trzeba jednak pamiętać, że czasem wygenerowane selektory mogą mieć nie optymalną postać, np.:

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')