Rozpoczęcie pracy z testami regresji wizualnej przy użyciu Appium

Dzisiejsze oprogramowanie wymaga płynnej obsługi użytkownika na wielu platformach i urządzeniach. Jednym z najtrudniejszych aspektów w tej domenie jest utrzymanie integralności wizualnej aplikacji. W tym miejscu w grę wchodzą testy regresji wizualnej (VRT), oferujące usprawniony sposób wychwytywania błędów wizualnych i niespójności, które w przeciwnym razie mogłyby pozostać niezauważone. Dla tych, którzy chcą rozpocząć pracę z VRT, Appium oferuje solidną, skalowalną platformę do automatyzacji tego rodzaju testów na szerokiej gamie platform.

Co więcej, usługi takie jakLambdaTest oferują rozwiązanie do orkiestracji testów i wykonywania testów oparte na sztucznej inteligencji na potrzeby testów regresji wizualnej, eliminując potrzebę konfigurowania własnej infrastruktury testowej i zarządzania nią przez zespoły.To podejście oparte na chmurze zapewnia dostęp na żądanie do różnych rzeczywistych przeglądarek i urządzeń, umożliwiając jednoczesne testowanie w wielu środowiskach, skracając czas wykonywania testów i zapewniając spójność wyglądu i funkcjonalności aplikacji internetowych. LambdaTest oferuje również szczegółowe raporty z testów i integrację z popularnymi frameworkami testowymi w celu szybkiej identyfikacji i rozwiązywania problemów.

W tym artykule omówimy podstawy rozpoczęcia pracy z VRT przy użyciu Appium, dzięki czemu będziesz mógł wznieść swoją strategię testowania na wyższy poziom.

Co to jest test regresji wizualnej?

Testowanie regresji wizualnej to technika sprawdzania poprawności stosowana w celu zapewnienia, że ​​zmiany wprowadzone w aplikacji nie będą miały niekorzystnego wpływu na wizualną prezentację interfejsu użytkownika aplikacji (UI). Jego głównym celem jest potwierdzenie, że układ i elementy wizualne są zgodne z wcześniej zdefiniowanymi oczekiwaniami, gwarantując w ten sposób nieskazitelne wrażenia wizualne użytkownika. Te kontrole wizualne obejmują różne atrybuty, takie jak położenie, luminancja, kontrast i kolor przycisków, menu, komponentów, tekstu i innych. Ta metoda jest czasami nazywana testowaniem wizualnym lub testowaniem interfejsu użytkownika.

Jak działają testy regresji wizualnej?

Zasadniczo testy regresji wizualnej polegają na przechwytywaniu migawek interfejsu użytkownika przed modyfikacją, a następnie porównywaniu ich ze zrzutami ekranu wykonanymi później. Wszelkie rozbieżności są następnie podkreślane w celu sprawdzenia przez inżyniera testującego. W praktyce istnieją różne techniki przeprowadzania testów regresji wizualnej. Niektóre z najczęściej używanych są wymienione poniżej:

Ręczne testy wizualne

Metoda ta polega na ręcznej kontroli interfejsu użytkownika bez użycia specjalistycznych narzędzi. Projektanci i programiści poświęcają czas podczas każdego wydania na wizualną kontrolę stron, aktywnie wyszukując wszelkie wady wizualne. Chociaż takie podejście może być pracochłonne i podatne na błędy ludzkie, jeśli zostanie zastosowane do całej aplikacji, jest przydatne do doraźnych lub eksploracyjnych testów interfejsu użytkownika, szczególnie na wczesnych etapach programowania.

Porównanie piksel po pikselu

Technika ta analizuje dwa zrzuty ekranu na poziomie pikseli, ostrzegając inżyniera testowego o wszelkich rozbieżnościach. Porównanie pikseli, zwane również różnicami pikseli, może zidentyfikować wszystkie potencjalne problemy, ale może również wykryć wiele nieistotnych różnic, które są niezauważalne dla ludzkiego oka i nie wpływają na użyteczność (np. Różnice w renderowaniu, wygładzanie lub różnice w dopełnieniu/marginesach ). Inżynier testowy musi skrupulatnie przeglądać te „fałszywie pozytywne wyniki” podczas każdego przebiegu testu.

