Utrzymanie kompleksowej jakości dzięki testom wizualnym

Testowanie jest krytyczną częścią przepływu pracy każdego programisty. Pomaga nam to zapewnić, że nasz projekt utrzyma wysoki poziom jakości, a także zapobiec przedostawaniu się nieznośnych robali na wolność.

Ale często testy automatyczne mogą być trudne do opanowania. Pomiędzy nieskończoną ilością kodu, aby upewnić się, że zapewniasz pełne pokrycie, a radzeniem sobie z delikatną naturą testów front-end — gdzie prosta zmiana selektora może całkowicie przerwać cały przepływ pracy — czasami może to wydawać się podjazdem bitwa.

Dodając automatyczne testy wizualne , możemy wyeliminować te niestabilne testy, wyrównując nasze potoki testowe, zapewniając ten zasięg (i nie tylko), korzystając z inteligentnych porównań obrazów za pomocą zrzutów ekranu z naszej witryny lub aplikacji.

Zanim zagłębimy się w testy wizualne, poświęćmy chwilę, aby odświeżyć sobie różne typy testów automatycznych i ich wzajemne dopasowanie. Następnie porozmawiamy o tym, czym dokładnie jest testowanie wizualne i jak może zapewnić kolejny poziom pokrycia testowego Twojego projektu.

Szybkie spojrzenie na niektóre rodzaje testów automatycznych

Testowanie automatyczne to interesująca część cyklu rozwojowego. Niektórzy klienci lub interesariusze są w stanie wyraźnie zobaczyć wartość, jaką zapewniają, ale inni woleliby poświęcić czas na rozwój wyłącznie funkcji.

Czasami może to być sprzeczne z intuicją, gdy celem zautomatyzowanego testowania jest przede wszystkim ochrona firmy lub uniemożliwienie zespołowi spędzania czasu na naprawianiu błędów. Pisanie solidnych testów automatycznych może zapobiec poważnym stratom finansowym! To ostatecznie ryzyko, które niektórzy chętniej podejmują niż inni.

Na szczęście ta wartość nie zawsze jest trudna do sprzedania, a kiedy mamy czas, aby skupić się na automatycznych testach jakości, mamy wiele opcji, jak radzić sobie z tymi testami, takimi jak testy jednostkowe, testy integracyjne, kompleksowe testowanie i testy wizualne (które mogą również zapewnić rozszerzone pokrycie dla pierwszych trzech).

W połączeniu z mocnymi stronami każdego typu testu jesteśmy w stanie poświęcić więcej czasu na pisanie testów, które mogą faktycznie pomóc chronić naszą pracę i oszczędzić frustracji naszych klientów.

Przyjrzyjmy się, jak niektóre z tych strategii testowania wyglądają w praktyce.

Testów jednostkowych

Testowanie jednostkowe skupia się na testowaniu mniejszych, skoncentrowanych obszarów aplikacji . Chcesz sprawdzić, czy funkcja obliczająca sumę zamówienia po promocjach działa prawidłowo? Chciałbyś napisać test jednostkowy.

 function myBusinessLogic(pricePerItem, quantity, discount) { const subtotal = pricePerItem * quantity; return subtotal - ( discount * subtotal ); } expect(myBusinessLogic(2, 4, .1)).toEqual(7.2);

Wspaniałą rzeczą w testach jednostkowych jest to, że są tanie w pisaniu i nie zajmują dużo czasu. Dlatego często można zobaczyć, jak firmy spędzają dużo czasu na tworzeniu zestawu testów jednostkowych, aby uchwycić te szczegółowe fragmenty aplikacji.

Ale z powodu tego skoncentrowanego testowania testy jednostkowe mogą nie obejmować tego, jak te różne elementy współpracują ze sobą, i właśnie wtedy zaczynamy przechodzić do testowania integracyjnego.

Testy integracyjne

Celem testów integracyjnych jest zebranie mniejszych części i składników aplikacji i przetestowanie ich współdziałania . Typowym przykładem może być reakcja określonej części interfejsu użytkownika na interakcje, po których następują żądania do serwera lub bazy danych.

 cy.get('.add-to-cart').click(); cy.url().should('contain', 'cart'); cy.get('.cart li').contains('My Item');

