guide visual regression testing with visual testing tools
Ten obszerny przewodnik wyjaśnia wszystko o testach regresji wizualnej. Obejmuje również przegląd bezpłatnych i komercyjnych narzędzi do testowania wizualnego, takich jak Applitools, Percy, Screener itp .:
Wizualne testy regresji lub wizualne testy w oprogramowaniu to działanie zapewniające jakość polegające na sprawdzeniu, czy wizualne aspekty interfejsu użytkownika aplikacji wydają się odpowiednie dla użytkownika. Jest również znany jako wizualne testowanie walidacyjne.
Ma na celu sprawdzenie, czy w interfejsie aplikacji są wyświetlane prawidłowe dane i treść. Dodatkowo weryfikuje również układ i wygląd każdego elementu wizualnego obecnego w interfejsie użytkownika i całego samego interfejsu użytkownika.
Czego się nauczysz:
Wizualne testy regresji
Kiedy mówimy o poprawności Layoutu, oznacza to, że rozmieszczenie, kształt i rozmiar każdego elementu na ekranie są prawidłowe. Elementy nie powinny na siebie nachodzić, powinny być widoczne i nie zakryte.
Element wizualny może tutaj odnosić się do obrazu, strony, części strony lub części obrazu.
Weryfikacja wyglądu oznacza, że czcionka, kolor, jasność, kontrast, gęstość, tekstura, waga wizualna, grafika itp. Elementów wizualnych muszą wyglądać prawidłowo.
Co to są testy regresji wizualnej?
Testy regresyjne zapewniają, że żadna zmiana wprowadzona w oprogramowaniu nie zepsuje niczego, co wcześniej działało dobrze.
Jeśli chodzi o testy wizualne, wizualne testy regresji zapewniają, że żadne problemy ze stylem nie pojawiają się po wprowadzeniu jakichkolwiek zmian w oprogramowaniu. Aplikacja powinna nadal wyglądać tak dobrze, jak była.
Wizualne narzędzie do testowania regresji przechwytuje zrzuty ekranu bieżącego interfejsu użytkownika i porównuje je z oryginalnymi zrzutami ekranu. Zatem wizualne testy regresji przyglądają się różnicom historycznym. Potwierdza, że strona internetowa nadal renderuje się zgodnie z oczekiwaniami w różnych przeglądarkach, nawet po modyfikacjach kodu.
Poniżej przedstawiono zrzut ekranu testu regresji wizualnej wykonanego za pomocą zautomatyzowanego narzędzia:
(wizerunek źródło )
W dzisiejszych praktykach ciągłej integracji wizualne testy regresji stają się bardzo ważne, aby zapewnić, że nowe zmiany nie spowodują bałaganu w układzie, gdy aplikacja jest rozwijana z wersji na wersję i postępuje w różnych przeglądarkach.
Wiele organizacji stosuje wizualne testy regresji do rejestrowania wersji niektórych stron internetowych w celu udokumentowania ich zmian w kolejnych iteracjach.
Znaczenie wizualnych testów walidacyjnych
Bez względu na to, jak poprawnie działa funkcjonalność Twojej aplikacji, nie przyda się ona klientowi, jeśli nie zapewni dobrego interfejsu i wrażeń użytkownika.
W dzisiejszych czasach nie tylko mówimy o UI (interfejs użytkownika), ale także bardzo skupiamy się na UX (doświadczeniu użytkownika). Kiedy naszym celem jest zapewnienie użytkownikom lepszych wrażeń, testowanie wizualne staje się dużo ważne, ponieważ bardziej atrakcyjny projekt wizualny może być postrzegany jako bardziej użyteczny dla użytkownika.
Zobaczmy poniższy przykład z witryny Amazon:
(wizerunek źródło )
Na powyższym obrazku możesz zauważyć, że tekst i obrazy nakładają się i nie są odpowiednio wyrównane. To jest przykład wizualnego błędu, który może powodować złe wrażenia użytkownika, ponieważ klient nie będzie w stanie wykonać zamierzonej czynności w witrynie.
Projekt wizualny kształtuje wrażenia użytkownika na wiele sposobów.
Na przykład,
- Świetne projekty wizualne pomagają budować zaufanie i wiarygodność.
- Wzmacnia wizerunek marki.
- Wpływa na czytelność.
- Tworzy wizualną równowagę na ekranie.
- Prowadzi użytkowników do działań.
- Przekonuje oko do skierowania uwagi na określone elementy strony.
Ponadto w dzisiejszych czasach mamy ogromną różnorodność systemów operacyjnych, przeglądarek internetowych, rozdzielczości ekranu i urządzeń, dlatego kluczowe staje się, aby upewnić się, że interfejs użytkownika wygląda poprawnie w każdej z możliwych kombinacji.
Nawet niewielkie zniekształcenie interfejsu użytkownika może spowodować utratę biznesu. Błędy wizualne mogą być irytujące i nieprzyjemne dla użytkowników oraz powodować u nich niedogodności.
Załóżmy, że zajmujesz się bankowością i oferujesz swoim klientom mobilną aplikację bankową online.
Otrzymujesz skargi od niektórych swoich klientów, że kiedy chcą przelać pieniądze na czyjeś konto i po wypełnieniu wszystkich wymaganych informacji, nie są w stanie znaleźć 'Zatwierdź' przycisk na ekranie i jest to dla nich irytujące doświadczenie.
Po zbadaniu problemu okazuje się, że przycisk przesyłania zostaje ukryty przy określonej rozdzielczości ekranu telefonów komórkowych z systemem Android i dlatego wszyscy klienci z telefonami z systemem Android o tym rozmiarze ekranu nie mogli zobaczyć przycisku przesyłania.
W tym przypadku funkcjonalność aplikacji działała prawidłowo, ale z powodu błędu wizualnego użytkownicy nie mogli wykonać zamierzonych działań w aplikacji. Ten przykład pokazuje, jak ważne jest przetestowanie wizualnych aspektów aplikacji na każdej możliwej konfiguracji przed dostarczeniem aplikacji do klientów.
Niektóre obszary, w których zdecydowanie zaleca się wizualne testy walidacyjne (ponieważ będą miały bezpośredni wpływ na Twoją markę):
- Aplikacje mobilne
- Internet mobilny / responsywny
- Witryny marketingowe
- Systemy zarządzania treścią
- Systemy konsumenckie, takie jak linie lotnicze, podróże, bankowość itp.
Biorąc pod uwagę jego znaczenie, firmy powinny poświęcić sporo wysiłku i pieniędzy na testy wizualne. Jeśli jest używany w połączeniu z istniejącymi testami deweloperskimi, pomoże Ci wykryć problemy wizualne na wczesnych etapach cyklu rozwoju.
Metody i procesy testowania wizualnego
Jako programiści lub testerzy często pracujemy nad testowaniem funkcjonalności aplikacji. Za pomocą ręcznego lub zautomatyzowanego narzędzia sprawdzamy, czy aplikacja działa zgodnie z oczekiwaniami. Takie testowanie funkcjonalności jest bardzo ważne, aby zapewnić płynne działanie aplikacji.
Jeśli jednak dodamy do tego testy wizualne, znacznie poprawiłoby to ogólne testowanie. Dlatego testy te są często wykonywane w połączeniu z testami funkcjonalnymi.
Istnieje kilka metod i procesów testowania, które pozwalają sprostać wyzwaniom wizualnego testowania aplikacji w szerokich konfiguracjach. Dostępnych jest również wiele narzędzi wspierających wizualne testy walidacyjne.
Ogólnie rzecz biorąc, istnieją dwa główne podejścia do wizualnego testowania walidacji, tj. Oparte na kodzie i oparte na konfiguracji. Narzędzia do testowania wizualnego są również podzielone na kategorie w oparciu o te dwa podejścia.
Można to zrobić ręcznie lub w sposób zautomatyzowany. Ze względu na określone wyzwania nie może być w pełni ręczny ani w pełni zautomatyzowany. Ogólnie preferowane jest połączenie podejścia ręcznego i automatycznego.
Poniżej podano 3 różne metody testowania wizualnego, które są ogólnie stosowane.
Zespoły mogą wybrać jedną z tych opcji w zależności od swoich potrzeb:
1) Utwórz dedykowane testy wizualne : Jest to najbardziej zalecana metoda, ponieważ zapewnia pełną kontrolę nad walidacją wizualną. Korzystając z tego podejścia, możesz pisać testy przy umiarkowanym wysiłku. Ale tak, będziesz musiał napisać testy od zera i zajmie to trochę czasu.
# 2) Wstaw wizualne punkty kontrolne do istniejących testów funkcjonalnych: W tej metodzie masz już testy sprawdzające funkcjonalność aplikacji i po prostu dodajesz kilka wizualnych kontroli między tymi testami, aby sprawdzić poprawność stron.
Oczywiście ta metoda ogranicza zakres testów, ale jest to szybki sposób na wstawienie testów wizualnych i skorzystanie z istniejącego kodu testów funkcjonalnych.
# 3) Wstaw niejawną weryfikację wizualną do istniejącej struktury testowej: Ta metoda jest bardzo łatwa do wdrożenia, ponieważ wymaga tylko kilku wierszy kodu. Jednak ma to ograniczenie, że w tym przypadku można również przeprowadzić walidację ogólną. Nie możesz zweryfikować konkretnych komponentów w ramach.
Idąc dalej, omówimy ręczne i automatyczne testy wizualne. Szczegółowo sprawdzimy również wizualne narzędzia i frameworki do testowania.
Ręczne testy wizualne
Firmy programistyczne mają do wyboru dwie opcje przeprowadzania testów wizualnych, tj. Testowanie ręczne lub testowanie automatyczne. Zobaczmy szczegółowo ręczne testy wizualne.
Chociaż testowanie ręczne może być powolne, kosztowne i podatne na błędy, ze względu na subiektywny charakter projektu interfejsu, często nie jest możliwe wykonanie automatycznego testu w celu uchwycenia poprawności każdego scenariusza. Dlatego czasami musimy wybrać równowagę między testowaniem ręcznym i automatycznym.
Ponadto jedna z głównych zalet testowania ręcznego przez człowieka może wykraczać poza zakres testu. Test automatyzacji może uchwycić tylko problem mieszczący się w jego zakresie, ale w teście ręcznym tester może również wykryć inne błędy kosmetyczne i inne rzeczy, które wyglądają nieprawidłowo w interfejsie użytkownika.
Ponieważ testy ręczne są bliższe rzeczywistym działaniom użytkownika, mogą wychwycić błędy układu i problemy projektowe, które są zwykle odkrywane, gdy prawdziwy użytkownik wchodzi w interakcję z aplikacją.
Możesz przejść do ręcznego testowania na wczesnych etapach tworzenia aplikacji, gdy interfejs użytkownika jest niestabilny. Jest również pomocny w testach ad-hoc, gdy potrzebujesz szybkich kontroli na miejscu.
W ręcznych testach walidacji wizualnej tester musi ręcznie sprawdzić wygląd i układ elementów wizualnych. Może to wymagać wykonania aktualnych zrzutów ekranu, a następnie ręcznego porównania ich z podstawowymi zrzutami ekranu, aby zidentyfikować wszelkie luki.
Innym skutecznym sposobem przeprowadzania testów ręcznych jest użycie eksploratora komponentów. W tym celu definiujesz stany testowe, używasz eksploratora, aby wybrać stan i komponent i sprawdzasz to na ekranie. Jednym z takich narzędzi jest React Storybook, w którym można samodzielnie tworzyć komponenty interfejsu użytkownika.
Dzięki tej metodzie tester może przeprowadzić ręczny test komponentu, sprawdzić, jak się renderuje i sprawdzić, czy działa dobrze, czy nie.
najlepszy program do naprawy błędów rejestru
Kroki testowania ręcznego:
- Przejrzyj aplikację i wykonaj znane dobre zrzuty ekranu bazowego.
- Później zrób kolejny zestaw zrzutów ekranu z najnowszej wersji aplikacji.
- Teraz ręcznie porównaj te zrzuty ekranu (linia bazowa z bieżącą), aby znaleźć błędy wizualne.
Zautomatyzowane testy wizualne
Zautomatyzowane testy wizualne to sposób na automatyczną weryfikację, czy interfejs użytkownika wygląda tak, jak powinien.
Korzyści z automatyzacji testów wizualnych polegają na tym, że oferują długoterminową opłacalność, są szybsze niż testy ręczne, dokładniejsze, ponieważ mogą wykluczyć błędy ludzkie i zapewniają doskonałe testy wizualne, są wielokrotnego użytku i przejrzyste, ponieważ oferują automatyczne raporty, które są łatwo i łatwo dostępne dla każdego członka zespołu.
Niektóre ograniczenia zautomatyzowanych testów wizualnych polegają na tym, że mogą wiązać się z dużymi kosztami początkowymi i będziesz musiał poświęcić znaczne wysiłki na utrzymanie testów, aby uwzględnić każdą zmianę.
W testowaniu automatyzacji zakres jest węższy, chyba że wdrożono testowanie zrzutów ekranu. Istnieje również stroma krzywa uczenia się, ponieważ organizacje potrzebują czasu, aby poznać narzędzia do testowania automatyzacji.
Przejście na automatyzację byłoby dobrym wyborem, jeśli musisz wykonać wizualne testy regresji, aby poradzić sobie z częstymi zmianami zachodzącymi w stabilnym interfejsie użytkownika. Zautomatyzowane testy pomagają również w świetnym wizualnym porównaniu zrzutów ekranu.
Zautomatyzowane porównanie zrzutów ekranu zapewnia wysoki stopień precyzji w testowaniu wizualnym i zwiększa zwrot z inwestycji. Automatyczne porównanie zrzutów ekranu może uchwycić te błędy, których nie można wykryć ludzkimi oczami i ręcznym porównaniem. Jest to również pomocne w końcowym zakończeniu testów złożonych historyjek użytkowników.
Dostępnych jest wiele różnych narzędzi open source i komercyjnych do testowania automatycznego.
Poniższy obraz pokazuje, jak wizualną walidację można zautomatyzować przy użyciu dowolnego języka programowania:
(wizerunek źródło )
Poniżej podano ogólny przepływ pracy Visual Test Automation:
(wizerunek źródło )
Jak pokazano na powyższym diagramie przepływu pracy, zautomatyzowane testowanie wizualne składa się z 4 kroków:
Krok 1 : Na tym etapie musimy sterować aplikacją oraz testować i przechwytywać zrzuty ekranu.
Krok 2 : Na tym etapie narzędzie do automatyzacji porównuje te zrzuty ekranu z podstawowymi zrzutami ekranu. Podstawowe zrzuty ekranu to zazwyczaj obrazy wykonane podczas poprzednich testów i sprawdzone przez testera.
Krok 3: Gdy narzędzie uzyska wyniki porównań obrazów, generuje raport, który podkreśla wszystkie znalezione różnice.
Na przykład,Poniższy obraz przedstawia jedno z narzędzi do automatyzacji testów, podkreślające różnice w aplikacji kątowej:
Krok 4 : Na ostatnim etapie tester przegląda raport i sprawdza każdą różnicę, czy jest to błąd, czy ważna zmiana (fałszywe alarmy). Na tej podstawie aktualizowane są obrazy bazowe.
Podczas pierwszego uruchomienia testowego nie masz obrazów bazowych. Zatem obrazy uzyskane w pierwszej serii są ogólnie traktowane jako obrazy podstawowe. Od następnego biegu są porównywane ze zrzutami ekranu.
Najlepsze praktyki dotyczące zautomatyzowanych testów wizualnych
- Wybierz narzędzie, które jest wystarczająco inteligentne, aby ignorować fałszywe alarmy. Narzędzie powinno obsługiwać wygładzanie krawędzi, przesunięcia pikseli itp. Iz tych powodów nie zawiedzie testów.
- Automatyzacja testów powinna być w stanie obsłużyć dynamiczną i ruchomą zawartość.
- Nie polegaj na współczynnikach błędów ani konfiguracji progów. Jedyne, co powinno mieć znaczenie, to to, czy człowiek widzi tę różnicę i czy wpłynie to na wrażenia użytkownika?
- Algorytm automatyzacji powinien być w stanie analizować strukturę strony i umożliwiać porównywanie układu.
- Preferuj sprawdzanie poprawności pełnej strony interfejsu użytkownika zamiast poszczególnych składników. Zapewni to większe i lepsze pokrycie. W przypadku walidacji tylko określonych komponentów można przeoczyć nieoczekiwane błędy.
Zautomatyzowane narzędzia testowe i ramy testowania wizualnego
Obecnie na rynku dostępna jest szeroka gama (ponad 30 plus) narzędzi do automatycznego testowania wizualnego. Niektóre z tych narzędzi są open source, a niektóre są komercyjne. Większość z tych narzędzi działa w ten sam sposób, ale realizują inny przepływ pracy, zgodnie z docelowymi odbiorcami.
W przypadku programistów front-end istnieją dwa rodzaje struktur zaangażowanych w testowanie wizualne. Po pierwsze, potrzebujesz programu uruchamiającego testy, który umożliwia pisanie i wykonywanie testów. Po drugie, aby replikować interakcje użytkowników, potrzebujesz struktury automatyzacji przeglądarki. Te dwie struktury są wspólnie nazywane kodem testów wizualnych.
Za pomocą tych struktur testowych programiści tworzą kod, który imituje rzeczywiste działania użytkownika, takie jak wpisywanie tekstu lub klikanie przycisków. Kod testowy zawiera polecenia do wykonywania zrzutów ekranu w odpowiednich punktach. Gdy test jest wykonywany po raz pierwszy, wykonywany jest początkowy zestaw zrzutów ekranu.
Te zrzuty ekranu służą jako punkt odniesienia do porównania w przypadku jakichkolwiek zmian wprowadzonych w aplikacji. Po utworzeniu linii bazowej programista wykonuje kod w tle. Po znalezieniu zmiany przechwytywany jest zrzut ekranu przedstawiający zmianę.
Program uruchamiający testy porównuje ten zrzut ekranu ze zrzutem ekranu linii bazowej dla tego obszaru kodu. Jeśli zostaną znalezione jakiekolwiek różnice między obrazami, test jest uważany za niepowodzenie i zgłaszany jest błąd wizualny.
Po wykonaniu całego kodu testowego raport jest generowany automatycznie. Ten raport jest ręcznie przeglądany przez ludzkiego testera w celu sprawdzenia wszystkich zrzutów ekranu, które różnią się od obrazów bazowych. Niektóre narzędzia generują obraz porównawczy, aby podkreślić różnicę między rzeczywistym a oczekiwanym zrzutem ekranu.
Jeśli różnica jest spowodowana błędem w kodzie, programista może naprawić ten problem i ponownie uruchomić kod. Jeśli różnica jest spowodowana wymaganą zmianą w interfejsie użytkownika aplikacji, programista sprawdza ten zrzut ekranu i aktualizuje zrzut ekranu linii bazowej, aby można było przejść przyszłe testy.
Testy wizualne obejmują zarówno narzędzia bezpłatne, jak i płatne. Omówmy szczegółowo narzędzia.
Lista najlepszych narzędzi do testów wizualnych
Open source i bezpłatne narzędzia oparte na kodzie / skrypcie
Poniżej wymieniono listę opartych na kodzie wizualnych narzędzi walidacji, które są open-source i dostępne bezpłatnie.
- PhantomCSS (UJs CapserJs)
- FBSnapshotTestCase (Wykorzystuje XCTest)
- Bliźnięta (Używa JS DSL)
- Igła (Używa Pythona)
- Regresja stron Rspec (Wykorzystuje Capibara)
- Pix-Diff (Używa JS i Protractor)
- Różnica wizualna selenu (Używa Java i WD)
- Vizregress (Używa .NET i WD)
- VisualCeption (Używa PHP i CodeCeption)
- Widmo (Używa JS DSL)
Oparte na konfiguracji oprogramowanie typu open source i bezpłatne narzędzia
Oparte na konfiguracji narzędzia do weryfikacji wizualnej, które są open source i dostępne bezpłatnie, są wymienione poniżej w celach informacyjnych:
- BaskstopJS
- dpxdtMake –Depicted
- CSSCritic
- Grunt Photobox
- VIFF
- Zielona cebula
- krasnoludek
- Test wizualny CSS
- Przyciągaj i porównaj
- Grunt-Vigo
- Galen Framework
- Automotion
Nie będziemy zagłębiać się w każde z powyższych narzędzi, jednak omówmy pokrótce te najlepsze.
Phantom CSS jest jednym z bardzo popularnych narzędzi typu open source do weryfikacji wizualnej. Ma 4768 gwiazdek GitHub. Pomaga w automatycznych testach regresji wizualnej. Używa CasperJS do robienia zrzutów ekranu i porównuje je z podstawowymi zrzutami ekranu za pomocą Resemble.js.
(wizerunek źródło )
Generuje różnice obrazu na podstawie różnic w pikselach RGB. To narzędzie jest przydatne tylko wtedy, gdy interfejs użytkownika jest przewidywalny.
FBSnapshotTestCase to także kolejne popularne narzędzie w tej kategorii. Ma 880 gwiazdek GitHub.
Przechwytuje skonfigurowany UIView lub CALayer i wykorzystuje metodę o nazwie render InContext: w celu uzyskania migawki obrazu jego zawartości. Dopasowuje ten obraz do „obrazu referencyjnego” przechowywanego w repozytorium kodu źródłowego i nie przechodzi testu w przypadku niezgodności dwóch migawek.
BackstopJS jest czołowym narzędziem w kategorii narzędzi konfiguracyjnych. Łapie Curveballs CSS. Jest to narzędzie do automatyzacji wizualnego testowania regresji, które może testować responsywny interfejs WWW, dopasowując zrzuty ekranu DOM w czasie.
Jest to łatwe w użyciu narzędzie z kilkoma wspaniałymi funkcjami, takimi jak interfejs raportowania w przeglądarce, zintegrowane renderowanie dockera, raporty JUnit, raporty CLI itp.
Framework Galen jest również jednym ze słynnych frameworków open source do wizualnego testowania walidacyjnego. Za pomocą tego narzędzia możesz testować układ i responsywny projekt aplikacji internetowych w sposób zautomatyzowany.
(wizerunek źródło )
Ta struktura działa dobrze w siatce selenu.
Omówmy teraz niektóre komercyjne narzędzia i struktury dostępne dla wizualnej automatyzacji testów!
Narzędzia komercyjne
1) Applitools
Jest to jedna z bardzo popularnych platform komercyjnych do zautomatyzowanych testów wizualnych i testów regresji wizualnej. To narzędzie zapewnia wizję poznawczą opartą na sztucznej inteligencji. Wykorzystuje sztuczną inteligencję, aby pomóc Ci w kompleksowych testach wizualnych i monitorowaniu.
Dzięki Applitools możesz automatycznie testować setki komponentów interfejsu użytkownika na wszystkich platformach i konfiguracjach bez pisania kodu lub przy użyciu bardzo minimalnego kodu. Obsługuje ponad 40 frameworków testowych i języków.
Obsługuje również proces DevOps, w którym można łatwo zintegrować wizualne przypadki testowe z potokiem CI / CD. To narzędzie umożliwia również tworzenie niestandardowych raportów wizualnych.
Ta struktura jest stosowana przez niektóre czołowe firmy, w tym Sony, SAP, MasterCard i PayPal. Ma też bardzo pozytywne recenzje klientów.
Dostawca oferuje trzy wersje tego frameworka, tj. Starter, Enterprise Public Cloud i Enterprise Dedicated Cloud. Aby uzyskać wycenę, musisz skontaktować się ze sprzedawcą.
Stronie internetowej: Applitools
2) Crossbrowsertesting Visual Testing
Crossbrowsertesting to internetowa platforma testowa opracowana przez firmę SmartBear dla całego procesu testowania. To narzędzie obejmuje testy wizualne, a także testy regresji wizualnej.
Funkcja testowania zrzutów ekranu udostępniana przez to narzędzie przechwytuje zrzuty ekranu całej strony i szybko pomaga w znajdowaniu wizualnych błędów i śledzeniu wizualnych niespójności. Aby rozpocząć test zrzutu ekranu, musisz podać adres URL i wybrać przeglądarki.
Testy zrzutów ekranu są dostępne dla większości urządzeń stacjonarnych i popularnych urządzeń mobilnych. Możesz łączyć i dopasowywać rozdzielczość swojej przeglądarki, aby przeprowadzać dynamiczne testy responsywne w przeglądarkach komputerowych i urządzeniach mobilnych. Test zrzutu ekranu przechwyci trzy widoki każdej konfiguracji, tj. W oknie, na całej stronie i na całej stronie bez chromowania.
Możesz szybko przefiltrować wyniki testu i zobaczyć wizualne błędy. Możesz także przejść do testu na żywo i debugować lub poprawić wady wizualne. Możesz testować środowiska lokalne i programistyczne za pomocą narzędzia do połączeń lokalnych dostarczanego przez to oprogramowanie.
W przypadku testów regresji wizualnej po pomyślnym wykonaniu testu zrzutu ekranu można po prostu zaplanować go codziennie, co tydzień lub co miesiąc. Narzędzie wyśle również powiadomienia o wynikach testu.
To narzędzie ma zautomatyzowaną wyszukiwarkę do przechwytywania automatycznych zrzutów ekranu tej samej strony w różnych konfiguracjach. W tym miejscu możesz wybrać przeglądarkę bazową, a następnie ocenić obok wyróżnione różnice w układzie.
Oferuje również zaawansowane opcje, które zwiększają wydajność testu. Te opcje obejmują uwierzytelnianie podstawowe, profil logowania, skrypt selenium, opóźnienie zrzutu ekranu, wysyłanie wiadomości e-mail, ukrywanie stałych elementów itp.
Przeczytaj także = >> Jak zrobić zrzut ekranu w Selenium
To drogie narzędzie. Dostępna jest jednak również bezpłatna wersja próbna. Wersja testowa tego narzędzia na żywo będzie kosztować 29 USD miesięcznie, testy automatyczne kosztują 60 USD miesięcznie, a testowanie nieograniczone 100 USD miesięcznie.
Stronie internetowej: Crossbrowsertesting
# 3) Testy wizualne Percy'ego
Percy to jedno z potężnych narzędzi do zautomatyzowanych testów wizualnych. Pozwala na integrację, wykonanie i przegląd testów wizualnych. Integrację można przeprowadzić za pośrednictwem struktur automatyzacji testów, usług CI / CD lub bezpośrednio w aplikacji.
Po integracji możemy przystąpić do wykonywania testów wizualnych wymaganych na aplikacjach i komponentach. Po uruchomieniu testu wizualnego narzędzie Percy wyodrębnia zrzuty ekranu interfejsu użytkownika w różnych przeglądarkach i responsywnych szerokościach. Następnie porównuje linię bazową piksel po pikselu i identyfikuje wszelkie istotne zmiany wizualne w interfejsie użytkownika.
Po wyrenderowaniu zrzutów ekranu możesz przejrzeć je pod kątem problemów wizualnych.
Różnice piksel po pikselu i różnice responsywne zapewniane przez to narzędzie zapewniają doskonałe pokrycie wizualne. Ponadto funkcja stabilizacji migawek minimalizuje fałszywe alarmy.
To jest płatne narzędzie. Jednak oferuje również bezpłatną wersję próbną. Płatne wersje mają trzy smaki, tj. Essential, Business i Enterprise. Wersja Essential kosztuje 29 USD / miesiąc, wersja Business kosztuje 849 USD / miesiąc, a wersja Enterprise jest tworzona na zamówienie zgodnie z Twoimi potrzebami, dlatego jej cena będzie się odpowiednio różnić.
Stronie internetowej: Testy wizualne Percy'ego
# 4) Screener.io
To zautomatyzowane narzędzie do testowania, które umożliwia rejestrowanie i wykonywanie testów w czasie rzeczywistym w chmurze. Przepływy testowe można łatwo zautomatyzować bez konieczności kodowania. Automatycznie wykrywa niespójności interfejsu użytkownika na różnych platformach. Obsługuje również testowanie komponentów podręcznika.
Pozwala na wykonywanie testów wizualnych w połączeniu z testami funkcjonalnymi w tym samym przebiegu testów, co w ten sposób zwiększa ogólne pokrycie testów. Firmy korzystające z screener.io to między innymi Yammer, Microsoft, uber itp.
Pakiet Starter tego narzędzia będzie kosztował około 249 USD miesięcznie, pakiet Perform kosztuje 499 USD miesięcznie, a pakiet Enterprise ma ceny dostosowane do Twoich wymagań.
Stronie internetowej: Screener.io
# 5) test końcowy
endtest to platforma do testowania interfejsu użytkownika, która obsługuje bezkodowe testowanie automatyzacji za pomocą uczenia maszynowego. Umożliwia szybkie tworzenie testów automatycznych, przechowywanie i wykonywanie ich bezpośrednio w chmurze. Mają także rozszerzenie chrome, dzięki któremu możesz nagrywać testy.
To narzędzie ma wiele funkcji, takich jak generowanie losowych danych testowych, zaawansowane asercje, automatyczne kopie zapasowe, geolokalizacja, wideo na żywo, porównanie zrzutów ekranu itp.
Stronie internetowej: endtest
Wniosek
W tym samouczku omówiliśmy, jak ważne są wizualne testy walidacyjne w dzisiejszym scenariuszu, w którym aplikacja musi działać dobrze na wielu konfiguracjach rozmiarów ekranu, urządzeń mobilnych, systemów operacyjnych, rozdzielczości ekranu itp.
Jeśli chcesz zapewnić użytkownikom dobre wrażenia, wizualne testy walidacyjne są równie ważne jak testy funkcjonalne. Połączenie testów wizualnych i funkcjonalnych może zapewnić szeroki zakres testów.
Dostępnych jest wiele różnych narzędzi i struktur o otwartym kodzie źródłowym i komercyjnych, które umożliwiają wizualne testy walidacyjne. Omówiliśmy niektóre z najlepszych narzędzi w tym samouczku. Narzędzia te rzeczywiście mogą pomóc w automatycznych testach wizualnych i testach regresji wizualnej.
Miłego czytania!
rekomendowane lektury
- Najlepsze narzędzia do testowania oprogramowania 2021 (Narzędzia do automatyzacji testów QA)
- Testy alfa i testy beta (kompletny przewodnik)
- Kompletny przewodnik po testach walidacyjnych
- 11 najlepszych narzędzi automatyzacji do testowania aplikacji na Androida (narzędzia do testowania aplikacji na Androida)
- Testowanie bezpieczeństwa sieci i najlepsze narzędzia bezpieczeństwa sieci
- Testy funkcjonalne a testy niefunkcjonalne
- Testing Primer Pobierz eBook
- Różnice między testowaniem jednostkowym, testowaniem integracyjnym i testowaniem funkcjonalnym