Testowanie aplikacji internetowych – proste porównywanie obrazów

Testowanie aplikacji internetowych – proste porównywanie obrazów
  Zapraszamy do lektury artykułu autorstwa Łukasza Złockiego, trenera testerzy.pl, o prostym sposobie na porównanie obrazów za pomocą narzędzia ImageMagick.  

 

Testując aplikacje internetowe często wykorzystuje się zrzuty ekranów (Print Screen) do porównania stanu w jakim znajduje się aplikacja ze stanem oczekiwanym (najczęściej ujętym w specyfikacji). Szczególnie wtedy stosujemy takie rozwiązanie kiedy sprawdzamy nie tyle zawartość co sposób wyświetlania strony np. po wprowadzeniu nowych arkuszy stylów. Dodatkowo kiedy wykorzystujemy automatyzację do testów regresji i testujemy wyświetlanie się danej strony po poprawkach wówczas takie porównywanie obrazów przez specjalne narzędzie bardzo upraszcza nam pracę i skraca czas na poszukiwanie różnic. Zapewne niektórzy zapytają jakim narzędziem możemy robić zrzuty ekranu w testach automatycznych? Tutaj z rozwiązaniem przychodzi nam Selenium, szczególnie jeśli jest to skrypt wykorzystujący API SeleniumRC lub Selenium Webdriver (Selenium 2). Dwa proste polecenia „captureScreenschot()” lub „captureEntirePageScreenschot()” robią zrzut pulpitu lub zrzut całej strony załadowanej do przeglądarki (drugie polecenie działa jedynie w Firefoxie) i zapisują wynik do pliku.

Prostą i darmową aplikacją, którą można wykorzystać do porównywania obrazów jest ImageMagick[1]. ImageMagick jest narzędziem do tworzenia, edycji, komponowania (tworzenia), lub konwersji obrazów bitmapowych. Potrafi odczytywać i zapisywać obrazy w różnych formatach (ponad 100), w tym DPX , EXR , GIF, JPEG, JPEG-2000, PDF, PhotoCD, PNG, Postscript, SVG oraz TIFF. ImageMagick pozwala na zmianę rozmiaru, obrócenie obrazu, stworzenie lustrzanego odbicia, zniekształcenia, przycięcia i transformacje obrazu, porównanie obrazów i wiele wiele innych. Funkcjonalność ImageMagick jest zazwyczaj wykorzystywana z linii poleceń lub można używać jego funkcji z programów napisanych w swoim ulubionym języku programowania.

Po ściągnięciu ImageMagick i zainstalowaniu (choć nie jest to wymagane, przynajmniej w przypadku środowiska Windows) możemy przejść do wykonywania dostępnych funkcji z linii poleceń. W tym artykule zajmiemy się funkcją „compare”, której zadaniem jest analiza i porównywanie obrazów.

Podstawowa składnia polecenia compare przyjmuje trzy wartości, tak jak jest to przedstawione na poniższym obrazku:

 

Ilustracja 1: Podstawowa składnia polecenia compare

 

Wartość „img_src.jpg” to obraz źródłowy, oryginał z którym porównujemy obraz obecny - „present.jpg”. Wynik, czyli różnicę tych dwóch porównywanych obrazów zapisujemy do pliku „diff.jpg”.

Poniżej znajduje się przykład porównania dwóch obrazów przedstawiających widok naszej aplikacji. Różnice między nimi zaznaczone są kolorem czerwonym na obrazie wynikowym.

Ilustracja 2: Widok strony 1

Ilustracja 3: Widok strony 2

 

Ilustracja 4: Widok strony z naniesionymi różnicami


Jak widać na powyższym przykładzie różnice zaznaczone są kolorem czerwonym co pozwala w prosty i szybki sposób znaleźć elementy różniące się. Tych różnic w tym przypadku nie ma zbyt wiele, ograniczają się jedynie do niewielkich zmian w treści strony.

