Applitools Eyes (Visuaalisen testauksen automatisointi)

Usein testiautomaatiossa keskitytään funktionaaliseen testaukseen. Testiautomaatio-caset rakennetaan suorittamaan ohjelman vaatimusten mukaista toiminnallisuutta. Tärkeintähän on, että ohjelma toimii niin kuin pitääkin ja jos toiminallisuus on kunnossa, niin ohjelma on valmis tuotantoon, eikö niin? Vai onko sittenkään? Minkä näkökulman jätämme testaamatta? Sen, miltä ohjelma näyttää visuaalisesti.

Visuaalisen testauksen tarkoitus on löytää bugit, jotka syntyvät UI-komponentteja päivittäessä. Visuaalinen testaus vie manuaalisesti paljon aikaa ja sen onnistuminen riippuu testaajan silmän tarkkuudesta. Gregory Goldshteyn (2016) listaa artikkelissaan neljä kohtaa, jotka muodostavat hänen visuaalisen testauksen checklistinsa. Nämä neljä kohtaa ovat:

- Varmista, että jokainen UI-komponentti on oikean kokoinen, muotoinen, värinen ja oikeassa paikassa
- Varmista, etteivät UI-komponentit ole päällekkäin tai peitä toisiaan
- Varmista, ettei ruutukoon  muutos riko UI-komponentteja (esim. tabletit, kännykät, pöytäkone)
- Varmista, että kaikki kuvat näkyvät oikein

Miten voimme hyödyntää testiautomaatiota web-sivun visuaalisessa testaamisessa? Applitools Eyes (https://applitools.com/) on visuaalisen testauksen automatisointiin tarkoitettu työkalu, jota käytetään web-sovelluksena. Sovelluksen saa toimimaan esim. Chromeen ladattavana Applitools Eyes Express -lisäosana (https://chrome.google.com/webstore/detail/applitools-eyes-express/ofhaaccocoghamklkjfliehhdhmibdbh). Web-käyttöliittymä on yksinkertainen ja helppokäyttöinen, kuten myös lisäosan käyttäminenkin. Lisäosan toiminnolla voi ottaa kuvan aukiolevasta web-sivusta baselineksi, ja toisella kerralla otettua kuvaa verrataan baselineen. Kuvien erot näytetään vierekkäin, erot korostettuina. Jos kuvissa on eroja (eli uusi versio web-sivusta ei vastaa alkuperäistä), testi näyttää punaista ja epäonnistuu. Testicaseihin voi asettaa erilaisia suoja-alueita, esim. dynaamisesti vaihtuvaa sisältöä, kuten mainoksia, varten. Erojen huomaamisen tasoa voi säätää tiukasta löyhään tai sen voi asettaa tutkimaan vain sivun layoutin säilymistä.

Vaikka Applitools Eyes tuntuukin helpottavan visuaalisen testauksen työurakkaa, testicasejen suunnittelu (eli ensimmäiset ajot määritelmän asettamiseksi) vievät aikaa ja niitä pitää päivittää usein. Applitools on kuitenkin hyvä huomaamaan ne pienetkin erot tai virheet, mitkä helposti menevät ihmisiltä ohi. Sen käytön voidaan katsoa vähentävän graafisten virheiden määrää sovelluksen tulevaisuudessa. No, katsotaan. Kauneus on katsojan silmässä.

Lähteet:
Applitools Eyes, Saatavilla: https://applitools.com/
Applitools Eyes Express -lisä Google Chromeen, Saatavilla: https://chrome.google.com/webstore/detail/applitools-eyes-express/ofhaaccocoghamklkjfliehhdhmibdbh
"Review of Visual vs. Functional Testing with Applitools", Gregory Goldshteyn, 12.01.2016. Saatavilla: https://www.linkedin.com/pulse/review-visual-vs-functional-testing-applitools-gregory-goldshteyn
Robot-AppEyes, Robot Framework moduuli Applitoolsille, Saatavilla: http://navinet.github.io/Robot-AppEyes/