Samouczek testowania GUI: kompletny przewodnik testowania interfejsu użytkownika (UI)

gui testing tutorial

Kompletny przewodnik po testowaniu interfejsu użytkownika: samouczek testowania interfejsu użytkownika

Co to jest testowanie GUI?

Testowanie GUI to proces testowania graficznego interfejsu użytkownika aplikacji w celu zapewnienia prawidłowego działania zgodnie ze specyfikacjami. Polega na sprawdzeniu składników aplikacji, takich jak przyciski, ikony, pola wyboru, kolor, menu, okna itp.

java dodając elementy do tablicy

Dynamika wizualna aplikacji internetowej odgrywa kluczową rolę w akceptacji aplikacji przez użytkownika.

W konsekwencji akceptacja ta prowadzi do długotrwałego zniewolenia klientów przez aplikację klienta. W erze cyfryzacji interfejs użytkownika szybko się zmienia i odgrywa kluczową rolę w przyciąganiu nowej rzeszy potencjalnych klientów.

Czego się nauczysz:

• Testowanie interfejsu użytkownika
• Podejście do testowania UI
• Powszechnie występujące błędy interfejsu użytkownika
• Kluczowe wymagania dotyczące interfejsu użytkownika i testów użyteczności
• Kilka podstawowych elementów
• Niektóre zaawansowane komponenty
• Stany składników interfejsu użytkownika
• Narzędzia do testowania GUI
• Przykładowe przypadki testowe GUI
• Wniosek
• rekomendowane lektury

Testowanie interfejsu użytkownika

Aby zapewnić akceptację wizualnej estetyki aplikacji internetowej, testy interfejsu użytkownika i użyteczności stają się kluczowym aspektem ogólnej praktyki zapewniania jakości. 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órego ma korzystać końcowy użytkownik.

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 zniekształcona i niezarządzana, prowadzi to widzów do jej opuszczenia. Dlatego witryna powinna przejść testy interfejsu użytkownika, aby uzyskać lepsze wyniki.

Testy przeglądarki obejmują dwa poniższe typy:

Testowanie funkcjonalności

Testowanie różnych funkcji w całej aplikacji. Obejmuje walidację wszystkich nawigacji, a także wszystkich wartości pól, które są obecne na stronach frontonu, przy użyciu wszystkich pozytywnych i negatywnych scenariuszy.

Testowanie interfejsu użytkownika

Testowanie współczynnika wyglądu i sposobu działania strony internetowej. Współczynnik wyglądu i odczucia obejmuje typ wyświetlacza, czcionkę, wyrównanie, przycisk opcji, pole wyboru itp.

• Obszary objęte testowaniem interfejsu użytkownika to użyteczność, wygląd i zachowanie, elementy sterujące nawigacją / paski nawigacyjne, instrukcje i styl informacji technicznych, obrazy, tabele, dostępność itp.
• Aby przetestować dostępność, musimy sprawdzić wytyczne dotyczące dostępności treści W3C-Web.

Kliknij tutaj aby uzyskać wytyczne W3C.

Podejście do testowania UI

Wybieramy podzbiór przypadków testowych spośród funkcjonalnych przypadków testowych, 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 rezultatami, a jeśli jest jakaś różnica, podniesienie problemu dla tego samego. Nie jest możliwe testowanie we wszystkich przeglądarkach. Zwykle klient decyduje, w której przeglądarce musi przeprowadzić test.

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

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

Przeglądarka podstawowa: Zwykle aplikacja jest opracowywana pod kątem przeglądarki, która ma być używana głównie przez użytkowników końcowych, jest określana jako przeglądarka podstawowa.

Powszechnie występujące błędy interfejsu użytkownika

• Problemy z wyrównaniem przycisków
• Niespójne odstępy między etykietami lub polami tekstowymi
• Zepsute etykiety, tj. Etykieta pojedyncza wyświetlona w dwóch wierszach
• Brak wyrównania między polami tekstowymi, ikonami informacyjnymi, etykietami lub listami rozwijanymi
• Nakładanie się pól
• Niekompletne pola
• Dane na stronie są nieprawidłowo wyrównane; niektóre przesunięte w czasie w górę lub w dół
• W dowolnej przeglądarce, podczas wybierania jakiejś akcji, odpowiadająca jej akcja nie jest wykonywana
• Zmiana rozmiaru nie działa zgodnie z oczekiwaniami
• W niektórych przeglądarkach czas wygaśnięcia sesji jest bardzo krótki lub bardzo długi
• Problemy specyficzne dla przeglądarki - niewiele pól nie jest edytowalnych po wprowadzeniu danych w jednej przeglądarce, ale można je edytować w innej przeglądarce

Kluczowe wymagania dotyczące interfejsu użytkownika i testów 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 składnika interfejsu użytkownika

Składnik:

Komponent to element składowy, którego można używać w połączeniu z kilkoma innymi składnikami w celu utworzenia aplikacji. Komponentów można ponownie używać w całej aplikacji.