Jest całkiem możliwe, że Twój mały komponent interfejsu użytkownika działa zgodnie z oczekiwaniami. Twoje zdarzenia syntetyczne mogą zostać poprawnie wyzwolone w instancji onClick. Ten kod, który otacza żądania API, może doskonale działać z niektórymi fałszywymi danymi. Ale mogą istnieć dziury między tymi dwoma współpracującymi ze sobą elementami, których twoje testy jednostkowe mogą nie wychwycić.

Testy integracyjne są atrakcyjnym sposobem testowania aplikacji, ale możesz pójść o krok dalej, testując „wszystkie rzeczy”.

Kompleksowe testy

Testowanie typu end-to-end rejestruje całą drogę użytkownika od początku do końca , zapewniając skoncentrowany przepływ pracy. Na przykład, jeśli buduję sklep e-commerce, „szczęśliwą ścieżką” (lub oczekiwaną ścieżką z najmniejszym oporem) będzie znalezienie produktu, dodanie go do koszyka i zapłacenie za te przedmioty. Jeśli piszę test typu end-to-end, uchwyciłbym cały proces, tj. od znalezienia produktu na stronie z listą produktów po zapłacenie za ten przedmiot.

 cy.visit('/products'); cy.get('.product a[href="/product/1234"]').click() cy.url().should('contain', 'product/1234'); ... cy.get('.order-button').click(); cy.url().should('contain', 'receipt'); cy.get('.receipt li').contains('My Item');

Największą zaletą testowania end-to-end jest to, że jest to zasadniczo duży test integracyjny. Przechwytujesz wiele różnych składników aplikacji, w tym sposób działania interfejsu użytkownika, czy interfejsy API odpowiadają poprawnie i czy te elementy współpracują ze sobą.

Problem polega na tym, że testowanie typu end-to-end, a nawet testowanie integracji, zajmuje więcej czasu na napisanie, a także znacznie dłużej. Jak więc możemy skorzystać ze wszystkich naszych opcji testowania i stworzyć zestaw testów, które zapewnią skuteczny sposób na pokrycie naszej aplikacji?

Wykorzystywanie różnych rodzajów testów

Istnieje wiele różnych sposobów myślenia, które ogólnie opisują, ile testów każdego rodzaju należy poświęcić czas na pisanie.

Mike Cohn wymyślił koncepcję „piramidy testowej” w swojej książce Succeeding with Agile .

Twierdzi, że powinieneś pisać więcej testów jednostkowych, gdzie ich pisanie jest tańsze i szybsze w uruchomieniu. Podczas gdy jego oryginalny diagram opisuje różne testy nieco inaczej, w miarę jak skłaniasz się bardziej do testowania typu integracyjnego, ich uruchamianie staje się wolniejsze i droższe w pisaniu. Chociaż te testy są cenne, nie chcesz mieć tylu integracji lub kompleksowych testów, jak w przypadku testów jednostkowych.

Zachowanie tej równowagi może pomóc Ci skoncentrować się na uchwyceniu krytycznych części aplikacji, takich jak logika biznesowa z testami jednostkowymi i ich współdziałanie z testami integracyjnymi, ale Kent C. Dodds twierdzi, że technologia testowania dogoniła do punktu, w którym nie ma dłuższe, duże kompromisy kosztowe związane z pisaniem testów integracyjnych, w czym pojawia się jego koncepcja „trofeum testowego”.

W nowoczesnych środowiskach programistycznych mamy do dyspozycji wiele niesamowitych narzędzi, takich jak Cypress, Selenium i Playwright, z których każdy daje programistom i inżynierom QA możliwość pisania testów, które z łatwością współdziałają z przeglądarkami, takimi jak Chrome i Firefox.

W przypadku Cypressa pisanie testu, który klika przycisk, może wyglądać tak prosto, jak:

 cy.get('#my-button').click()

Jest to prawdopodobnie tak proste, jak sprawdzenie, czy przycisk działa z syntetycznymi zdarzeniami, jeśli nie prostsze. Najlepsze jest to, że testujesz, jak ten przycisk faktycznie działa w przeglądarce.

Niezależnie od tego, który wykres subskrybujesz, ostatecznym celem jest rozważenie różnych opcji między kosztem a szybkością , aby określić odpowiednie dopasowanie do konkretnego zastosowania. Ważne jest, aby nie tylko znaleźć to 100% w raporcie dotyczącym zasięgu, ale także upewnić się, że wrażenia, które zapewniasz odwiedzającym, działają tak, jak powinny.

