Frontend – co trzeba wiedzieć? Poradnik dla testera frontendu

Biznes oparty na dostarczaniu technologii nie może skupiać się wyłącznie na backendzie, czyli sposobie działania i wydajności aplikacji. Równie istotne jest doświadczenie użytkownika, na które wpływa strona wizualna programu, jego intuicyjność czy czytelność. Nie można tego pominąć przy tworzeniu aplikacji mobilnych czy aplikacji webowych. Jeśli chodzi o testowanie frontendu poradnik przygotowany przez nasz software house powinien rozwiać wątpliwości w wymienionych kwestiach. Przyjrzyjmy się więc im bliżej.

Czym jest i na czym polega testowanie frontendu?

Najogólniej ujmując, na frontend składa się całe GUI, czyli graficzny interfejs użytkownika. Mowa więc m.in. o przyciskach, odsyłaczach, formularzach czy menu. Dzięki temu odbiorca może poruszać się po stronie, aby znaleźć dla siebie najważniejsze informacje. Testowanie frontendu jest więc istotne z punktu widzenia użytkownika. Bez tego może dojść do sytuacji, w których niektóre elementy aplikacji nie będą poprawnie funkcjonować, co skutecznie zniechęci do odkrywania dalszej zawartości na stronie.

Niestety nie da się o wszystko zadbać w trakcie pisania kodu. To zbyt skomplikowane zajęcie, aby nie dochodziło do przeoczeń. Poprawa też nie jest taka prosta – nierzadko nadpisanie istniejącego już kodu powoduje problemy w innym miejscu. Wobec tego nie obędzie się bez kompleksowego sprawdzenia każdego elementu. Na czym polega testowanie frontendu? Przede wszystkim na weryfikacji wydajności oraz doświadczenia użytkownika. A to opiera się na:

1. Testowanie ułatwień dostępu.

   Wobec tego należy sprawdzić, czy tryb ślepoty barw albo transkrypcja tekstu na obrazie wideo działają w taki sposób, aby umożliwić wszystkim bezproblemowe korzystanie z aplikacji.

2. Wizualne testy regresji.

   To nic innego jak weryfikacja fontu, koloru, poziomu jasności, trybu wyświetlanych grafik, a także rozmieszczenia oraz kształtu obrazów. W praktyce oznacza to porównanie wersji rzeczywistej (wyświetlanej na różnych przeglądarkach i urządzeniach) z modelową.

3. Testy adaptacyjne.

   Ich zadaniem jest analiza jakości kodu w celu upewnienia się, że aplikacja działa zgodnie z założeniami. Jak testować frontend w ten sposób? Należy powierzyć oprogramowanie osobom, które nie miały nic wspólnego z etapem jego powstawania. Dzięki temu uzyskuje się swego rodzaju symulację rzeczywistego użytkowania aplikacji.

4. Testy wydajności.

   Jak łatwo się domyślić, mają one na celu określenie szybkości ładowania strony, responsywności i zdolności do skalowania. Ma to ogromny wpływ na komfort użytkowania oprogramowania.

5. Testy jednostkowe.

   Biorą one pod uwagę każdy poszczególny element składający się na aplikację. To bardzo dokładny i czasochłonny, ale jeden z najważniejszych elementów oceny całego systemu.

6. Testy End-to-End (E2E).

   Inaczej nazywanych kompleksowymi: jak testować frontend z ich pomocą? W przeciwieństwie do jednostkowych obejmują one całość oprogramowania, dzięki czemu uzyskuje się wgląd w zachowanie połączonych między sobą elementów.

7. Analizie funkcjonalności międzyplatformowej i międzyprzeglądarkowej (tzw. cross-platform oraz cross-browser).

   To po prostu sprawdzenie funkcjonalności na różnych przeglądarkach oraz systemach operacyjnych. Wszędzie działanie aplikacji powinno wyglądać tak samo.

Biorąc pod uwagę jedynie powyższe czynniki, można stwierdzić, że test frontendu jest naprawdę kompleksowy.

Testowanie frontendu – wyznaczenie kluczowych celów

To najprostszy etap planowania testów. Dlaczego? Ponieważ w większości przypadków wszystkie aplikacje powinny działać w zbliżony sposób, to znaczy szybko, wydajnie i niezawodnie. Dlatego też łatwo wskazać kluczowe testy. Wśród nich ważną rolę odgrywa responsywność funkcji aplikacji: formularzy, linków i przycisków. Do tego dochodzi jeszcze ich strona wizualna, a więc formatowanie tekstu, umiejscowienie grafik, styl oraz układ.

Każdemu z tych elementów należy nadać odpowiedni priorytet, aby dobrze zorganizować prace i uniknąć błędów. Dla przykładu w aplikacji bogatej w teksty pisane najważniejsze będzie sprawdzenie, czy fonty wyświetlają się poprawnie na wszystkich urządzeniach. Dopiero potem – nawet już po wypuszczeniu produktu na rynek – można przystąpić do testowania pozostałych funkcjonalności jak np. rozmiary obrazów.

Jakie narzędzia do testowania frontendu wybrać?

Na rynku można znaleźć setki różnych narzędzi wspomagających pracę testerów. Nasz poradnik dla testera frontendu wskaże kilka programów, które są godne uwagi. W kolejności alfabetycznej są to:

• Cypress: z jego pomocą programiści frontend mogą szybko testować aplikacje w różnych przeglądarkach w celu weryfikacji zgodności.
• Jest: to bardzo prosty, a przy okazji niezwykle przydatny program. Jego główną zaletą jest przeprowadzanie testów równoległych i automatyczne ustalanie priorytetów w celu przyspieszenia działania.
• Selenium WebDriver: służy do zautomatyzowania testów aplikacji internetowych, aby przeprowadzić weryfikację zgodności.
• TestCafe: darmowe narzędzie do kompleksowych testów End-to-End. Działa na wszystkich popularnych systemach operacyjnych.
• WebDriverIO i WebDriverJS: te narzędzia do testowania frontendu zyskały uznanie dzięki wszechstronności oraz otwartości. Opierają się na wtyczkach, które ułatwiają opracowanie niezawodnych, szczegółowych testów.

Poradnik dla testera frontendu – podsumowanie

Na tym etapie wszystko powinno być już jasne. Dobór narzędzi oraz dostosowanie rodzaju testu do wymagań aplikacji nie sprawi żadnych problemów. Jedyne, co pozostaje, to ustalenie terminu oraz określenie budżetu. Od tego zależeć będzie zakres przeprowadzanych prac. Warto bowiem mierzyć siły na zamiary. W przeciwnym wypadku testy utkną w martwym punkcie albo zużyją więcej zasobów, niż jest to konieczne do perfekcyjnej realizacji.

Mamy nadzieję, że to rozwiało wszelkie wątpliwości na temat tego, jak powinno wyglądać testowanie frontendu Poradnik z pewnością przyda ci się, gdy będziesz szukał inspiracji bądź rozwiązania jakiegoś wyzwania.