Spróbujmy zatem z innym przykładem, gdzie różnice w obrazie dotyczą już samej grafiki. Grafikę do przykładu zaczerpnąłem ze strony źródłowej projektu gdyż jest prosta i czytelna i świetnie odzwierciedla właściwości funkcji compare.

 

Ilustracja 6: img1.gif              Ilustracja 5: img2.gif

Powyższe obrazki to dwa slajdy z animacji. Porównajmy je teraz za pomocą funkcji compare wydając polecenie

comapre img1.gif img2.gif diff.gif


w rezultacie otrzymamy poniższy obraz, który dosadnie pokazuje różnice

 

Ilustracja 7: Porównanie obrazów img1.gif i img2.gif

 

Funkcja compare posiada wiele dodatkowych parametrów, które w mniejszym bądź większym stopniu mogą przydać się w procesie porównywania obrazów, dodatkowo parametry te można ze sobą łączyć w jednym zapytaniu. Poniżej przedstawię kilka przykładów kombinacji parametrów, które możemy zastosować w tym poleceniu.

Zmieńmy zatem kolor pokazywanych różnic z czerwonego na czarny

compare img1.gif img2.gif -highlight-color Black diff.gif

 

 

Jeśli nie chcemy mieć „cienia” drugiego obrazka wówczas zastosujemy parametr
„-compose Src”

compare img1.gif img2.gif -compose Src diff.gif

 

 

 

Aby wygenerować maskę w skali szarości zmienionych pikseli zastosujemy polecenie z trzema parametrami

compare img1.gif img2.gif -compose Src -highlight-color White -lowlight-color Black diff.gif

 

 

 

Jak widać możliwości porównywania obrazów za pomocą ImageMagick są bardzo duże. W artykule ograniczyłem się jedynie do prostych poleceń ale dzięki dużej liczbie parametrów tej funkcji każdy będzie mógł dopasować swój wynikowy obraz do swoich potrzeb. Osoby zainteresowane tymi parametrami odsyłam na stronę http://www.imagemagick.org/script/compare.php#options, gdzie są one wyszczególnione.

Ogromną zaletą tego programu jest niewątpliwie fakt, że jest on udostępniany za darmo jako wolne oprogramowanie zarówno jako binarna dystrybucja gotowa do uruchomienia lub jako źródło, które można w dowolny sposób kopiować i modyfikować.

[1] - http://www.imagemagick.org

 

11254

Powiązane szkolenia

05-06
czerwca
2023
Jarosław Hryszko
online
Praktyka testowania
1 750PLN
Testowanie aplikacji internetowych
12
Wolnych miejsc
Rezerwuj
06-07
marca
2023
Arnika Hryszko
online
Praktyka testowania
1 770PLN
Testowanie użyteczności
9
Wolnych miejsc
Rezerwuj
20-21
kwietnia
2023
Rafał Stańczak
online
Dobre praktyki testowania
1 700PLN
Testowanie w metodykach Agile
12
Wolnych miejsc
Rezerwuj
23-24
marca
2023
Krzysztof Kołodziejczyk
online
Praktyka testowania
1 770PLN
Testowanie aplikacji mobilnych - Android
9
Wolnych miejsc
Rezerwuj
12-13
czerwca
2023
Krzysztof Skarbiński
online
Automatyzacja testowania
1 800PLN
Testowanie REST API dla początkujących w języku python
10
Wolnych miejsc
Rezerwuj
27-28
lutego
2023
Krzysztof Kołodziejczyk
online
Języki programowania dla testerów
1 800PLN
JavaScript dla testerów oprogramowania
9
Wolnych miejsc
Rezerwuj
24-26
kwietnia
2023
Krzysztof Kołodziejczyk
online
Praktyka testowania
3 000PLN
Tester gier
11
Wolnych miejsc
Rezerwuj
13
marca
2023
-09
kwietnia
2023
Krzysztof Kołodziejczyk
online
Automatyzacja testowania
5 500PLN
Praktyka automatyzacji testowania
5
Wolnych miejsc
Rezerwuj

To powinno Cię zainteresować