Redakcja
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.
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.
Metoda algebraiczna
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:
- Wykonujemy zrzuty elementów strony wzorcowej (FF) i zapisujemy do plików. Nazwy plików mają narzucony format „x_y_width_height.png”.
- Robimy zrzut całej strony (screenshot strony) na przeglądarce sprawdzanej - Chrome, IE10,IE9,IE8, Safari, Opera.
- 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.
Wynik działania algorytmu i odnalezienie wzorców na tej samej stronie wyrenderowanej w przeglądarce Safari. 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
