Przebieg procesu testowego aplikacji webowych

Testowanie jest nieodzowną częścią podczas procesu wytwarzania każdego rodzaju oprogramowania i towarzyszy mu od samego początku, aż po wdrożenie projektu w życie.

Jest to przede wszystkim proces mający na celu ocenę jakościową projektu, odszukanie i opisanie zawartych w nim błędów oraz określenie czy dana aplikacja spełnia wymogi UX (User Experience) czyli całości wrażeń, jakich doświadcza użytkownik podczas korzystania z aplikacji.

Podstawowymi celami testowania są:

• Ogólna ocena jakości projektu.
• Wykrycie błędów i szczegółowe opisanie ich, tak aby programista mógł szybko i sprawnie naprawić daną usterkę.
• Omawianie możliwości poprawy oprogramowania poprzez dodanie różnych usprawnień.

W dalszej części postaram się przybliżyć i krótko omówić przykładowy proces testowy aplikacji webowych, zachodzący w firmie Clickray.

Przed wyruszeniem w drogę należy zebrać drużynę.

Zanim rozpoczniemy jakiekolwiek testy, kluczowym jest aby zebrać jak największą ilość danych związanych z testowanym projektem. W dalszym procesie ułatwi nam to przeprowadzenie testów i utrzyma ich jakość na odpowiednim poziomie. Oczywiście następnie należy szczegółowo zapoznać się z nimi.

Do takich danych należą:

• Specyfikacja techniczna aplikacji/modułów.
• Projekt stworzony przez grafika – wersja desktopowa/mobilna
• Dodatkowe wymagania klienta.
• Ustalenie jakimi materiałami w czasie wytwarzania aplikacji dysponowali deweloperzy t.j. kontent, grafiki/zdjęcia/filmy, które mają znaleźć się w aplikacji oraz linki zewnętrzne np: do portali społecznościowych, blogów, innych stron www.

Pamiętajmy, że po każdym kroku testowym i poprawieniu błędów przez dewelopera zmuszeni jesteśmy wykonać re-testy w celu sprawdzenia czy usterka rzeczywiście została usunięta oraz testy regresyjne w celu sprawdzenia czy nie spowodowało to powstania nowego błędu. Wszystko odbywa się w ścisłym porozumieniu z programistami. Narzędziem dzięki któremu proces ten odbywa się sprawnie i szybko w naszym przypadku jest Basecamp – służy on gównie do zarządzania projektami.

Rozpoczęcie procesu testowego.

Krok #1

Kiedy dana aplikacja webowa jest „gotowa”, wtedy rozpoczynamy proces testowy. Oczywiście zdarzają się sytuacje kiedy testy należy rozpocząć wcześniej np: w przypadku kiedy przed dodaniem danego modułu chcemy sprawdzić jego działanie – nazywamy to wówczas testami modułowymi (unit tests). Jednak w tym konkretnym przypadku zastosujemy testy akceptacyjne, czyli testy, których celem nie jest wykrycie błędów, a jedynie uzyskanie formalnego potwierdzenia wykonania oprogramowania o odpowiedniej jakości.

Mówiąc wprost: sprawdzamy czy dana strona zgadza się z projektem, założeniami, zawiera wszystkie elementy (jak np: poprawnie uzupełniony kontent) i wygląda dokładnie tak jak chce tego klient.

Krok #2

Następnym krokiem jest sprawdzenie jak strona działa na różnych systemach i przeglądarkach internetowych. Jeżeli wcześniej zostało to określone w specyfikacji technicznej, testy te mogą trwać krócej – jeżeli nie to wykonujemy testy na najbardziej popularnych systemach i przeglądarkach internetowych.

Dla systemu Windows (10, 8.1, 8, 7, Vista, XP) są to odpowiednio:

• Internet Explorer
• Edge
• Firefox
• Opera
• Chrome

Dla systemów MacOS (Sierra, El Capitan):

• Safari
• Chrome
• Firefox
• Opera

Potrzeba wykonywania powyższych testów bierze się z tego, że każda przeglądarka czy system operacyjny „rządzi się własnymi prawami” – moduły aplikacji webowej pisanej pod przeglądarkę Chrom dla systemu macOS w większości przypadków nie będą poprawnie działać na przeglądarce Internet Explorer dla systemu Windows.

Krok #3

Kiedy błędy znalezione w poprzednim kroku zostaną naprawione możemy przystąpić do testów responsywności. Na czym to polega? Najprościej rzecz ujmując – na sprawdzeniu czy strona wyświetla się odpowiednio na różnych rozdzielczościach, a jej elementy znajdują się w odpowiednich miejscach nie utrudniając użytkownikowi korzystania z aplikacji. Najprostszym narzędziem do wykonywania tego typu testów (bez konieczności używania sporej ilości sprzętu) jest wbudowane w przeglądarkę (w tym przypadku Chrome) standardowe narzędzie testowe.