Porównanie oparte na DOM

Ta metoda porównania opiera się na analizie Obiektowego Modelu Dokumentu (DOM) przed i po zmianie stanu oraz identyfikacji różnic. Chociaż skutecznie podkreśla modyfikacje związane z kodem w DOM, nie zapewnia prawdziwego porównania wizualnego. Często generuje fałszywie negatywne lub pozytywne wyniki, gdy kod pozostaje niezmieniony, ale interfejs użytkownika ewoluuje (np. treść dynamiczna lub treść osadzona) lub gdy kod się zmienia, ale interfejs użytkownika pozostaje statyczny. W związku z tym wyniki badań mogą być niespójne i wymagać dokładnej analizy, aby zapobiec przeoczeniu wad wzroku.

Porównanie wizualnej sztucznej inteligencji

Testy regresji wizualnej wykorzystujące wizualną sztuczną inteligencję wykorzystują wizję komputerową do postrzegania interfejsu użytkownika w sposób podobny do ludzkiego. Dobrze wyszkolona sztuczna inteligencja może pomóc inżynierom testującym poprzez oznaczanie wyłącznie różnic, które zauważyłby ludzki obserwator, eliminując pracochłonne zadanie rozwiązywania problemów „fałszywie dodatnich”, typowych w testach porównawczych pikseli i DOM. Ponadto Visual AI może oceniać zawartość dynamiczną i identyfikować problemy tylko w nieoczekiwanych obszarach lub regionach.

Powody wykonywania testów regresji wizualnej

W tej sekcji wyjaśniono najważniejsze powody, dla których warto przeprowadzać testy regresji wizualnej w aplikacji. Więc czytaj dalej….

Zapewnienie spójności wizualnej

Testy regresji wizualnej pomagają zapewnić spójność interfejsu użytkownika i elementów wizualnych aplikacji mobilnej w różnych wersjach, urządzeniach i platformach. Ta spójność jest ważna dla zapewnienia bezproblemowego doświadczenia użytkownika.

Walidacja zmian projektowych

Po wprowadzeniu zmian projektowych w aplikacji testy regresji wizualnej mogą sprawdzić, czy zmiany te zostały poprawnie wdrożone i czy nie spowodowały niezamierzonych problemów wizualnych.

Szybsza pętla sprzężenia zwrotnego

Testy regresji wizualnej mogą zapewnić programistom i projektantom szybką informację zwrotną, umożliwiając im zajęcie się problemami na wczesnym etapie cyklu rozwojowego. Zmniejsza to ryzyko, że krytyczne wady wizualne dotrą do produkcji.

Lepsze doświadczenie użytkownika

Wizualne usterki i niespójności mogą negatywnie wpłynąć na wygodę użytkownika i zszarganić reputację aplikacji. Wychwytując te problemy za pomocą testów regresji wizualnej, możesz zwiększyć zadowolenie użytkowników.

Testowanie regresyjne dla bibliotek interfejsu użytkownika

Jeśli Twoja aplikacja korzysta z bibliotek lub struktur interfejsu użytkownika innych firm, testy regresji wizualnej pomagają upewnić się, że aktualizacje tych bibliotek nie wprowadzają niepożądanych zmian wizualnych.

Kroki, aby rozpocząć testowanie regresji wizualnej za pomocą Appium

Testy regresji wizualnej przy użyciu Appium obejmują porównywanie elementów wizualnych interfejsu użytkownika aplikacji w celu wykrycia wszelkich niezamierzonych zmian wizualnych pomiędzy różnymi wersjami aplikacji. Oto kroki, jak rozpocząć testy regresji wizualnej przy użyciu Appium:

Krok 1: Skonfiguruj Appium i środowisko testowe