Jednak bez względu na rodzaj testów, które przeprowadzasz, w testach programistycznych, które wchodzą w interakcję tylko z modelem DOM (Document Object Model) i testują go, brakuje jednego dużego elementu układanki: tego, jak użytkownicy wizualnie widzą tę aplikację.

Czego nie wychwytują tradycyjne rodzaje testów

Ponieważ przeprowadzasz testy jednostkowe, integracyjne i kompleksowe w swojej aplikacji, wszystkie mają jedną wspólną cechę. Wszyscy testują kod.

Mam na myśli to, że nie testują tego, co faktycznie widzi użytkownik Twojej aplikacji.

Jeśli prowadzisz pakiet testów integracyjnych i jak w naszym przykładzie wcześniej, testując, czy ktoś może dodać produkt do koszyka i go kupić, na każdym kroku znajdujesz element w DOM za pomocą kodu i potwierdzasz to działał w ten sam sposób.

Nie sprawdza to np. czytelności tekstu na Twojej stronie. Czy ktoś dodał zmianę CSS, która przypadkowo przesunęła wszystkie rzeczy w lewo i odwróciła je do góry nogami?

Tego typu błędy są określane jako „błędy wizualne”, które mogą zdać wszystkie twoje testy śpiewająco, ale kiedy ktoś faktycznie na nie spojrzy, nie jest to całkiem w porządku lub gorzej, całkowicie bezużyteczne.

Realistycznie rzecz biorąc, nie możemy oczekiwać, że tradycyjne testy zapewnią 100% pełne pokrycie każdego szczegółu interfejsu użytkownika. Pomiędzy nieskończoną ilością stanów aplikacji a faktem, że ciągle dodajemy nowe funkcje, po prostu się nie skaluje.

To właśnie prowadzi nas do nagłówka tej historii: Testy wizualne .

Co to są testy wizualne?

Testy wizualne przechwytują widoczne dane wyjściowe (takie jak zrzuty ekranu) aplikacji i porównują je z tą samą aplikacją w innym momencie.

Zwykle dzieje się tak, najpierw przechwytując zrzut ekranu linii bazowej lub wcześniej przechwycone wystąpienie aplikacji z oczekiwanymi wynikami i porównując każdy nowy test z tą linią bazową.

Ale w miarę rozwoju projektu wszystko się zmienia. W miarę upływu czasu ta linia bazowa zostanie zaktualizowana wraz z Twoją aplikacją, gdy zatwierdzisz nowe różnice wizualne jako zaakceptowane zmiany.

Rodzaje testów wizualnych

Ciekawą rzeczą w testowaniu wizualnym jest to, że istnieją różne sposoby radzenia sobie z tym.

Jednym z podejść do testowania wizualnego jest użycie porównań piksel po pikselu, w których platforma testowa będzie oznaczać dosłownie każdą różnicę, jaką widzi między dwoma obrazami. Chociaż takie porównania stanowią wstęp do testów wizualnych, zwykle są niestabilne i mogą prowadzić do wielu fałszywych trafień.

Jak możesz sobie wyobrazić, podczas pracy z siecią rzeczy mają tendencję do renderowania się nieznacznie różniących się między ładowaniem strony a aktualizacjami przeglądarki. Jeśli przeglądarka renderuje stronę o 1 piksel z powodu zmiany renderowania, wyświetla się kursor tekstowy lub „tylko dlatego”, że wdrożenia mogą zostać zablokowane z powodu tych nieudanych testów.

Twoje testy są również podatne na niepowodzenia w przypadku treści dynamicznych. Na przykład, jeśli przeprowadzasz codzienne testy wizualne piksel po pikselu na stronie głównej tej witryny, Smashing Magazine , dostaniesz wiele nieudanych testów, ponieważ tworzą one coraz więcej treści.

Lepszym sposobem obsługi testów wizualnych jest wykorzystanie technologii, takiej jak sztuczna inteligencja , w której za każdym razem, gdy uruchamiany jest test, platforma testowa inteligentnie patrzy na przechwycony zrzut ekranu w porównaniu z punktem odniesienia.

Może wykryć, że te dwa przechwycenia są różne, a nawet wykryć, czy jest to zmiana zawartości, a nie zmiana układu. Nie oznaczy tego testu jako nieudanego, jeśli coś się nie zmieniło, a nawet możesz dodać reguły, aby ignorować dynamiczne regiony aplikacji, które mogą się zmienić z powodu tej zawartości.

