Selektory CSS 1. Co to jest CSS i do czego służą selektory CSS

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.

Wsparcie merytoryczne

Nie masz aktywnego członkostwa. Wykup dostęp albo Zaloguj się, by móc zadawać pytania.