Najpierw upewnij się, że masz zainstalowane i skonfigurowane Appium w swoim systemie. Będziesz także potrzebować biblioteki klienta Appium dla preferowanego języka programowania (np. Java, Python). Ponadto zainstaluj wszelkie niezbędne zależności i narzędzia dla swojego środowiska testowego.

Krok 2: Przygotuj obrazy testowe

Zanim będzie można przeprowadzić testy regresji wizualnej, potrzebujesz zestawu obrazów bazowych reprezentujących oczekiwany wygląd ekranów aplikacji. Przechwytuj te obrazy bazowe, uruchamiając aplikację na różnych urządzeniach/emulatorach i wykonując zrzuty ekranu każdego ekranu. Przechowuj te obrazy w wyznaczonym folderze w projekcie.

Krok 3: Zaimplementuj skrypty testowe

Pisz skrypty testowe, korzystając z biblioteki klienta Appium, aby zautomatyzować proces przechwytywania zrzutów ekranu i wykonywania porównań wizualnych. Twoje skrypty testowe powinny wykonywać następujące czynności:

1. Zainicjuj sterownik Appium, aby uruchomić aplikację na określonym urządzeniu/emulatorze.
2. Poruszaj się po ekranach aplikacji, wykonując czynności powodujące zmiany w interfejsie użytkownika.
3. Przechwytuj zrzuty ekranu, korzystając z funkcji zrzutów ekranu Appium.
4. Zapisz przechwycone zrzuty ekranu w osobnym folderze dla porównania.

Oto przykład, jak kod może wyglądać w Javie przy użyciu klienta Java Appium:

```Java

importuj io.appium.java_client.AppiumDriver;

importuj io.appium.java_client.MobileElement;

importuj io.appium.java_client.android.AndroidDriver;

import org.openqa.selenium.remote.DesiredCapabilities;

importuj java.net.URL;

klasa publiczna VisualRegressionTest {

public static void main(String[] args) zgłasza wyjątek {

// Ustaw żądane możliwości sterownika Appium

Limity DesiredCapabilities = nowe DesiredCapabilities();

caps.setCapability("Nazwaplatformy", "Android");

caps.setCapability("nazwa urządzenia", "emulator-5554");

caps.setCapability("pakiet aplikacji", "twój.pakiet.aplikacji");

caps.setCapability("Aktywność aplikacji", "Twoja.aktywność.aplikacji");

// Zainicjuj sterownik Appium

Sterownik AppiumDriver<MobileElement> = nowy AndroidDriver<>(nowy adres URL("https://localhost:4723/wd/hub"), wielkie litery);

// Wykonuj akcje i rób zrzuty ekranu

// ...

// Zapisz zrzuty ekranu dla porównania

// ..

// Zamknij sterownik

sterownik.zakończ();

}

}

```

Krok 4: Zaimplementuj logikę porównania wizualnego

Do testów regresji wizualnej potrzebny jest mechanizm porównujący przechwycone zrzuty ekranu z obrazami bazowymi. Możesz używać bibliotek porównywania obrazów, takich jak „Resemble.js” lub „Pixelmatch”, aby przeprowadzać porównania piksel po pikselu i obliczać różnice wizualne.

Krok 5: Twierdzenie i raportowanie

W swoich skryptach testowych zaimplementuj asercje w oparciu o wyniki porównania wizualnego. Jeżeli różnice wizualne przekraczają określony próg, należy uznać test za nieudany. Generuj raporty szczegółowo opisujące wyniki testu, w tym wszelkie wykryte różnice wizualne.

Krok 6: Ciągła integracja (CI)

Zintegruj testy regresji wizualnej z potokiem CI/CD, aby mieć pewność, że będą działać automatycznie za każdym razem, gdy pojawią się zmiany w kodzie lub nowe wydania. Pomaga to wychwycić regresje wizualne na wczesnym etapie procesu tworzenia.

Krok 7: Zachowaj obrazy bazowe

