Oferty w Twoim regionie
Włącz powiadomienia na pulpicie
Wróć na początek

Okiem testera IT: testy automatyczne aplikacji RWD z użyciem biblioteki Galen

RWD, czyli Responsive Web Design, jest jedną z technik projektowania aplikacji internetowych. Termin ten został po raz pierwszy użyty w artykule Ethana Marcotte’a dla portalu alistapart.com.  W swoim tekście Marcotte opisał, jak tworzyć aplikacje, aby ich rozmiar, układ i wygląd automatycznie dopasowywały się do okna przeglądarki i ekranu, tak by w efekcie aplikacja zyskała na funkcjonalności i czytelności, zarówno podczas wyświetlania na komputerach stacjonarnych, jak i urządzeniach mobilnych. Wspomniany cel można osiągnąć dzięki zastosowaniu odpowiednich arkuszy stylów lub ich fragmentów.

Udział w stosowaniu RWD ma między innymi JavaScript, oraz odpowiednie frameworki wspomagające tę technologię. Zaliczają się do nich Bootstrap, Foundation, Pure oraz Gumby. Jeśli więc zależy nam, aby tworzona przez nas aplikacja spełniała wymóg elastycznego prezentowania treści, a jej obsługa – co szczególnie ważne w przypadku smartphone’ów – była ergonomiczna, postawmy na Responsive Web Design.

Cechy charakterystyczne aplikacji RWD

Żeby lepiej zrozumieć, w jaki sposób testerzy aplikacji mogą efektywnie wykorzystywać RWD, omówmy pokrótce zalety i wady tej techniki projektowania.

Zalety

Responsive Web Design niesie ze sobą wiele korzyści. Oto przegląd najważniejszych z nich.

Czytelność

Aplikacja sama optymalizuje wyświetlanie tak, aby treść była czytelna i jednocześnie dopasowana do nowego formatu.

Dostępność

Aplikacja jest dostępna w wersji na każde urządzenie. Jest również ekonomiczna, ponieważ nie wymaga inwestowania w więcej niż jedną wersję. Ponadto, zdarzają się sytuacje, w których wersja mobilna jest zbudowana na zupełnie innym silniku niż wersja stacjonarna. W efekcie koszty zarządzania obiema stronami są większe niż koszt utrzymywania jednej strony w technologii RWD.

Pozycjonowanie

Aplikacje w technologii RWD można łatwo pozycjonować. Strony zgodne z RWD mają pierwszeństwo w wynikach wyszukiwania Google, czym przewyższają strony, które nie są responsywne. Jest tu jednak mały haczyk – zależność ta zachodzi wyłącznie w przypadku wyszukiwania na smartphone’ach lub tabletach. Wprowadzając takie rozróżnienie, Google dostarczyło jednocześnie Test Optymalizacji Mobilnej. Narzędzie to pozwala testerom i programistom w szybki i prosty sposób sprawdzić, czy dana strona jest dostosowana do urządzeń mobilnych. Wyniki takiej analizy zawierają zrzuty ekranu pokazujące, jak Google widzi tę stronę na urządzeniu mobilnym, a także listę wszelkich znalezionych problemów związanych z obsługą strony na urządzeniach mobilnych.

Wady

Oprócz wyżej wymienionych zalet, technologia RWD ma jednak także pewne minusy wady.

Koszty

Musimy liczyć się z tym, że utrzymanie kilku wersji aplikacji może być kosztowne – problem ten dobrze jest mieć na uwadze na etapie projektowania, kodowania oraz wdrażania witryny. Ponadto, musimy też pamiętać, że dla każdej wersji aplikacji należy przeprowadzić osobny test, a także sprawdzić jej działanie zarówno w różnych wersjach przeglądarki, jak i na różnych urządzeniach, których nie da się emulować na symulatorach (te ostatnie bowiem, pomimo że znacznie ułatwiają sprawdzanie, nie zawsze dają wiarygodne wyniki). Oznacza to zatem, że do przetestowania każdej wersji serwisu tester aplikacji musi mieć niekiedy inne, osobne urządzenie.

Czas

Dane urządzenie, czy to smartphone, czy tablet, aby wyświetlić aplikację w interpreterze (przeglądarce) musi pobrać jego cały kod. Jest to uciążliwe szczególnie w przypadku użytkowników, którzy nie dysponują szybkim łączem.

Grafika / Layout

Projektując aplikację w technologii RWD, musimy liczyć się z ograniczeniami związanymi z ilością i objętością grafik, które możemy umieścić na stronie responsywnej. Dotyczy to m.in. prezentowanej treści oraz elementów interface’u.

Statystyki

W przypadku aplikacji RWD analiza statystyk click map jest dość skomplikowana. Dzieje się tak, ponieważ musi ona uwzględniać różne wersje serwisu, przeznaczone dla odmiennych urządzeń mobilnych oraz różnych proporcji ekranowych.

Testowanie aplikacji RWD

Testowanie aplikacji RWD powinno być przeprowadzane w procesie cross-browsingu, czyli w oparciu o testy kompatybilności aplikacji internetowej oraz skryptów, wykonywanych po stronie użytkownika w różnych przeglądarkach, rozdzielczościach i proporcjach.

Z punktu widzenia testera aplikacji, istotną kwestią jest także czas, który poświęca on na testy. Wyzwaniem jest tu przede wszystkim konieczność rozszerzenia zakresu obowiązków całego zespołu projektowego; przykładowo, projektowanie strony odbywa się w oparciu o breakpointy, czyli punkty przejścia pomiędzy rozmiarami. Do tego dochodzą również ograniczenia wynikające z braku dostępu do urządzeń, do których wymagań dostosowuje się tworzone aplikacje.