Gdzie pomagają testy wizualne

Testy wizualne rozwijają się, ponieważ pozwalają uchwycić aktualny stan aplikacji dokładnie w taki sposób, w jaki widział ją klient. To sprawia, że ​​jest atrakcyjna dla każdej aplikacji, z którą będą wchodzić w interakcję prawdziwi ludzie.

Przechwytując tę ​​migawkę, zapewnia pokrycie wielu elementów tej aplikacji, a nie tylko pojedynczego szczegółowego składnika, dla którego napisałeś test. Kończy się to uchwyceniem kontekstu wokół tego komponentu, co prowadzi do szerszego zasięgu.

Staje się to świetnym sposobem na zapewnienie szerokiego zasięgu przy niskim obciążeniu . Wracając do piramidy testowej lub trofeum testowego, jesteśmy w stanie zapewnić kompleksową obsługę wszystkich naszych innych testów.

Jak działa testowanie wizualne?

Istota jest prosta — porównywanie dwóch obrazów ze sobą i szukanie różnicy — ale jest to trochę bardziej skomplikowane.

Porównania obrazów

Podczas wdrażania testów wizualnych celem będzie zapewnienie pokrycia krytycznych przepływów pracy, które mogą uchwycić, w jaki sposób prawdziwa osoba korzysta z aplikacji. Często obejmuje to pierwszy ekran, który ktoś może zobaczyć, ale zazwyczaj nie jest to jedyny ekran, który widzi.

Podobnie jak w przypadku tworzenia strategii przeprowadzania tradycyjnych testów, chcesz mieć pewność, że szukasz rzeczywistych interakcji, które kończą się rzeczywistymi wynikami w interfejsie użytkownika, takimi jak dodanie przedmiotu do koszyka lub dodanie ulubionego przedmiotu do listy życzeń.

Mając to na uwadze, będziesz chciał zrobić zrzut ekranu na każdym kroku. Na przykład, jeśli testujesz sklep internetowy, możesz dodać kroki dla następujących czynności:

• Lista produktów załadowana na stronę;
• Strona produktu po wybraniu pojedynczego produktu;
• Interfejs koszyka na stronie po dodaniu produktu do tego koszyka;
• Strona koszyka po przejściu do koszyka;
• Interfejs płatności i wysyłki po wejściu do procesu realizacji transakcji;
• Strona z paragonem po udanym zakupie.

Pozwoli to przechwycić wyniki wszystkich interakcji, gdy ktoś przechodzi przez Twój sklep internetowy, gdzie możesz sprawdzić, czy działa nie tylko funkcjonalnie z perspektywy kodu, ale że dana osoba może faktycznie korzystać z Twojej aplikacji bez przeszkadzające błędy wizualne.

Bity techniczne

Planując zrzuty ekranu, będziesz potrzebować mechanizmu do automatyzacji tych zadań. Coś, co może wchodzić w interakcje z przeglądarką w oparciu o zestaw zadań.

W tym miejscu wkraczają popularne platformy automatyzacji przeglądarek, takie jak Selenium, Cypress i Playwright, w których te platformy testowe wykorzystują interfejsy API przeglądarki do uruchamiania poleceń, znajdowania i klikania rzeczy tak, jak zrobiłby to człowiek, a następnie powiedziałbyś wizualnemu frameworkowi testowemu kiedy wizualnie uchwycić stan interfejsu użytkownika.

W przypadku Cypress i Applitools, Cypress nawigowałby po każdej stronie, a następnie Applitools SDK wyodrębniłby migawkę DOM i wysłał tę migawkę do chmury Applitools, gdzie w końcu generował zrzuty ekranu do porównania.

W tym momencie, w zależności od platformy do testowania wizualnego, otrzymasz zestaw wyników w postaci wyróżnionych różnic lub ładnego zielonego znacznika wyboru, jeśli wszystko wygląda dobrze.

Integracja z istniejącymi frameworkami testowymi

Podobnie jak powyższa integracja Cypress i Applitools, integracja zazwyczaj charakteryzuje się niskim tarciem. Wiele dostępnych platform do testowania wizualnego można zintegrować bezpośrednio z istniejącymi platformami testowymi, w większości zależy to tylko od dostępnych pakietów SDK.

 cy.visit('/product/1234'); cy.eyesOpen({ appName: 'Online Store', testName: 'Product Page' }); cy.eyesCheckWindow(); cy.eyesClose();

