fbpx
goodfirms LOGO Created with Sketch.







    Frontend – co trzeba wiedzieć? Poradnik dla testera frontendu

    12
    lipiec
    2022
    Karol Dobrakowski
    6 minut czytania
    Udostępnij

    Frontend (Vue.js) Developer poszukiwany!

    Zobacz ofertę pracy na Frontend (Vue.js) Developera i aplikuj do naszej firmy już teraz! Pracuj gdzie chcesz i kiedy chcesz!

    Zobacz ofertę
     

    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ść. 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. Ułatwieniach dostępu: z aplikacji korzystają także osoby o wadach wzroku czy słuchu. 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. Wizualnych testach 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. Testach akceptacyjnych: 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. Testach 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. Testach jednostkowych: 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. Testach 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.

    Jak możemy Ci pomóc?
    Porozmawiaj z nami!







      Łukasz Świtek
      Customer Success Manager
      Kliknij, aby podejrzeć
      Wiktor Sobczyk
      Co-Founder, Key Account Manager
      Kliknij, aby podejrzeć