W miarę rozwoju aplikacji konieczne będzie aktualizowanie obrazów bazowych, aby odpowiadały nowemu, oczekiwanemu wyglądowi. Dzięki temu uzasadnione zmiany w interfejsie użytkownika nie zostaną pomylone z regresją.

Jak użytkownicy mogą wykonywać VRT za pomocą Appium w teście lambda?

Oto jak użytkownicy mogą przeprowadzać testy regresji wizualnej za pomocą Appium w LambdaTest:

Skonfiguruj konto LambdaTest

Aby rozpocząć, utwórz konto na platformie LambdaTest, jeśli jeszcze go nie posiadasz. Będziesz potrzebować tego konta, aby uzyskać dostęp do infrastruktury testowej. Następnie upewnij się, że zainstalowałeś Appium i wszystkie zależności, jak omówiono powyżej.

Pisz skrypty testowe

Twórz skrypty testowe Appium w celu interakcji z aplikacją mobilną. Skrypty te powinny zawierać kroki poruszania się po aplikacji i wykonywania zrzutów ekranu kluczowych elementów lub ekranów.

Skonfiguruj możliwości testu lambda

Zmodyfikuj skrypty Appium, aby uwzględnić możliwości specyficzne dla LambdaTest. Obejmuje to określenie żądanej platformy (iOS/Android), wersji przeglądarki, typu urządzenia i poświadczeń LambdaTest (nazwy użytkownika i klucza dostępu).

Uruchom testy w LambdaTest

Prześlij swoje skrypty testowe Appium na platformę LambdaTest. LambdaTest udostępnia siatkę Selenium, w której można uruchamiać testy Appium. Siatka ta oferuje szeroką gamę rzeczywistych urządzeń i przeglądarek do testowania.

Wykonaj testy

Wykonaj testy na siatce LambdaTest, uruchamiając je z poziomu interfejsu internetowego. LambdaTest wykona Twoje testy na określonych urządzeniach mobilnych i przeglądarkach, przechwytując zrzuty ekranu w różnych momentach przebiegu testu.

Porównanie wizualne

Po wykonaniu testu LambdaTest generuje zrzuty ekranu przedstawiające różne stany aplikacji. Możesz użyć wbudowanego narzędzia do porównywania wizualnego, aby porównać te zrzuty ekranu z obrazami bazowymi, aby zidentyfikować wszelkie rozbieżności wizualne.

Przeglądaj i analizuj

Przeanalizuj wyniki VRT, aby zidentyfikować różnice wizualne. LambdaTest zapewnia wgląd w zmiany wizualne, podkreślając obszary, w których wykryto rozbieżności.

Automatyczne raportowanie

LambdaTest oferuje funkcje automatycznego raportowania umożliwiające śledzenie wyników testów w czasie, co ułatwia identyfikację trendów i ocenę wpływu zmian na wygląd aplikacji.

Najlepsze praktyki dotyczące pomyślnego testowania regresji wizualnej przy użyciu Appium

Oto kilka najlepszych praktyk, których należy przestrzegać, aby pomyślnie przeprowadzić testy regresji wizualnej przy użyciu Appium:

Wybierz niezawodne urządzenie i matrycę platformy

Wybierz zestaw urządzeń, systemów operacyjnych i rozdzielczości ekranu, które reprezentują najważniejsze kombinacje używane przez Twoich docelowych odbiorców. Ta matryca powinna obejmować różnorodną gamę urządzeń, aby zapewnić spójny wygląd aplikacji w różnych konfiguracjach.

Kontrola wersji obrazów referencyjnych

Prowadź repozytorium kontrolowanych wersji obrazów referencyjnych, które reprezentują oczekiwany wygląd Twojej aplikacji na różnych urządzeniach i platformach. Te obrazy referencyjne posłużą jako punkt odniesienia do porównań podczas testów regresyjnych.

Stabilne i spójne środowisko testowe

