Poradnik testowania interfejsu użytkownika: kompletny przewodnik testowania interfejsu użytkownika

kompletny przewodnik testowania interfejsu użytkownika: poradnik testowania interfejsu użytkownika

co to jest testowanie interfejsu użytkownika?

testowanie GUI to proces testowania graficznego interfejsu użytkownika aplikacji w celu zapewnienia odpowiedniej funkcjonalności zgodnie ze specyfikacją. Polega na sprawdzaniu składników aplikacji, takich jak przyciski, ikony, pola wyboru, Kolor, menu, okna itp.

dynamika wizualna aplikacji internetowej odgrywa kluczową rolę w akceptacji aplikacji z użytkownikiem.

w związku z tym ta akceptacja przynosi długotrwałe Wiązanie klientów z aplikacją klienta. W tej erze cyfryzacji interfejs użytkownika szybko się zmienia i ma kluczową fortecę w przyciąganiu nowego tłumu potencjalnych klientów.

testowanie interfejsu użytkownika

aby zapewnić dobrą estetykę wizualną aplikacji internetowej, testy interfejsu użytkownika i użyteczności stają się kluczowym aspektem ogólnej praktyki QA. Każda aplikacja, do której można uzyskać dostęp za pośrednictwem adresu URL, jest aplikacją internetową. W takich aplikacjach testujemy głównie front end aplikacji, z której ma korzystać Użytkownik końcowy.

każda przeglądarka wyświetla strony internetowe inaczej, dlatego ważne jest, aby strona wyglądała tak samo w różnych przeglądarkach. Jeśli strona internetowa jest wyświetlana zniekształcona i niezarządzana, spowoduje to opuszczenie strony internetowej. Tak więc strona internetowa powinna przejść testy interfejsu użytkownika, aby uzyskać lepsze wyniki.

testowanie przeglądarek obejmuje poniżej dwa typy:

testowanie funkcjonalności

testowanie różnych funkcji w całej aplikacji. Polega ona na walidacji wszystkich nawigacji, a także wszystkich wartości pól, które są obecne na stronach frontowych, przy użyciu wszystkich pozytywnych i negatywnych scenariuszy.

testowanie interfejsu użytkownika

testowanie współczynnika wyglądu strony internetowej. Współczynnik wyglądu obejmuje Typ wyświetlacza, czcionkę, wyrównanie, przycisk radiowy, pole wyboru itp.

• obszary objęte testami UI to użyteczność, wygląd & wyczucie, elementy sterujące nawigacją/paski nawigacji, instrukcje i styl informacji technicznych, obrazy, tabele, dostępność itp.
• aby sprawdzić dostępność, musimy sprawdzić w W3C-Web Content accessibility guidelines.

Kliknij tutaj, aby uzyskać wytyczne W3C.

podejście do testowania interfejsu użytkownika

wybieramy podzbiór przypadków testowych z przypadków testów funkcjonalnych, który obejmuje wszystkie funkcjonalności aplikacji.

drugim krokiem jest zmodyfikowanie tych przypadków testowych zgodnie z wymaganiami testowania interfejsu użytkownika.

następnym krokiem będzie wykonanie tych przypadków testowych; porównanie wyniku z oczekiwanymi wynikami, a jeśli będzie jakaś różnica, to podniesienie problemu dla tego samego. Testowanie we wszystkich przeglądarkach nie jest możliwe. Zwykle klient decyduje, w której przeglądarce jest wymóg testowania.

jak wiemy, każda przeglądarka wyświetla stronę internetową inaczej, więc nie możemy oczekiwać, że wszystkie przeglądarki będą wyświetlać stronę internetową dokładnie tak samo.

na przykład, rozwijana w windows-firefox będzie inna niż mac-firefox. Takie problemy są dopuszczalne, ponieważ są to narzędzia systemu operacyjnego i musimy je zaakceptować jako takie.

Przeglądarka Bazowa: Zwykle aplikacja jest rozwijana kierowana przeglądarka, która ma być używana głównie przez użytkowników końcowych, jest określana jako przeglądarka bazowa.

często występujące defekty interfejsu użytkownika

• problemy z wyrównaniem przycisków
• niespójne odstępy między etykietami lub polami tekstowymi
• uszkodzone etykiety, tj. Etykieta jednowierszowa wyświetlana w dwóch wierszach
• niewspółosiowość między polami tekstowymi, ikonami informacji, etykietami lub rozwijanymi
• nakładanie się pól
• pola niekompletne
• dane na stronie są niepoprawne; niektóre przesunięcia czasowe w górę lub w dół
• W dowolnej przeglądarce, podczas wybierania jakiejś akcji, odpowiednia akcja nie dzieje się
• Zmiana rozmiaru nie działa zgodnie z oczekiwaniami
• czas wygaśnięcia sesji jest bardzo krótki lub bardzo długi dla niektórych przeglądarek
• problemy związane z przeglądarką-kilka pól nie można edytować po wprowadzeniu danych w jednej przeglądarce, ale można edytować w innej przeglądarce

klucz wymagania dotyczące interfejsu użytkownika i testu użyteczności

kluczowe wymagania dotyczące testowania interfejsu użytkownika aplikacji internetowej to:

1. dostępność różnych komponentów w interfejsie użytkownika
2. różne stany komponentu interfejsu użytkownika

komponent:

komponent jest elementem składowym, który może być użyty z kombinacją kilku innych komponentów do utworzenia aplikacji. Komponenty mogą być ponownie wykorzystane w całej aplikacji.

przykłady komponentu to przycisk, pole tekstowe, Autosuggest, Checkbox, rozwijane menu itp.

niektóre podstawowe komponenty

