Odwrócenie warunku: funkcja not() w selektorach CSS i XPath

W testowaniu oprogramowania jest czasami jak w życiu. Bywają sytuacje, w których nie wiemy czego chcemy ale wiemy, czego nie chcemy (przerwa na popicie wodą tego suchara). Chcemy otrzymać element, którego klasa nie jest równa jakiemuś ciągowi znaków. Albo chcemy zaznaczyć diva, który w ogóle nie posiada atrybutu id. To, co pewnie przychodzi Ci do głowy w takiej sytuacji, to odwrócenie warunku. Tworzysz selektor, który wyszuka wszystkie elementy z podaną klasą, a teraz trzeba to wyszukiwanie odwrócić. Odwrócenie warunku w selektorze odbywa się właśnie poprzez funkcję not().

Odwrócenie warunku

Użycie funkcji not() jest możliwe zarówno w selektorach CSS oraz XPath i wygląda podobnie. Wizualna różnica polega na tym, że w selektorach CSS przed not() musisz jeszcze podać dwukropek.

>> Więcej o różnicach pomiędzy selektorami CSS i XPath.

To drobna różnica wynikająca z tego, że selektory CSS różnią się od XPatha budową. Na filmie zobaczysz kilka przykładów użycia tej funkcji dla obu rodzajów selektorów. Pokażę Ci jak wyszukać element, który nie posiada atrybutu o jakiejś wartości. Zobaczysz też jak zaznaczyć element, który w ogóle nie posiada jakiegoś atrybutu. Funkcja not() umożliwia także zlokalizowanie grupy elementów za wyjątkiem elementów o podanym tagu. Możesz również wyszukać element, który nie zawiera jakiegoś ciągu znaków w tekście.

Czy rzeczywiście tego używam?

Z doświadczenia Ci powiem, że jeżeli nie wiesz, że coś takiego można zrobić, to nie będziesz tego używać. Teraz, gdy to piszę, wydaje się to logiczne. Tak było ze mną, dopóki o tej funkcji nie wiedziałam, to kombinowałam inaczej żeby zlokalizować elementy. Ostatnio użyłam tej konstrukcji w zeszłym tygodniu. Pozwoliła mi ona zbudować dużo prostszy i czytelniejszy selektor od tego, który miałam w alternatywie.

Dodam jeszcze, że pracuję na przeglądarce Chrome, ale sprawdzałam też te funkcje na Firefoxie i Edge’u i nie miałam żadnych problemów z ich użyciem.

Film

I podrzucam jeszcze film. Działanie funkcji pokazuje na przykładzie strony nasa.gov oraz przeglądarki Chrome. Miłego oglądania!

Dodaj komentarz: