Temat selektorów jeszcze mi się nie wyczerpał. W ogóle im więcej w selektorach siedzę, tym większe mam wrażenie, że ten temat jest dużo szerszy niż mi się wydawało jeszcze miesiąc temu. Dzisiaj opowiem czym jest kropka w selektorach CSS i czym się rożni od użycia klasy jako atrybutu. Spotkałam się już kilka razy w internetach, że te konstrukcje były równoważne.

Nie są. I spieszę z wyjaśnieniem, jaka jest różnica.

>> Więcej o selektorach CSS
>> Czemu generatory selektorów to marny pomysł

Czemu ciągle gadam o selektorach?

Bo są ważne. I wcale nie są takie znowu trywialne.

Gdy rozpoczynałam naukę Selenium, to prawdę mówiąc nie chciało mi się tych selektorów robić za nic w świecie. Wydawało mi się to ekstremalnie nudne wiedząc, że to służy mi jedynie do zlokalizowania elementu, prawdziwe mięcho jest potem. Przeglądarka się sama odpala, klika po elementach, wprowadza jakieś dane, magia się dzieje, wow, wow, fajerwerki. Kto by się tam przejmował selektorami, działa to działa.

Może jak sobie ćwiczymy Selenium, to nam to wystarczy. Ale jak weszłam to realnego projektu to się okazało, że:

• jak nie mam id to nie umiem,
• developerzy wcale nie byli skłonni zmieniać produktu na potrzeby testów (dodawanie id do elementów, które mi były potrzebne),
• jak sobie skopiuje gotowy selektor, a on zaraz nie działa (bo coś się zmieniło w produkcie), to nawet nie wiem dlaczego,
• znalezienie selektora zajmuje mi więcej czasu niż oprogramowanie akcji na elementach,
• testy są niestabilne
• „Nie da się znaleźć tego elementu żadnym selektorem!”
• „Selenium jest głupie”.

Selektory mogą się wydawać proste i do pewnego poziomu są. Schody się zaczynają jak wejdziesz trochę głębiej i zaczniesz rozkminiać jakieś smaczki.

A potem zostajesz lokalnym magikiem.

Czymże jest ta kropka w selektorach CSS?

Opowiadając krótko, kropka służy jako informacja, że to, co się po niej znajduje, jest klasą. Po kropce możemy podać tylko jedną klasę. Jeżeli chcemy zaznaczyć obiekt używając do tego kilku klas, mamy dwa wyjścia:

• złożyć selektor z kilku konstrukcji tego typu, np. tak:

.btn-primary.woocommerce

• użyć klasy jako atrybutu, czyli:

[class='btn-primary woocommerce']

Jest jedno ale – te konstrukcje nie działają identycznie. W pewnych warunkach obie mogą zaspokajać te same testerskie potrzeby i mogą być wystarczające, ale nie robią do końca tego samego. Co dokładnie robią i jakie są różnice pokazuję na poniższym filmie.

Film

Zapraszam na sześciominutowy seans. No i do newslettera, bo tylko tak mogę skutecznie Cię poinformować o nowych wpisach – oczywiście, jeżeli do Ciebie trafiają i chcesz być na bieżąco z moimi wypocinami 😉 Zachęcam również do subskrypcji – dzięki temu nie ucieknie Ci żadne nagranie.