Oznacza to, że zazwyczaj nie musisz całkowicie przepisywać zestawu testów, aby wzmocnić testy i uzyskać pokrycie wizualne; możesz dodać te punkty kontrolne do testów, które już masz.

Testy automatyzacji

Na szczęście automatyzacja zadań związanych z programowaniem i testowaniem szybko dojrzewa, zapewniając wiele wspaniałych opcji automatyzacji naszych testów.

Tradycyjne rozwiązania CI/CD, takie jak Jenkins lub Travis CI, umożliwiają uruchamianie testów w ich środowiskach wraz z resztą potoku integracji i wdrażania. Stosunkowo nowe w przestrzeni automatyzacji są narzędzia, takie jak GitHub Actions, które zapewniają podobny mechanizm do tradycyjnych środowisk CI/CD, ale bezpośrednio w istniejącym repozytorium GitHub. To sprawia, że ​​łatwo jest wygrać, gdy próbujesz automatycznie uruchamiać testy i inne zadania kodu, gdzie nie potrzebujesz zupełnie nowego systemu, ale zamiast tego używasz istniejących narzędzi.

 name: Node.js CI on: [push, pull_request] jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - uses: actions/setup-node@v2 with: node-version: 12.x - run: npm ci - run: npm test

Ale niezależnie od środowiska, z którego korzystasz, ostatecznie podlegasz wymaganiom środowiska testowego. Cypress działa całkiem bezproblemowo wszędzie tam, gdzie można zainstalować Node.js, co jest obecnie dość powszechne, o ile masz dostęp do bezgłowej przeglądarki, takiej jak Electron lub Chrome. Inne mogą wymagać trochę dodatkowego środowiska, ale w tym momencie możesz zazwyczaj stworzyć szkielet tego środowiska, jak chcesz, tworząc warunki potrzebne do uruchomienia testów.

Jakie są zalety testów wizualnych?

Testy wizualne zapewnią szeroką gamę korzyści, takich jak te, które już omówiliśmy, ale naprawdę pomogą wszystkim zainteresowanym, w tym dyrektorom, menedżerom produktu, programistom, projektantom i wszystkim innym w zespole.

Na przykład dla dyrektora generalnego lub menedżera produktu zyskujesz pewność, że Twój zakres testów odzwierciedla rzeczywiste wykorzystanie . Dla zespołu programistów zyskujesz taką samą pewność, że za każdym razem, gdy dokonasz zmian, otrzymasz natychmiastową informację zwrotną, eliminując czynnik strachu związany z próbą szybkiego działania. Ale jest też wiele praktycznych korzyści.

Mniej kodu do utrzymania

Podczas integracji z platformą do testowania wizualnego większość Twojego kodu będzie obracać się wokół dwóch rzeczy: interakcji i zrzutów ekranu.

Interakcje polegają zasadniczo na nawigowaniu po aplikacji, znajdowaniu strony lub przepływu użytkownika, który chcesz przechwycić. Niezależnie od tego, jak testujesz, prawdopodobnie będziesz musiał zachować to w takiej czy innej formie.

Z drugiej strony zrzuty ekranu będą obejmować wszystkie twierdzenia, które normalnie napisałbyś w teście. Porównując każdy zrzut ekranu z punktem odniesienia, automatycznie upewniasz się, że każdy element Twojego projektu działa dokładnie zgodnie z przeznaczeniem.

Testy są mniej kruche

A używając tych zrzutów ekranu jako mechanizmu asercji, twoje testy będą mniej kruche i kruche.

Jeśli piszesz asercję przeciwko konkretnej części DOM, na przykład używając identyfikatora lub automatycznie generowanego selektora, ryzykujesz przerwanie testu z jakąkolwiek zmianą w tym komponencie.

Posiadając identyfikator, ktoś może go po prostu przypadkowo usunąć lub zmienić. Może myślałeś, że to tylko w celach funkcjonalnych i zaktualizowałeś go podczas przerabiania rzeczy, co zakończyło się złamaniem testu (przytrafiło mi się!).

Lub jeśli używasz ogólnych selektorów, generowanych automatycznie lub nie, są one zazwyczaj bardzo szczegółowe, ponieważ testujesz bardzo konkretne części aplikacji . Jeśli skończysz zagnieżdżać trochę kodu HTML lub przesuwać trochę rzeczy w kodzie, nawet jeśli nie zmieniłeś wyglądu, może to skończyć się złamaniem tego testu.

