głębokie zanurzenie w testowaniu CSS: kompletny przewodnik dla programistów

jeśli chodzi o testowanie front-end, testowanie CSS jest często pomijane. Istnieją niewątpliwie poważne wyzwania w testowaniu CSS, ale to nie znaczy, że powinien być odrzucany jako nieistotne narzędzie w ogólnej strategii testowania. W tym poście przedstawimy Ci przewodnik po tej formie testowania, abyś zrozumiał motywacje związane z korzystaniem z niej i znał praktyczne kroki, aby zacząć.

otworzymy post z podstawowymi pytaniami:

• co to jest testowanie CSS?
• dlaczego powinno cię to obchodzić??
• Jak testować CSS?

jak tylko pozbędziemy się podstaw, przeprowadzimy Cię przez listę głównych narzędzi do testowania CSS. Dowiesz się więcej o różnych narzędziach i kategoriach narzędzi w tej przestrzeni.

przed zakończeniem, podzielimy się kilkoma końcowymi przemyśleniami, w tym w jaki sposób Testim Automate może obejść niektóre przeszkody nałożone przez CSS podczas wykonywania automatycznych testów end-to-end.

do dzieła.

podstawy testowania CSS

zacznijmy od odpowiedzi na podstawowe pytania.

co to jest testowanie CSS?

testowanie CSS, jak sama nazwa wskazuje, to proces testowania arkuszy stylów. Dokładniej, odnosimy się do automatycznego testowania CSS. W końcu jest rok 2021, a automatyzacja testów jest niezbędna. Dotyczy to wszystkich poziomów, warstw i form testowania. Testowanie CSS nie jest wyjątkiem.

dlaczego warto dbać o testowanie CSS?

CSS jest członkiem Web trifecta (HTML, CSS i JavaScript). W związku z tym jest to niezbędne dla jakości aplikacji internetowej. Problemy w CSS spowodują, że aplikacja internetowa/Strona internetowa nie będzie poprawnie renderowana.

interfejs użytkownika jest szczególnie wrażliwym obszarem aplikacji, jeśli chodzi o wrażenia użytkownika. W końcu interfejs jest tym, co użytkownik widzi i dotyka-całkiem dosłownie, w przypadku urządzeń mobilnych.

tak więc testowanie CSS powinno być kluczowym elementem testowania interfejsu użytkownika, jeśli Twoja organizacja poważnie myśli o dostarczaniu swoim użytkownikom zachwycających wrażeń.

Jak testować CSS?

możesz przetestować CSS na wiele sposobów. To dlatego, że testowanie CSS nie jest jedną rzeczą; zamiast tego występuje w różnych typach. Cztery główne typy to:

• regresja
• składnia
• projekt
• odniesienie

omówmy teraz każdy z tych typów.

regresja

testowanie regresji CSS jest tym samym starym testowaniem regresji stosowanym do CSS. Testowanie regresyjne jest mniej rodzajem testów-takich jak testy jednostkowe lub testy end-to-end-a bardziej strategią. Polega ona na skonfigurowaniu pakietu testowego w celu wychwycenia regresji lub błędów po zmianach w bazie kodu.

tak więc test regresji CSS sprawdza, czy nie złamiesz stylu strony po zmianie strony.

składnia

ta kategoria odnosi się do technik testowania i narzędzi sprawdzających poprawność składni CSS. W skrócie, to jest jak linter dla CSS.

projekt

Kategoria “projekt” oznacza sprawdzenie, czy CSS przestrzega standardów projektu i organizacji.

Reference

wreszcie, reference CSS testing sprawdza, czy zaimplementowana i wyrenderowana strona wygląda tak, jak powinna. Poczyniono znaczne postępy w tej dziedzinie i wszystko jest o wiele lepsze niż kiedyś w ciemnych wiekach dominacji Internet Explorera.

nie oznacza to jednak, że nie ma już wyzwań. Pomimo wielu głównych przeglądarek dzisiejszych czasów dzielących wspólną podstawę-przeglądarkę Chromium open-source-prawdopodobnie będziesz miał problemy z zapewnieniem, że Twoja strona wygląda i zachowuje się tak samo w co najmniej najczęściej używanych przeglądarkach.

narzędzia do testowania CSS: Oto niektóre z głównych

