Tym filmem zaczniemy wspólnie poznawać selektory CSS, które są świetnym narzędziem do lokalizowania elementów na stronie w Selenium, niezależnie od tego czy testy piszemy w Javie, C# czy innym języku.
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
Selektory CSS: linki i materiały
CSS
CSS to kaskadowe arkusze stylów. Odpowiadają one za formę prezentacji strony. Można to rozumieć tak, że za pomocą HTML mówimy co ma się znajdować na stronie (np. lista, link, obrazek, paragraf), a za pomocą stylów CSS mówimy jak to ma być zaprezentowane. Przykładowo możemy ustawić jakiś kolor elementu (color), czcionkę (font-family, font-size, font-weight itp.), marginesy (margin, margin-top, margin-bottom, margin-left, margin-right) itp.
Arkusze stylów składają się z selektorów i deklaracji (czyli par właściwości i ich wartości). Jak dokładnie to wygląda pokazuję na filmie.
Selektory CSS
Selektory CSS pozwalają na wybranie odpowiednich elementów do wystylizowania za pomocą danej deklaracji. Mówiąc prościej, selektory to informacja, które elementy chcemy zaznaczyć i potem przypisać im jakąś właściwość, np. odpowiedni kolor czcionki. To właśnie selektory interesują nas najbardziej, bo ten mechanizm możemy wykorzystać w Selenium do lokalizowania elementów, żeby np. je potem kliknąć albo wprowadzić do nich jakiś tekst.
Selektory CSS nie powstały więc z myślą o testach pisanych w Selenium, ale ten mechanizm został zaadaptowany w Selenium i możemy go wykorzystać używając jednej metody (By.cssSelector(selektor) w Javie oraz By.CssSelector(selektor) w C#).
Na filmie pokazuję kilka przykładowych selektorów wraz z deklaracjami.
Jak sprawdzić selektor CSS
Na filmie pokazuję dwie metody – obie zakładają użycie konsoli deweloperskiej. Jedna to użycie wyszukiwania w zakładce Elements, a druga użycie funkcji dostępnej w zakładce Console w Chrome. Jak ich używać pokazuję na filmie.
Dodatkowe materiały
Jeżeli chcesz mocniej wgryźć się w temat CSS to możesz to zrobić tutaj: MDN Web Docs.