Upewnij się, że środowisko testowe jest spójne dla każdego przebiegu testu. Obejmuje to używanie tych samych wersji systemu operacyjnego, wersji Appium i bibliotek w różnych przebiegach testowych. Unikaj wprowadzania niepotrzebnych zmian w środowisku, które mogłyby prowadzić do fałszywie dodatnich wyników testów.

Oddziel zmiany interfejsu użytkownika od zmian funkcjonalnych

Oddziel testy regresji wizualnej od testów funkcjonalnych. Dzięki temu możesz skupić się wyłącznie na różnicach wizualnych, bez rozpraszania się problemami funkcjonalnymi.

Toleruj oczekiwane różnice wizualne

Nie wszystkie różnice wizualne są błędami. Ustaw poziom tolerancji dla akceptowalnych odchyleń wizualnych, aby uwzględnić drobne zmiany w interfejsie użytkownika, takie jak różnice w renderowaniu czcionek, które mogą nie mieć wpływu na ogólne wrażenia użytkownika.

Dynamiczna obsługa treści

Z łatwością obsługuj treści dynamiczne, takie jak reklamy, treści generowane przez użytkowników i dane w czasie rzeczywistym. Może być konieczne wykluczenie tych elementów z porównania lub zaktualizowanie obrazów referencyjnych, aby uwzględnić te dynamiczne zmiany.

Inteligentne strategie czekania

Wdrażaj strategie inteligentnego oczekiwania, aby mieć pewność, że elementy interfejsu użytkownika aplikacji zostaną w pełni załadowane przed wykonaniem zrzutów ekranu. Pomaga to uniknąć fałszywych alarmów spowodowanych niekompletnymi lub częściowo załadowanymi ekranami.

Wykonywanie równoległe

Jeśli to możliwe, przeprowadź testy regresji wizualnej równolegle na wielu urządzeniach i platformach. Skraca to ogólny czas testowania i zapewnia szybszą informację zwrotną na temat potencjalnych rozbieżności wizualnych.

Zautomatyzowane raportowanie i powiadomienia

Skonfiguruj automatyczne raportowanie i powiadomienia, aby ostrzegać zespół w przypadku wykrycia rozbieżności wizualnych. Zapewnia to szybkie działanie i minimalizuje czas potrzebny na rozwiązanie problemów.

Regularna konserwacja testu

W miarę rozwoju aplikacji aktualizuj obrazy referencyjne i dostosowuj testy, aby uwzględnić zamierzone zmiany wizualne. Regularnie przeglądaj i pielęgnuj testy regresji wizualnej, aby mieć pewność, że pozostają one istotne.

Przejrzyj i zweryfikuj ustalenia

Zanim uznasz jakąkolwiek różnicę za rzeczywisty problem, ręcznie przejrzyj zrzuty ekranu, aby sprawdzić, czy różnice są rzeczywistymi błędami, czy po prostu fałszywymi alarmami spowodowanymi dynamiczną zawartością lub drobnymi zmianami wizualnymi.

Ciągłe doskonalenie

Stale oceniaj swoją strategię testów regresji wizualnej i dostosowuj ją w razie potrzeby. Bądź na bieżąco z najnowszymi narzędziami, bibliotekami i najlepszymi praktykami, aby zapewnić efektywność procesu testowania.

Wniosek

Niezależnie od tego, czy chcesz zidentyfikować niezamierzone zmiany, zmniejszyć wysiłek związany z ręczną kontrolą jakości, czy po prostu poprawić spójność wizualną na różnych urządzeniach i rozdzielczościach, VRT jest niezbędnym narzędziem w Twoim arsenale testowym. Jak w przypadku każdej technologii, opanowanie niuansów wymaga czasu, ale korzyści w postaci zaoszczędzonego czasu, mniejszej liczby błędów i bardziej płynnej obsługi mogą być ogromne. Więc po co czekać? Zacznij już dziś korzystać z VRT i Appium i przenieś testowanie aplikacji mobilnych na wyższy poziom.