Niemniej jednak, istnieje kilka  rozwiązań, które wspierają testowanie aplikacji RWD i w efekcie ułatwiają testerom pracę.

Wśród nich warto przede wszystkim wymienić:

  • rozszerzenia przeglądarek umożliwiające zmianę rozdzielczości/proporcji,
  • usługi dostarczające w chmurze kombinację OS/przeglądarka,
  • frameworki lub narzędzia do automatycznego testowania wizualnego.

Instalacja wielu przeglądarek

W najprostszej postaci cross-browsingu testowanie witryny na różnych przeglądarkach nie stanowi większego problemu; sprawę załatwia ich instalacja. Standardowo korzysta się najczęściej z takich przeglądarek jak Firefox, Opera, Chrom, Safari (Mac) i Internet Explorer. Większość z nich oferuje możliwość dostosowania okna do popularnych rozdzielczości RWD (np. Google Chrome ma rozbudowany system narzędzi deweloperskich, który pozwala również emulować dane urządzenie mobilne).

Testowanie synchroniczne

Istnieją także narzędzia umożliwiające testowanie synchroniczne; jako przykład można tu wymienić GhostLab lub DeviceLab. Są to programy pozwalające testerom aplikacji połączyć urządzenia w ramach tej samej sieci i uruchomić jednoczesne testowanie w czasie rzeczywistym na wszystkich podłączonych urządzeniach.

Usługi webowe do cross-browsingu

Dobrym rozwiązaniem są również usługi webowe, takie jak Browserstack lub Crossbrowsertesting. Ich zadaniem jest emulacja różnych przeglądarek, systemów operacyjnych i urządzeń mobilnych na zdalnych, przeznaczonych do tego serwerach.

Galen

Galen Framework (Open Source) to narzędzie wspierające testowanie responsywnych aplikacji, stworzone z myślą o testowaniu UX (interface’u użytkownika). Zawiera ono zbiór reguł, które można użyć do opisywania i weryfikacji układu graficznego aplikacji, oraz framework, pozwalający zarówno określić rozmiar przeglądarki, jak również uruchomić testy aplikacji w celu zweryfikowania specyfikacji układu graficznego (tzw. layoutu). Ponadto, Galen pozwala także na generowanie szczegółowych raportów w formacie HTML ze zrzutami ekranu oraz na wizualne porównanie obrazu (heatmap).

Zastosowanie Galena

Dzięki Galenowi jako testerzy aplikacji możemy:

  • otworzyć przeglądarkę w dowolnym rozmiarze oraz wykonać weryfikację wizualną obiektów,
  • przeprowadzić weryfikację opartą na wzajemnym położeniu obiektów,
  • napisać specyfikację łatwym, zrozumiałym językiem,
  • stworzyć zbiór test casów w natywnym języku (test suites) lub zintegrować testy WebDrivera z plikami specyfikacji Galena.

 

Wybrane przykłady składni zbioru reguł:

near

Element w pobliżu innego elementu

textfield:

                                          near button 10px left

textfield:

                                          near button 5 to 15px left

textfield:

                                          near button 5px top

textfield:

                                          near button 5px bottom left

textfield:

                                          near button 5px top, 10px left

Below / above

Element poniżej / powyżej elementu

caption:

                                          above description 10 to 20 px

description:

                                          below caption 10 to 20 px

Left of / right of

Element na prawo / lewo od elementu

textfield:

                                          left-of button 10px

button:

                                          right-of textfield 10px

inside

Element wewnątrz elementu

button:

                                          inside container 10 px top left

button:

                                          inside container 10px left right, 20px top bottom

Element częściowo wewnątrz elementu

button:

                                          inside partly container 10px top left

width / height

Szerokość i wysokość elementu

button:

                                          width 100 px height 25px

button:

                                          width < 101 px

aligned

Wyrównanie elementów

menu_item-1:

                                          aligned horizontally top menu_item-2

centered

Wyśrodkowanie elementu

button:

                                          centered horizontally inside box

on

Wyśrodkowanie elementu

user-picture-label:

                                          on top left edge user-picture 20 px left, 10px bottom

Powyższe przykłady pokazują, jak bardzo naturalnym językiem może się posługiwać tester, tworząc pliki specyfikacji wizualnej aplikacji.

 

Na zakończenie

Przedstawione w niniejszym artykule zastosowania Galena to tylko niewielka część jego funkcjonalności. Omówienie ich wszystkich wykracza poza zakres tematyczny tego tekstu, jednak mam nadzieję, że udało mi się na tyle zainteresować testerów (automatycznych i manualnych) tym narzędziem, że zechcą się oni zapoznać z jego dokumentacją – od tego  bowiem  już tylko mały krok do implementacji Galena w swoich projektach.

Komentarze

Napisz do nas

Przeglądając stronę wyrażasz zgodę na przetwarzanie swoich danych osobowych pozostawianych w czasie korzystania przez Ciebie z Serwisu oraz innych parametrów zapisywanych w plikach cookies przechowywanych na urządzeniu, z którego korzystasz w celach marketingowych, w tym na profilowanie i w celach analitycznych przez "IT KONTRAKT" spółka z ograniczoną odpowiedzialnością z siedzibą we Wrocławiu, ul. Gwiaździsta 66, 53-413 Wrocław i Zaufanych Partnerów IT KONTRAKT Sp. z o.o.