pole wyboru: można wybrać jedną lub więcej opcji z komponentu pola wyboru

przyciski radiowe: Gdy trzeba wybrać tylko jedną opcję, przydatne są przyciski radiowe

niektóre zaawansowane komponenty

1. Akordeon: wiele elementów można układać pionowo za pomocą tego komponentu. Każdy element można rozszerzyć, aby wyświetlić zawartość w nim. Można również rozszerzyć więcej niż jeden element.

2. Bułka tarta: jest to bardzo przydatny komponent, który pomaga w nawigacji strony internetowej. Użytkownik może zidentyfikować swoją aktualną lokalizację na stronie internetowej z tego komponentu.

3. Karuzela: W skład karuzeli można włączyć wiele zestawów elementów informacyjnych. Wyszukiwarka sposobów na dole wskazuje, że więcej elementów jest obecnych. Strzałki pomagają w nawigacji w karuzeli. Zwykle nawigacja karuzelowa jest skonfigurowana jako pętla ciągła.

Kliknij tutaj, aby uzyskać więcej przydatnych informacji na temat komponentów UI

Stany komponentów UI

dostępność komponentów opiera się wyłącznie na wytycznych dotyczących wymagań projektu. Będzie się różnić w zależności od projektu.

różne stany interfejsu dla podstawowego komponentu to:

1. Stan niewypełniony
2. Stan wypełniony i aktywny
3. stan normalny i stan domyślny
4. Stan Hover
5. stan wyłączony
6. Stan zamaskowany

Stan niewypełniony:

przed wpisaniem dowolnej wartości w komponencie mówi się, że jest to stan niewypełniony. Stan niewypełniony wyświetla tekst zastępczy, jeśli istnieje. Poniżej znajduje się komponent pola tekstowego.

Stan wypełniony:

komponent z wartością wprowadzoną przez użytkownika jest stanem wypełnionym.

Stan skupienia:

użytkownik ponownie odwiedza komponent, który jest już wypełniony. Komponent powinien wyświetlić kursor, wskazując, że konkretny komponent jest skupiony

stan normalny:

wyświetlenie komponentu o wartości już wprowadzonej przez użytkownika na ekranie jest opisane stanem normalnym.

stan domyślny:

komponent, który wyświetla automatycznie wypełnioną wartość z serwera/zaplecza. Wartość ta może być również edytowana przez użytkownika w niektórych scenariuszach.

Stan najechania kursorem:

najechanie kursorem myszy na komponent podświetla komponent wskazujący akcję najechania kursorem.

przed najechaniem:

po najechaniu kursorem:

stan wyłączony:

komponent jest wyłączony i użytkownik nie może edytować pól.

Stan włączony

stan wyłączony

Stan zamaskowany:

poufne dane, takie jak hasło, mogą być ukryte za pomocą tego komponentu.

najważniejsze wymagania testowania użyteczności aplikacji internetowej to:

1. rodzina czcionek
2. rozmiar czcionki
3. Kolor
4. odstęp między literami
5. wysokość linii
6. Walidacja tła
7. wypełnienie/krycie
8. pomiary komponentów, takich jak długość, szerokość i szerokość
9. lokalizacja/odstępy między komponentami na ekranie

powyższe funkcje użyteczności można przetestować w kodzie lub za pomocą elementu Inspect w aplikacji. Innym łatwiejszym sposobem jest użycie dodatków. Dodatki mogą się różnić w zależności od przeglądarki, w której aplikacja ma być testowana.

szczegóły różnych dodatków do przeglądarek

zalety dodatków:

• oszczędność czasu
• łatwy w użyciu
• jest opłacalny

ograniczenie dodatków:

• błąd paralaksy podczas korzystania z pomiaru
• kompatybilny z różnymi aplikacjami
• kompatybilny z wieloma przeglądarkami

odniesienia do dodatków:

• Inspektor Sieci: Narzędzia programistyczne Apple
• Firebug: Firebug Wiki
• Zmierz to
• Colorzilla

narzędzia do testowania GUI

w świecie technologii dostępnych jest kilka narzędzi, które pomogłyby testerom w testowaniu interfejsu użytkownika.

• Selenium
• HP Unified Functional Testing
• Cucumber
• Coded UI
• Sahi

szczegółowa lista narzędzi GUI dostępna jest w softwaretestinghelp.com sam! Kliknij tutaj.

przykładowe przypadki testowe interfejsu graficznego

1) Sprawdź działanie strzałek karuzeli i wyszukiwarek dróg
2) Sprawdź, czy pole hasła akceptuje wartości tylko w stanie zamaskowanym
3) Sprawdź, czy przycisk „Zapisz” pozostaje nieaktywny, dopóki nie zostaną wprowadzone wszystkie wymagane pola
4) Sprawdź, czy użytkownik może przejść do góry strony za pomocą paska „Góra”
5) Sprawdź, czy prawidłowy komunikat jest wyświetlany, gdy zastosowane filtry nie pobierają żadnych wyników
6) Sprawdź nawigację z linków dostępnych w nagłówkach i stopkach
7) sprawdź wyrównanie przycisków opcji jest dokładne
8) sprawdź, czy można wybrać wiele opcji w polach wyboru naraz
9) sprawdź, czy tytuł każdej sekcji jest pogrubiony
10) Sprawdź zmianę kolorów hiperłączy po kliknięciu

wniosek

strona internetowa jest duszą wielu firm. Jest bardzo konieczne, aby upewnić się, że wygląda dobrze i działa podobnie na różnych przeglądarkach & platform. Tak więc testowanie interfejsu użytkownika jest bardzo ważne i zapewni dużą bazę klientów i dodanie wartości biznesowej.