Testowanie tego, z czego ludzie faktycznie korzystają

Mówiąc o testowaniu wyglądu, podczas testów wizualnych testujesz to, co faktycznie widzą Twoi goście lub klienci.

Używanie właściwego, semantycznego kodu HTML nie czyni automatycznie użytecznym twojego projektu. Mała zmiana CSS (jak z-index) może całkowicie zmienić użyteczność i wygląd.

Przechwytując zrzut ekranu i porównując rzeczywisty stan aplikacji poprzez interakcje w przepływie użytkownika, możesz upewnić się, że Twoja aplikacja działa zarówno funkcjonalnie, jak i może być używana przez coś więcej niż tylko roboty automatyzujące.

Zalecana literatura : Zarządzanie indeksem CSS Z w dużych projektach

Testowanie rzeczy, o których nie pomyślałeś, aby przetestować

Otrzymujesz również pokrycie różnych części aplikacji, których przetestowanie nawet nie pomyślałeś.

Rozważ listę testów, które masz w swoim pakiecie, są to te, które myślałeś o napisaniu lub napisałeś, ponieważ wcześniej natrafiłeś na błąd. A co z resztą aplikacji?

Ten zrzut ekranu uchwyci więcej szczegółów i kontekstu, których inne testy mogły nie zawierać.

Czego nie obejmują testy wizualne?

Ale testy wizualne nie mają być rozwiązaniem końcowym, które zastąpi cały zestaw testów. Podobnie jak inne rodzaje testów, powinien współistnieć, wypełniając luki w innych i ostatecznie zapewniając bardziej sensowne pokrycie.

Testowanie logiki biznesowej opartej na danych

Podczas przeprowadzania testów wizualnych możesz być w stanie uchwycić niektóre aspekty logiki biznesowej, takie jak upewnienie się, że gdy ktoś doda produkt do koszyka, że ​​matematyka się sprawdzi, ale Twój sklep internetowy prawdopodobnie ma większą różnorodność niż tylko ten jeden produkt.

Nadal ważne jest uchwycenie tej złożonej logiki biznesowej za pomocą testów jednostkowych, upewniając się, że rejestrujesz różne przypadki użycia, takie jak wpływ różnych rabatów na tę sumę.

Kompleksowe testowanie API

Kiedy masz do czynienia z API, możesz pomyśleć o teście wizualnym jak o teście integracyjnym. Jesteśmy w stanie przetestować, że podczas interakcji z przeglądarką nasza logika żądań działa zgodnie z oczekiwaniami. Ale nie zapewnia pełnego wglądu w działanie tego interfejsu API.

Podobnie jak w przypadku logiki biznesowej, Twój interfejs API powinien nadal być wspierany przez zestaw testów , które zapewnią, że działa zgodnie z oczekiwaniami, takich jak testy jednostkowe lub kontrole kondycji.

Pierwsze kroki z testami wizualnymi

Jako kolejne narzędzie w naszym pasie, testy wizualne mogą naprawdę pomóc zapewnić kolejny poziom pokrycia, który pomaga nam utrzymać wysoki poziom jakości naszych aplikacji, ale od czego zacząć?

Dopasowanie do cyklu życia rozwoju

Ponieważ testy wizualne pomagają dążyć do celów wszystkich interesariuszy, mogą one naprawdę pasować do każdej części cyklu rozwoju.

Na przykład, tradycyjnie testy są używane tylko do sprawdzenia, czy kod działa zgodnie z przeznaczeniem, ale możemy również używać testów wizualnych do przekazywania projektów i współpracy UX . Projektanci w zespole mogą podłączyć swoje makiety jako punkt odniesienia i łatwo wykorzystać je do porównania rzeczywistego doświadczenia.

Jednak z perspektywy kodu testowanie wizualne może dobrze się rozwijać w zautomatyzowanych środowiskach, takich jak sprawdzanie żądań ściągnięcia, w środowiskach przejściowych przed wdrożeniem i upewnianie się, że produkcja wygląda dobrze po wdrożeniu.

Możesz nawet uruchomić testy wizualne na cronie, zastępując syntetyczne zdarzenia kontroli kondycji, które zazwyczaj są niestabilne i tak naprawdę nigdy tak naprawdę nie mówią, w jakim stanie jest Twoja aplikacja.