Krok ten jest kluczowy w procesie testowym, gdyż wyeliminuje on część błędów, które z pewnością pojawią się w następnej fazie testów.

Krok #4

Tutaj czekają nas kolejne testy akceptacyjne – tym razem dla wersji mobilnej. Jeżeli oczywiście klient/grafik dostarczył wcześniej stworzony layout dla widoku mobilnego testowanej przez nas aplikacji. Jeżeli nie – musimy działać na własną rękę w porozumieniu z klientem i jego opinią.

Krok #5

Testy aplikacji na urządzeniach mobilnych.

Jak wiemy, w dzisiejszych czasach na rynku telekomunikacyjnym mamy do czynienia z ogromną ilością sprzętu i systemów mobilnych. Tablety, smartfony, urządzenia Apple – iPady, iPhony i wszelkiego rodzaju smart watch’e czy swego czasu popularne phablety. Każde z tych urządzeń posiada swój własny system operacyjny na który napisano osobne wersje przeglądarek internetowych. Celem tego testu będzie sprawdzenie zgodności aplikacji webowej z danym systemem, przeglądarką i rozdzielczością wyświetlacza (testy responsywności).

Niezastąpionym narzędziem w tych testach z pewnością jest BrowserStack, który pozwala na zdalne połączenie się z wybranym urządzeniem mobilnym.

Dzięki temu mamy możliwość sprawdzenia naszej aplikacji na obecnych oraz starszych wersjach systemów mobilnych takich jak iOS, Android czy Windows Phone. Jednak jak to w życiu bywa, nic nie jest doskonałe i testy przy użyciu BrowserStacka muszą być podparte również testami na urządzeniach fizycznych ponieważ możemy w nie bardziej ingerować, sprawdzać dostępność najnowszej wersji oprogramowania czy przeglądarki zainstalowanej na danym urządzeniu i w każdej chwili uaktualnić ją do najnowszej wersji. Dodatkowo fizycznie możemy sprawdzić jak aplikacja zachowuje się pracując na ekranie dotykowym.

Krok #6

Kolejnym krokiem są testy mające na celu sprawdzenie czy poszczególne fragmenty aplikacji webowej zostały połączone ze sobą w odpowiedni sposób. Przykładowo: czy jeżeli klikniemy w odpowiedni przycisk to dane działanie będzie takie jakie wymaga tego specyfikacja techniczna. Sprawdzamy w ten sposób czy strona nie zawiera pustych linków, czy wszystkie inne są prawidłowe, czy zgadzają się z sitemapą i strukturą strony. Testy te możemy wykonać manualnie albo automatycznie.

Ważnym elementem są również formularze i ich działanie – należy sprawdzić czy dany formularz działa zgodnie z wcześniej wymienionymi założeniami i czy zawiera wszystkie niezbędne elementy.

Krok #7 

W tym kroku sprawdzamy głównie aspekty związane z SEO i optymalizacją strony. Ponieważ nasza aplikacja zbliża się do upragnionego releasu, musimy upewnić się, że po wdrożeniu nie wystąpią żadne błędy związane z tym aspektem. Istnieje wiele narzędzi do tego typu testów. Przykładowymi stronami do tego typu zabiegów są: www.seorch.eu oraz www.website.grader.com które większość pracy wykonają za nas.

Aplikacje te wskażą nam elementy, które wymagają poprawy, takie jak ilość H1 na stronie czy ilość znaków w meta description, jednak to do nas należy ocena, które z tych rzeczy wymagają poprawy.

Krok #8 

Kolejne re-testy, które są ostatnim sprawdzianem przed wdrożeniem projektu w życie. Pomocne w tym przypadku będą spisywane wcześniej (podczas całego procesu testowania) test case’y – zwane przypadkami testowymi. Testy te pomogą nam dokładnie sprawdzić czy wszystko działa tak jak powinno.

Krok #9 – ostatni 

Opisany tutaj krok jest zależny od projektu/klienta oraz możliwości. Jest to final-test strony, która jest już dostępna w Internecie i z której mogą już korzystać inni użytkownicy. Testy te głównie mają na celu sprawdzenie ogólnego działania strony w sieci.

Testowanie to praca żmudna, momentami monotonna (w zależności od projektu), irytująca ze względu na powtarzający się schemat, ale dającą ogromny pożytek – przede wszystkim oszczędza cenny czas programisty, a po dokładnym przetestowaniu klient otrzymuje kompletny, w pełni funkcjonalny produkt.