Na rynku pojawi\u0142o si\u0119 kilka firm oferuj\u0105cych narz\u0119dzia wspomagaj\u0105ce testy wizualne jak np. DPXDT, BackstopJS, Gemini, VisualCeption czy Needle. Dzi\u015b chcia\u0142abym jednak zaprezentowa\u0107 rozwi\u0105zanie zaproponowane przez Applitools. Firma ta stworzy\u0142a produkt walidacji wizualnej nazwanej Applitools Eyes.<\/p>\n\n\n\n
EYES<\/h2>\n\n\n\n
Jest to rozwi\u0105zanie automatyzacji test\u00f3w wizualnych dla stron internetowych, aplikacji mobilnych oraz desktopowych. Pomaga sprawdzi\u0107 czy zawarto\u015b\u0107 jest wy\u015bwietlana poprawnie na wszystkich typach przegl\u0105darek, urz\u0105dzeniach, systemach operacyjnych. Poprzez wcze\u015bniej manualne, p\u00f3\u017aniej za\u015b funkcjonalne testowanie, w\u0142\u0105czaj\u0105c w to layouty, tre\u015b\u0107 i CSS \u2013 Applitools Eyes natychmiast sprawdza, czy wszystkie elementy interfejsu u\u017cytkownika s\u0105 poprawne, alarmuj\u0105c o wszystkich istotnych kwestiach, kt\u00f3re s\u0105 sprzeczne z po\u017c\u0105danym UI, ignoruje za\u015b nieistotne zmiany, kt\u00f3re dla u\u017cytkownika ko\u0144cowego s\u0105 bez znaczenia. Takie rozwi\u0105zanie pozwala zaoszcz\u0119dzi\u0107 czas na pisanie setek linii kodu testowego, kt\u00f3ry musia\u0142by, nie zawsze w 100% sprawdzi\u0107 poprawno\u015b\u0107 wy\u015bwietlanej tre\u015bci.<\/p>\n\n\n\n
Applitools Eyes bezproblemowo integruje si\u0119 z wi\u0119kszo\u015bci\u0105 framework\u00f3w do testowania, takich jak Selenium, Appium, HP QTP\/UFT, MS CodedUI, Protractor for AngularJS i innymi. Dodatkowym atutem tego narz\u0119dzia jest tak\u017ce elastyczne i przepustowe rozwi\u0105zanie u\u017cywania chmury, wspieranie nielimitowanych mo\u017cliwo\u015bci uruchamiania test\u00f3w, tak\u017ce r\u00f3wnolegle, co sprawia ze Eyes jest dobrym rozwi\u0105zaniem dla wi\u0119kszych team\u00f3w.<\/p>\n\n\n\n
EYES i APPIUM<\/h2>\n\n\n\n
Zaprezentuj\u0119, jak stworzy\u0107 test wizualny aplikacji mobilnej przy u\u017cyciu Appium i Applitools Eyes. Po za\u0142o\u017ceniu konta <\/a>i zalogowaniu do dashboardu, mo\u017cna przej\u015b\u0107 do pobrania SDK. Dla Appium nale\u017cy pobra\u0107 SDK dla Selenium<\/a>, rozpakowa\u0107 je w dowolnym miejscu na komputerze. Otwieramy projekt Appium w Eclipse, przechodzimy do Properties -> Java Build Path -> Add External JAR\u2019s<\/em> i dodajemy nasze wypakowane jary.<\/p>\n\n\n\n Na pocz\u0105tku nale\u017cy zainicjowa\u0107 obiekt Eyes<\/em>. Kolejnym istotnym krokiem jest ustawienie ApiKey<\/em>, kt\u00f3re jest niezb\u0119dne do pracy z serwerem. Aby pracowa\u0107 z danym wy\u015bwietlaczem\/rozdzielczo\u015bci\u0105, nale\u017cy ustawi\u0107 baseline image<\/strong>, czy obrazek bazowy, z kt\u00f3rym b\u0119d\u0105 por\u00f3wnywane wszystkie kolejne zrzuty ekranu po ka\u017cdej zmianie w aplikacji. Potem nast\u0119puje inicjowanie ustawie\u0144 dla Appium i inicjacja webdrivera. Istotnym elementem, kt\u00f3ry nale\u017cy om\u00f3wi\u0107 jest punkt walidacji wizualnej checkWindow()<\/em>. Tu tworzony jest zrzut ekranu wysy\u0142any na serwer w celu walidacji jego poprawno\u015bci w stosunku do obrazka bazowego. Nast\u0119pnie nast\u0119puje zamkni\u0119cie drivera.<\/p>\n\n\n\n Test uruchamiany jest jak zwyk\u0142y test Appium, mo\u017cna go uruchomi\u0107 poprzez TestNG lub JUnit, oba sposoby zadzia\u0142aj\u0105. Warunkiem koniecznym jest oczywi\u015bcie uruchomiony serwer Appium i poprawna jego konfiguracja.<\/p>\n\n\n\n Walidowany mo\u017ce by\u0107 ca\u0142y ekran, jak tak\u017ce okre\u015blona ramka, obszar w ramce. Mo\u017cna tworzy\u0107 tak\u017ce branche, co u\u0142atwia prac\u0119, je\u015bli aplikacja jest tworzona stopniowo, wdra\u017cane s\u0105 kolejne zmiany, kt\u00f3re nie s\u0105 zatwierdzane jednocze\u015bnie. Istnieje tak\u017ce mo\u017cliwo\u015b\u0107 okre\u015blenia w kodzie stopnia por\u00f3wnywania obrazk\u00f3w:<\/p>\n\n\n\n Przejd\u017amy do dashboardu i wynik\u00f3w testu. W wynikach zobaczymy nazw\u0119 testu, jego status, dat\u0119 oraz godzin\u0119 a tak\u017ce rozdzielczo\u015b\u0107 na jakiej przeprowadzono test.<\/p>\n\n\n\n Po przej\u015bciu do szczeg\u00f3\u0142\u00f3w mo\u017cemy zobaczy\u0107 obrazek bazowy oraz bie\u017c\u0105cy. Mo\u017cemy tak\u017ce manualnie ustawi\u0107 stopie\u0144 por\u00f3wnania obrazk\u00f3w, doda\u0107 obszary, kt\u00f3re maj\u0105 by\u0107 ignorowane, zmienne. Mo\u017cna tak\u017ce r\u0119cznie zatwierdzi\u0107 dany zrzut ekranu lub go odrzuci\u0107, zaakceptowa\u0107 podobne lub wszystkie.<\/p>\n\n\n\n Jednym z wa\u017cniejszych minus\u00f3w tego narz\u0119dzia jest konieczno\u015b\u0107 ustawienia obrazka bazowego dla ka\u017cdego urz\u0105dzenia\/rozdzielczo\u015bci, co wi\u0105\u017ce si\u0119 z obowi\u0105zkiem posiadania dobrze wy\u015bwietlaj\u0105cej si\u0119 aplikacji na ka\u017cdym rozwa\u017canym urz\u0105dzeniu.<\/p>\n\n\n\n Chcesz lepiej zrozumie\u0107 aplikacje i systemy, kt\u00f3re testujesz? Do\u0142\u0105cz do ModernTester, poznaj najpotrzebniejsze narz\u0119dzia, frameworki oraz j\u0119zyki programowania i \u0107wicz na specjalnie przygotowanych \u015brodowiskach testowych: Platforma e-learningowa ModernTester<\/a><\/p>\n\n\n![\"eyes](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2017\/02\/al1.png\")
<\/a><\/figure>\n\n\n\n\n
![\"eyes](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2017\/02\/al2-1024x369.png\")
<\/a><\/figure>\n\n\n\n![\"eyes](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2017\/02\/al3-1024x52.png\")
<\/a><\/figure>\n\n\n\n
\n\n\n\n