Na szczęście istnieje wiele opcji dotyczących zarówno tego, z jakiej usługi korzystasz, ale także punktów integracji do korzystania z tych usług.

Dostępne rozwiązania do testów wizualnych

Ustalenie, z jakim rozwiązaniem przejść dalej, zależy od wybrania biblioteki lub usługi, której będziesz używać do przeprowadzania testów. Jak omówiliśmy wcześniej, największym wyróżnikiem będzie rodzaj testów wizualnych, jakie zapewniają te usługi.

Wiele platform używa testów wizualnych piksel po pikselu do przeprowadzania kontroli. Obejmuje to narzędzia takie jak Percy i Chromatic, które sygnalizują zmiany między dwoma zrzutami ekranu.

Następnie masz testy wizualne oparte na sztucznej inteligencji, gdzie Applitools jest tak naprawdę jedyną usługą, która obecnie zapewnia taką możliwość. Zamiast po prostu sprawdzać obrazy piksel po pikselu, Applitools inteligentnie porównuje obrazy, unikając wszelkich niestabilnych testów lub fałszywych alarmów , zapewniając znaczące wykrywanie zmian.

Niezależnie od rozwiązania, ostatecznie będziesz musiał zintegrować je ze swoim środowiskiem programistycznym, niezależnie od tego, czy zaczynasz od zera, czy dodajesz je do istniejącej platformy testowej.

Integracja testów wizualnych

Integrując wybraną platformę do testowania wizualnego, masz możliwość rozpoczęcia od zera lub łatwiejszej drogi integracji z istniejącą platformą testową. Narzędzia takie jak Applitools ułatwiają to, a duża różnorodność obsługiwanych zestawów SDK ułatwia przejście do istniejących przepływów pracy.

Dobrym tego przykładem jest sytuacja, w której masz już skonfigurowane i uruchomione Cypress:

 it('should log into the application', () => { cy.get('#username').type('colbyfayock'); cy.get('#password').type('Password1234'); cy.get('#log-in').click(); cy.get('h1').contains('Dashboard'); });

Jeśli przeprowadzasz już testy programistyczne, możesz po prostu nałożyć testy wizualne, aby zapewnić kolejną warstwę pokrycia.

 it('should log into the application', () => { cy.eyesOpen({ appName: 'My App', testName: 'Login' }); cy.get('#username').type('colbyfayock'); cy.get('#password').type('Password1234'); cy.get('#log-in').click(); cy.eyesCheckWindow(); cy.eyesClose(); });

A niektóre pakiety SDK czynią to jeszcze łatwiejszym, gdzie jeśli już korzystasz z biblioteki Storybook, wszystko, co musisz zrobić, to zainstalować pakiet za pomocą npm i uruchomić proste polecenie, wtedy masz pełne pokrycie wszystkich swoich komponentów.

 npm install @applitools/eyes-storybook --save-dev npx eyes-storybook

Ostatecznie największym pytaniem jest, jakiego frameworka testowego będziesz chciał użyć i czy usługa, z której chcesz korzystać, obsługuje tę platformę.

Kreatywne zastosowania testów wizualnych

Poza uzyskaniem kolejnego poziomu pokrycia testowego aplikacji istnieje wiele innych sposobów wykorzystania testów wizualnych.

• Monitorowanie dostępności
  Regularnie przeprowadzaj znaczący test wizualny zamiast typowego monitorowania czasu pracy z delikatnymi zdarzeniami syntetycznymi.
• Współpraca projektowa/UX
  Od przekazywania po problemy z użytecznością, używaj testów wizualnych, aby zapewnić całemu zespołowi medium do współpracy.
• Testowanie dostępności
  Przechwytuj kluczowe problemy, które mogą ograniczać dostępność Twojej aplikacji.
• Migawki historyczne
  Okresowe przeprowadzanie testu wizualnego może pomóc w uchwyceniu migawek, umożliwiając łatwe odwoływanie się do starszego stanu projektu.
• Testowanie lokalizacji
  Dzięki testom wizualnym opartym na sztucznej inteligencji, które są w stanie wykryć zmiany treści, masz możliwość upewnienia się, że wszystko wygląda i działa zgodnie z oczekiwaniami, bez względu na język. Bonus: możesz zmniejszyć koszty porównywania różnych wersji danego języka.

Dodając element wizualny do testów, zyskujesz więcej opcji dodawania znaczących sposobów na utrzymanie wysokiego poziomu jakości aplikacji.