Automaty do porównywania wyglądu stron webowych.

Automaty do porównywania wyglądu stron webowych.
W jednym z projektów zaistniała potrzeba monitorowania kilkudziesięciu tysięcy stron webowych pod kątem poprawności wyświetlania tekstów i obrazków. Postawiono cel usprawnienia pracy zespołu testerskiego i dostarczenia skutecznej metody. Przy tak dużej ilości danych do testów brano pod uwagę jedynie sprawdzenie poprzez automat.
 

Sposób pierwszy –  AutoIT i funkcja  PixelChecksum do porównywania stron.

Środowisko do skryptów automatycznych AutoIT bardzo dobrze wspiera przeglądarkę Internet Explorer. Oferuje API do IE oraz szereg innych bardzo przydatnych bibliotek. Dzięki temu możliwe było zbudowanie aplikacji napisanej w tym środowisku, która ładowała kolejne strony webowe i wykonywała z nich zrzuty ekranu (screenshoty) zapisywane do pliku .png. Większość stron mieściła się na jednym ekranie. Gdy były większe, dokonywano kilku zrzutów odpowiednio ponumerowanych, dokonując wcześniej przewijania strony za pomocą funkcji Page Down. W ten sposób przygotowano wzorce. Po uzyskaniu wzorców, w kolejnym przebiegu można było wykonać porównania aktualnego wyglądu strony z poprzednim, zapisanym we wzorcu. Do weryfikacji występujących zmian na stronie w stosunku do wzorca, użyto dostępnej w AutoIT metody PixelChecksum. Funkcja ta wyliczała sumę pikseli na aktualnej stronie oraz porównywała ją z wartością na wzorcu.

Ostateczna wersja bazowała na algorytmie czwórkowym, który wyliczał sumę pikseli penetrując podobszary weryfikowanej strony i porównywał ją do odpowiednich podobszarów wzorca. W ten sposób znajdywane były ewentualne różnice. Prezentacja różnic była pokazywana na nowym obrazku, który był wynikiem złożenia obrazu weryfikowanej strony (plik .png) oraz odpowiadającego mu obrazu wzorca wyświetlonego w trybie transparentnym (plik .png) wraz z zaznaczonymi graficznie różnicami (patrz poniżej). Obszar pokryty prostokątami czerwonymi to miejsce, gdzie występują różnice. Dokładność odnajdywanych różnic była uzależniona od wielkości kwadratów i możliwa do ustawienia przed uruchomieniem skryptu. Do wyniku dodawana była jeszcze pieczątka „Tested” jako  „watermark”.
 
 
Przykład 1.
 
 
 
Przykład 2.
 
 
 
Przykład 3.
 
 
 
Przykład 4.
 
 
 
Tak opracowana metoda była stosowana w codziennej pracy między innymi do weryfikacji stron przy przejściu na kolejne wersje środowiska (upgrade serwerów, migracji danych). Skuteczność wykrywania różnic była wysoka. Udało się znajdywać dużo ciekawych różnic, które bardzo często były błędami. Jednak ze względu na jej czasochłonność, zaczęto szukać innego rozwiązania.
 

Sposób drugi - porównanie przy pomocy biblioteki do rozpoznawania obrazów

Autorem  tego rozwiązania jest pracownik Roche, Jarosław Wojciechowski. Zastosował on darmową bibliotekę do porównywania obrazów, dostępną w Internecie.

Jarek napisał swój automat do wykonywania zrzutu ekranu (screenshotów) i porównywania. Nazwał go eXpress. W kolejnym kroku dorobił archiwum zrzutów, wyszukiwarkę, powiadomienia wraz z raportowaniem. Program eXpress został udostępniony jako usługa sieciowa w dziale ADMD firmy Roche tak, aby każdy mógł wykonać porównanie zrzutów ekranów (screenshotów) z innych projektów, wrzucając je do odpowiedniej lokalizacji dyskowej i uruchamiając aplikację. Porównywanie przy pomocy eXpressa okazało się dużym sukcesem i pomogło w weryfikowaniu kilkunastu tysięcy stron.

eXpress nie tylko znajdywał bardzo szybko różnice na stronach, ale również monitorował dostępność stron. Automat został skonfigurowany tak, by pracował w nocy na wirtualnym gridzie, a rano otrzymywaliśmy mailem powiadomienie o wyniku porównania. 
 
 
 
Czy widzisz różnice?
 
 
 
 
Oto wynik.
 
 

 

Metoda algebraiczna