przeprowadzimy Cię przez niektóre z dostępnych narzędzi, które możesz chcieć sprawdzić.

jak powiedzieliśmy wcześniej, testowanie CSS jest często pomijanym obszarem w testowaniu. Jedną z konsekwencji tego jest zmniejszona liczba dostępnych narzędzi w porównaniu z innymi rodzajami testów.

CSS Lint

CSS Lint jest dokładnie tym, co sugeruje jego nazwa: linterem dla kodu CSS. Możesz uzyskać do niego dostęp na jego stronie internetowej lub zainstalować go jako pakiet npm.

CSS Lint oferuje sprawdzanie składni, oprócz używania reguł do sprawdzania, czy kod nie zawiera spraw. Możesz również napisać własny zestaw reguł.

BackstopJS

BackstopJS to wizualne narzędzie do regresji dla aplikacji internetowych. Robi to, porównując zrzuty ekranu DOM wykonane w czasie. Możesz go łatwo zainstalować za pomocą npm:

BackstopJS renderuje testy z Headless Chrome i może symulować interakcje użytkownika za pomocą skryptów Puppeteer. Możesz dodać go do CI i jest dostarczany ze zintegrowanym renderowaniem Dockera.

Kichot

Kichot jest testem jednostek i integracji dla CSS. Korzystając z tej biblioteki, możesz sprawdzić, jak elementy HTML są renderowane przez przeglądarkę i sprawdzić, jak elementy odnoszą się do siebie. Quixote działa w nowoczesnych przeglądarkach stacjonarnych i mobilnych, ale możesz również użyć narzędzia takiego jak Karma do uruchamiania testów Quixote na wielu przeglądarkach.

możesz zainstalować to narzędzie przez npm:

CSSCritic

CSS Critic to narzędzie do automatycznego testowania regresji CSS.

działa poprzez porównanie aktualnego stanu układu z podanym obrazem referencyjnym. Za każdym razem, gdy zmienia się układ, testy kończą się niepowodzeniem.

możesz uzyskać CSS Critic używając npm:

ważnym ograniczeniem jest to, że CSSCritic działa tylko w Firefoksie i Chrome.

podsumowanie

testowanie CSS jest często pomijaną formą testowania. Co, niestety, ma jakiś sens, ponieważ CSS zawsze był czymś w rodzaju brzydkiego kaczątka trójki internetowej.

jednak ponieważ błędy CSS z pewnością wpływają na interfejs aplikacji internetowej—co z kolei negatywnie wpływa na wrażenia użytkownika-testowanie arkuszy stylów ma ogromne znaczenie, jeśli chcesz zapewnić odwiedzającym świetny UX.

w tym poście widzieliśmy podstawy testowania CSS: co to jest, dlaczego ma znaczenie i jak to robisz. Przeprowadziliśmy Cię również przez niektóre z głównych narzędzi, obejmujących różne kategorie: lintery, testy jednostkowe, testy regresyjne i wizualne testy regresyjne. Teraz wiesz więcej o koncepcji testowania CSS i narzędzi do twojej dyspozycji.

przed zakończeniem, oto ostatnia myśl: CSS jest ważny, i to nie tylko w kontekście testowania CSS. Ma to również znaczenie dla innych rodzajów testów.

na przykład narzędzia do testowania end-to-end często używają nazw klas CSS jako identyfikatorów. Niestety, może to być delikatne podejście. Często programiści używają technik, które w końcu dodają losowe identyfikatory do swoich klas CSS. Przykładem takiego podejścia są moduły CSS.

zastosowanie takich technik często skutkuje kruchymi testami. Wiele narzędzi polega na nazwach klas, aby znaleźć elementy w DOM. Gdy nazwy klas ulegają zmianie, testy kończą się niepowodzeniem, co skutkuje intensywną konserwacją testów.

są jednak lepsze podejścia. Na przykład Testim niedawno dodał funkcję o nazwie filtrowanie i mapowanie lokalizatora. Pozwala Testim na filtrowanie dynamicznej części nazw klas przy określaniu lokalizatorów dla każdego elementu. Poprawia to dokładność lokalizatora, co zapewnia bardziej solidne przypadki testowe. Wypróbuj Testim i filtruj lokalizator. Udanych testów!