Przykłady komponentu obejmują przycisk, pole tekstowe, autosugestię, pole wyboru, menu rozwijane itp.

Kilka podstawowych elementów

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

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

Niektóre zaawansowane komponenty

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

2. Bułka tarta: Jest to bardzo przydatny komponent, który pomaga w nawigacji w witrynie. Za pomocą tego komponentu użytkownik może zidentyfikować swoją aktualną lokalizację w serwisie.

3. Karuzela: Do komponentu karuzeli można włączyć wiele zestawów elementów informacji. Wyszukiwarki na dole wskazują, że obecnych jest więcej elementów. Strzałki pomagają w nawigacji w karuzeli. Zwykle nawigacja karuzelowa jest skonfigurowana jako ciągła pętla.

Kliknij tutaj aby uzyskać bardziej przydatne informacje o składnikach interfejsu użytkownika

Stany składników interfejsu użytkownika

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

Różne stany interfejsu użytkownika dla podstawowego komponentu to:

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

Stan niewypełniony:

Przed wprowadzeniem jakiejkolwiek 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ę składnik pola tekstowego.

Stan wypełniony:

Składnik z wartością wpisaną przez użytkownika jest wypełniony.

Stan skupienia:

Użytkownik ponownie odwiedza już wypełniony komponent. Komponent powinien wyświetlić kursor, wskazując, że fokus jest na konkretnym komponencie

jak posortować tablicę w java

Zwyczajny stan:

Wyświetlanie składnika z wartością wprowadzoną już przez użytkownika na ekranie jest opisywane jako stan normalny.

Stan domyślny:

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

Stan najechania:

Najechanie kursorem myszy na składnik powoduje podświetlenie składnika wskazującego czynność najechania kursorem.

Przed najechaniem:

Po najechaniu:

Stan wyłączony:

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

Stan włączony

Stan wyłączony

Stan zamaskowany:

Za pomocą tego komponentu można ukryć wrażliwe dane, takie jak hasło.

Kluczowe wymagania testowe aplikacji internetowej to:

1. Rodzina czcionek
2. Rozmiar czcionki
3. Kolor
4. Odstępy między literami
5. Wysokość linii
6. Walidacja w tle
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 cechy 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ędza czas
• Łatwy w użyciu
• Jest to opłacalne

Ograniczenie dodatków:

• Błąd paralaksy podczas pomiaru
• Kompatybilny z różnymi aplikacjami
• Kompatybilny z wieloma przeglądarkami

Odniesienia do dodatków:

• Inspektor sieci: Apple Dev Tools
• Firebug: Firebug Wiki
• Zmierz to
• Colorzilla

Narzędzia do testowania GUI

W świecie technologii dostępnych jest kilka narzędzi, które mogą pomóc testerom w testowaniu interfejsu użytkownika.

• Selen
• Zunifikowane testy funkcjonalne HP
• Ogórek
• Kodowany interfejs użytkownika
• Tak właściwie

Szczegółowa lista narzędzi GUI jest dostępna na stronie softwaretestinghelp.com! Proszę kliknąć tutaj .

Przykładowe przypadki testowe GUI

1) Sprawdź działanie strzałek karuzeli i poszukiwaczy drogi
dwa) Sprawdź, czy pole hasła akceptuje wartości tylko w stanie zamaskowanym
3) Sprawdź, czy przycisk „Zapisz” pozostaje nieaktywny do czasu wypełnienia wszystkich wymaganych pól
4) Sprawdź, czy użytkownik może przejść na górę strony za pomocą paska „Górnego”
5) Sprawdź, czy jest wyświetlany odpowiedni komunikat, gdy zastosowane filtry nie pobierają żadnych wyników
6) Sprawdź nawigację za pomocą linków dostępnych w nagłówkach i stopkach
7) Sprawdź, czy ustawienie przycisków opcji jest dokładne
8) Sprawdź, czy jednocześnie można zaznaczyć wiele opcji w polach wyboru
9) Sprawdź, czy tytuł każdej sekcji jest wytłuszczony
10) Po kliknięciu sprawdź zmianę koloru hiperłączy

Wniosek

Strona internetowa to dusza wielu firm. Bardzo ważne jest, aby upewnić się, że wygląda dobrze i działa podobnie na różnych przeglądarkach i platformach. Dlatego testowanie interfejsu użytkownika jest bardzo ważne i zapewni dużą bazę klientów i dodatkową wartość biznesową.

rekomendowane lektury

• Najlepsze narzędzia do testowania oprogramowania 2021 (Narzędzia do automatyzacji testów QA)
• Testy alfa i testy beta (kompletny przewodnik)
• Testing Primer Pobierz eBook
• Testy funkcjonalne a testy niefunkcjonalne
• Kompletny przewodnik dotyczący testów weryfikacyjnych kompilacji (testy BVT)
• Co to jest testowanie interfejsu? Poznaj jego rodzaje, strategię i narzędzia
• Przewodnik po outsourcingu QA: Testowanie oprogramowania Firmy outsourcingowe
• Rodzaje testowania oprogramowania: różne typy testów ze szczegółami