Sprawdzenie poprawności wyświetlania strony jest prawdopodobnie jednym z podstawowych obowiązków większości testerów. W firmie ADMD Roche jest to wykonywane regularnie. Zapewne dlatego niezależnie od metod graficznych, pojawiła się metoda algebraiczna. Została tak nazwana, ponieważ polega na odczytywaniu położenia, długości i szerokości poszczególnych obiektów strony, które nie są puste i są widoczne. Jest w niej również wykonywany zrzut elementu (screenshot) i opis elementu, jeśli istnieje. Te dane są zapisywane do pliku pod nazwą „number_x_y_width_height.png”. W kolejnym obiegu weryfikacji strony, uruchamiany jest plugin, który w „locie” porównuje stan obecny z tym zapisanym w pliku. Aplikacja była dostarczana jako plugin do przeglądarki FF i możliwy do uruchomienia przez testera manualnie bądź też poprzez automat.
 
 
 
Wszelkie różnice były raportowane do osobnego pliku. Metoda ta doskonale wyłapywała różnice na stronach w obrębie tej samej przeglądarki tj. FireFox.
 
 

Jak porównywać strony pod różnymi przeglądarkami z automatu? Metoda graficzna.

Porównywanie stron pod różnymi przeglądarkami jest potrzebne, gdyż często zdarzają się dla nich różnice w ich renderowaniu. Wiele projektów wymaga, aby aplikacja była dostępna na najpopularniejszych przeglądarkach, takich jak Chrome, FireFox, IE, Safari, Opera. W związku z tym została podjęta próba opracowania metody automatycznego porównywania stron pod różnymi przeglądarkami.

Potrzebne było ustalenie wzorca poprawnego wyglądu strony, który byłby odniesieniem dla innych przeglądarek. Do tego celu wybrano FireFoxa, ze względu na powyżej opisany plugin, robiący zrzuty elementów ekranu wraz informacją o ich położeniu i rozmiarach.

Przyjęto następujące założenia:

  1. Wykonujemy zrzuty elementów strony wzorcowej (FF) i zapisujemy do plików. Nazwy plików mają narzucony format  „x_y_width_height.png”.
  2. Robimy zrzut całej strony (screenshot strony) na przeglądarce sprawdzanej - Chrome, IE10,IE9,IE8, Safari, Opera.
  3. Odnajdujemy elementy strony wzorcowej na zrzutach całych stron z innych przeglądarek, sprawdzając jednocześnie czy zachowane jest właściwe, sprawdzając położenia elementów w stosunku do innych sąsiadujących z nią elementów, z marginesem innym dla każdej przeglądarki. 

Najtrudniejszym zadaniem było odnajdywanie elementu wzorcowego ze strony FF na zrzucie ekranu całej strony z innej przeglądarki. Potrzebny był dobry i skuteczny algorytm, który poradzi sobie z różnicami wynikającymi z różnych silników renderowania stron.

W tym zakresie poproszono firmę zewnętrzną z Krakowa ONT (Oprogramowanie Naukowo Techniczne) o pomoc w opracowaniu szybkiego i skutecznego algorytmu bazującego na rozpoznawaniu obrazów.

ONT opracowało algorytm i wykonało testy. Algorytm działał bardzo szybko i był bardzo skuteczny. Wszystkie elementy wzorcowe były znajdywane błyskawicznie (maksymalnie w kilka sekund).
 
 
 
Przykładowe wzorce, zrzuty elementów strony (FF) zawierające w nazwie informacje o położeniu  i rozmiarze elementu.
 
 
 
 
Strona, z której wygenerowano wzorce.
 
 
 
 
Wynik działania algorytmu i odnalezienie wzorców na tej samej stronie wyrenderowanej w przeglądarce Chrome. Kolorowe prostokąty oznaczają odnalezienie wzorca.  
 
 
 
Wynik działania algorytmu i odnalezienie wzorców na tej samej stronie wyrenderowanej w przeglądarce Safari.
Kolorowe prostokąty oznaczają odnalezienie wzorca.
 
 
 

O autorze

Marcin Jędras jest zatrudniony w ADMD Roche Polska na stanowisku Senior Test Specialist. Zajmuje się pisaniem skryptów automatycznych do aplikacji webowych oraz desktop. Wykorzystuje między innymi Ruby/Watir, webdriver 2.0, AutoIt, CasperJS oraz metody rozpoznawania obrazów do lokalizacji obiektów i wyszukiwania zmian na screen shotach aplikacji.

 

Od redakcji

Jeśli tak jak Marcin chcesz podzielić się swoją wiedzą z innymi testerami, czekamy na Twój artykuł, film, komentarz, pracę dyplomową czy inną formę treści, jaką chcesz opublikować na naszych łamach.
 

To powinno Cię zainteresować