Visual regression testing a top bezplatné nástroje

Vizuálne regresné testovanie je typ regresného testovania, ktorého cieľom je zabezpečiť, aby žiadne zmeny programu nemali negatívny vplyv na grafické používateľské rozhranie (GUI). Označuje sa aj ako vizuálne validačné testovanie. Namiesto zamerania sa na funkčnosť softvéru je jeho cieľom overiť estetickú stránku softvéru.

Visual regression testing overuje, či sa všetky vizuálne prvky zobrazujú správne vo všetkých dostupných prehliadačoch, zariadeniach a platformách. Tieto prvky môžu zahŕňať tlačidlá, menu, ikony, text a polia.

Visual testing vs functional testing

Medzi visual testingom a functional testingom (funkčným testovaním) existuje niekoľko rozdielov. Vizuálne testovanie sa zameriava na vzhľad aplikácie, zatiaľ čo funkčné testovanie sa viac zameriava na to, či aplikácia funguje. Vďaka dobrému vizuálnemu regresnému testovaniu si QA testeri môžu byť istí, že používatelia budú mať dobrý vizuálny zážitok. Testeri musia vykonať testy mnohých estetických aspektov vizuálneho prvku vrátane:

• veľkosť,
• šírka,
• dĺžka,
• poloha,
• viditeľnosť (či používateľ vidí prvok),
• čitateľnosť (či používateľ môže ľahko prečítať text a informácie na prvku),
• zarovnanie (či je prvok používateľského rozhrania dobre umiestnený vo vzťahu k iným prvkom),
• konzistentnosť pri všetkých rozlíšeniach obrazovky (či rozloženie zostáva rovnaké na rôznych obrazovkách).

Ako je vidieť na obrázku vyššie, po aktualizácii verzie sa obrazovka systému Windows správa trošku chaoticky. Nemusí to mať vplyv na konečný výsledok aktualizácie systému Windows, ale pre grafické rozhranie to určite v poriadku nie je.

Vizuálne regresné testovanie je tu na to, aby sa zabránilo všetkým takýmto scenárom.

Význam vizuálneho testovania

Návrh používateľského rozhrania (UI) je rozhodujúci pre používateľský zážitok z produktu. Vďaka dobrému návrhu používateľského rozhrania je interakcia medzi používateľmi a digitálnymi produktami alebo službami čo najplynulejšia. To má pozitívny efekt na zapojenie používateľov, čo následne zlepšuje imidž značky a v konečnom dôsledku aj ekonomické výsledky.

Bez vizuálneho regresného testovania riskujeme, že vizuálne chyby zostanú nepovšimnuté a vkĺznu do grafického rozhrania aplikácie. GUI je to, čo vidí používateľ. Ak je grafické rozhranie aplikácie príliš chybné, používateľ bude mať problém s navigáciou v produkte.

Zlá estetika a použiteľnosť môžu v potenciálnych zákazníkoch vzbudiť neochotu kúpiť si produkt alebo ho využívať, čo vedie k strate príležitostí na predaj. Okrem toho sa zlé grafické používateľské rozhranie bežne spája s nedostatkom profesionality. Nesprávne umiestnené tlačidlo alebo zlé rozloženie textu môže znížiť dôveru používateľov v kvalitu produktu. Ak sa chceš dobre presadiť na trhu, snaž sa zachovať zmysel pre profesionalitu prostredníctvom správneho vizuálneho regresného testovania.

Manuálne vizuálne testovanie

Manuálne vizuálne regresné testovanie je tradičný prístup k vizuálnemu testovaniu. Testeri nepoužívajú žiadne nástroje na vizuálne testovanie. Na odhalenie chyby využívajú svoju vlastnú vizuálnu ostražitosť a tento prístup je vlastne u mnohých testerov celkom bežný.

Avšak testeri sú ľudia a ľudia robia chyby. Vzhľadom na množstvo veľkostí obrazoviek, prehliadačov a zariadení, na ktorých sa má testovať, nie je manuálne testovanie najlepším prístupom.

Dokážeš napríklad na týchto dvoch obrázkoch rozpoznať 11 rôznych rozdielov? Skús to, zaznamenaj si čas za ktorý to zvládneš a predstav si, že to robíš opakovane pre stovky prehliadačov a zariadení, pričom toto je stále len jeden obrázok. Manuálne otestovať všetky vizuálne stránky je jednoducho nemožné.

To však neznamená, že manuálne testovanie nie je potrebné. Pri vykonávaní ad hoc alebo prieskumného testovania je manuálne testovanie rýchlejšie a jednoduchšie. Na rozsiahle testovanie potrebujeme mať automatizované vizuálne regresné testovanie.

Automatizované vizuálne testovanie s využitím umelej inteligencie

Falošne pozitívne výsledky pri vizuálnom regresnom testovaní

Falošne pozitívny výsledok vo vizuálnom regresnom testovaní je, keď testeri nahlásia, že prvok je vizuálne chybný, hoci v skutočnosti nie je. Falošne pozitívne výsledky pri vizuálnom testovaní môžu mať negatívny vplyv na proces vývoja. Je to preto, že tímy musia tieto „falošné poplachy“ odfiltrovať skôr, ako môžu začať opravovať kritické problémy.

Bežným prístupom k vizuálnemu regresnému testovaniu je porovnávanie referenčného alebo východiskového obrazu požadovaného používateľského rozhrania so skutočným používateľským rozhraním s cieľom nájsť medzi nimi rozdiely. Tieto rozdiely predstavujú vizuálne regresie, ktoré treba opraviť. Tento prístup je známy ako prístup založený na porovnávaní pixelov alebo porovnávaní obrázkov. Môže to znieť jednoducho, ale majú niektoré základné slabé miesta, ktoré viedli k falošne pozitívnym výsledkom, vrátane:

• Dynamický obsah: všetky webové stránky a aplikácie majú dynamické prvky, ako je dátum, čas alebo ikona košíka na webových stránkach elektronického obchodu. Skripty vizuálnych regresných testov registrujú tieto zmeny ako chyby, ale zvyčajne nimi nie sú.

Toto všetko sú normálne nákupné košíky, ale môžu byť označené ako chybné s prístupom porovnávania obrázkov.

• Animácie a GIFy: animácie a GIFy patria do kategórie dynamického obsahu. Tlačidlo „Načítanie“ sa tiež počíta ako animácia a môže spôsobiť falošne pozitívne výsledky pri vizuálnom regresnom testovaní.
• Rozdiely vo vykresľovaní: rôzne hardvérové konfigurácie vykresľujú obrázky odlišne. To má za následok rozdiely vo farbách. Tieto rozdiely je veľmi ťažké zohľadniť vo vizuálnych testovacích skriptoch.
• Padding/margin: podobne aj padding a margin na obrazovke sa líšia v rôznych zariadeniach, prehliadačoch a systémoch.
• Veľkosť a farby písma: rozdiely súvisiace s písmom by sa nemali vždy klasifikovať ako vizuálne chyby. Automatizované skripty vizuálneho testovania to však nie vždy chápu.

Počet testovaných objektov a citlivosť na drobné zmeny v používateľskom rozhraní spôsobujú, že technika porovnávania obrázkov je nespoľahlivá. Vtedy vstupujú do hry nástroje na vizuálne regresné testovanie. Tieto nástroje sú vybavené robustnými funkciami, ktoré uľahčujú život vizuálnym regresným testerom.

Nástroje na vizuálne regresné testovanie

Nástroje na vizuálne regresné testovanie, ktoré sú zvyčajne vybavené funkciami umelej inteligencie, podporujú proces vizuálneho testovania tým, že znižujú riziko falošne pozitívnych výsledkov. To umožňuje tímom šetriť zdroje a sústrediť sa na to, čo je skutočne dôležité. Nástroje na vizuálne regresné testovanie sú vytvorené na základe prístupu porovnávania obrázkov. Testeri nemusia ručne porovnávať aktuálne grafické používateľské rozhranie s očakávaným grafickým používateľským rozhraním, aby odhalili vizuálne chyby.

Na riešenie citlivosti techniky Image Comparison mnohé nástroje na vizuálne testovanie umožňujú testerom identifikovať a „ignorovať“ dynamické zóny. Tieto zóny nebudú označené ako chyba, ak v nich dôjde k zmenám.

Novou funkciou, ktorú zaviedli mnohé nástroje na vizuálne regresné testovanie, je Porovnanie rozloženia (Layout Comparison). Táto funkcia definuje a porovnáva rôzne zóny medzi základným grafickým používateľským rozhraním a skutočným grafickým používateľským rozhraním, aby sa zvýraznili viditeľné zmeny rozloženia. Pridáva väčšiu hĺbku do procesu vizuálneho testovania.

Ďalšou zaujímavou funkciou je porovnávanie založené na texte/obsahu. Využíva strojové učenie na extrakciu a porovnanie textu na obrazovke bez ohľadu na veľkosť, font a farbu písma. Zanedbateľné rozdiely v písme sa nebudú považovať za chyby.

Nástroje na vizuálne testovanie sa delia na automatizované nástroje na vizuálne testovanie a nástroje na vizuálne regresné testovanie s otvoreným zdrojovým kódom (open source).

Treba však poznamenať, že dopyt po samotnom vizuálnom testovaní nie je taký vysoký. Testovacie tímy potrebujú platformu, ktorá podporuje vizuálne regresné testovanie a iné typy testovania, najmä testovanie používateľského rozhrania a API. Vďaka takejto platforme môžu tímy lepšie riadiť kvalitu softvéru. Stručne povedané, dobrý nástroj/platforma na vizuálne regresné testovanie by mal mať tieto vlastnosti:

• možnosti vizuálneho porovnávania,
• podpora automatizovaného vizuálneho testovania ,
• integrácia s inými testovacími frameworkami,
• testovanie naprieč prehliadačmi,
• podpora testovania API/UI,
• testovanie v cloude,
• funkcie reportovania a analýzy ,
• možnosti spolupráce.

Ak je tento nástroj na vizuálne regresné testovanie vybavený vyššie uvedenými funkciami, môže skutočne zmeniť a uľahčiť vizuálne testovanie. Nižšie sme uviedli zopár najlepších a najpopulárnejších nástrojov na vizuálne testovanie v roku 2024.

Top nástroje na visual testing 2024

Visual testing in Katalon

Platforma Katalon je známa ako platforma na QA  „všetko v jednom“. Katalon je postavený na Appium a Selenium, čo ti umožňuje vykonávať funkčné testovanie a vizuálne testovanie na jednom mieste. Platforma Katalon má mnoho funkcií vizuálneho testovania, ktoré pomáhajú tvojmu tímu dosiahnuť vizuálnu kvalitu spolu s použiteľnosťou. Všetky tieto funkcie sú poháňané umelou inteligenciou, ktorá znižuje riziko falošne pozitívnych výsledkov a zvyšuje presnosť, čo vedie k zlepšeniu efektivity.

Katalon dokáže odhaliť a zachytiť kritické prvky používateľského rozhrania aplikácie a následne vytvoriť základný obraz na porovnanie. Dokáže tiež zistiť a zvýrazniť dynamické oblasti aplikácie, ako sú bannery alebo vyskakovacie okná (pop ups). Tieto oblasti nebudú označené ako chyby, aj keď sa počas testov zmenia.

Čo je ešte lepšie, Katalon umožňuje tímom testovať v širokom spektre zariadení a prehliadačov. Namiesto investovania do množstva fyzických strojov môžu tímy alokovať svoje zdroje do kritickejších oblastí. Po testovaní platforma Katalon generuje podrobné analýzy a správy na zlepšenie rozhodovania.

Najdôležitejšie funkcie:

• centralizovaná platforma na vykonávanie funkčného aj vizuálneho testovania,
• funkcie poháňané umelou inteligenciou (porovnávanie rozloženia, porovnávanie textu s textom),
• on-cloud testovacie prostredia na mnohých zariadeniach,
• samoregulujúce funkcie na automatickú údržbu automatizovaných vizuálnych testov,
• bezproblémová integrácia s CI/CD pipeline, napríklad Jenkins, GitLab a Bamboo.

Cena: Katalon Platform ponúka používanie navždy zadarmo. Pre pokročilejšie funkcie a kvóty ponúka Katalon atraktívny ročný cenový plán.

Visual testing – Kobiton

Riešenie Visual Testing od spoločnosti Kobiton je komplexné riešenie pre mobilné testovanie s používateľsky prívetivým rozhraním. Taktiež nie je potrebné žiadne nastavenie ani integrácia. Stačí spustiť jednu základnú manuálnu reláciu na reálnom zariadení. O zvyšok sa postará engine umelej inteligencie.

Riešenie automatizovaného vizuálneho testovania dokáže zachytiť metadáta z každého spustenia, analyzovať a porovnávať jednotlivé stránky naprieč zariadeniami. Potom presne určí všetky vizuálne nezrovnalosti týkajúce sa rozloženia, štruktúry a farieb stránky. Kobiton tiež poskytuje odporúčania, ako zlepšiť vzhľad aplikácie a používateľský zážitok.

Hlavné funkcie:

• Kobiton dokáže zachytiť snímky obrazovky každej obrazovky a akcie vykonanej počas funkčného testovania. Tieto snímky obrazovky slúžia ako východiskové obrázky na automatizované porovnanie. Je pozoruhodné, že spoločnosť Kobiton neukladá dodatočné poplatky za počet vykonaných vizuálnych porovnaní.
• Náprava a odporúčania riadené umelou inteligenciou na okamžité riešenie problémov.
• Jednoduché pridávanie parametrov a súborov údajov do testu bez skriptov, ktoré sa môžu automaticky vykonávať pomocou AI.
• Porovnaj svoj dizajn UI a UX s poprednými aplikáciami na rovnakom trhu.
• Testovanie výkonu bez skriptov.

Visual UI testing in Applitools

Applitools patrí medzi najpopulárnejšie nástroje na vizuálne testovanie na trhu. Na trh vstúpil relatívne skoro v porovnaní s ostatnými dodávateľmi. Applitools zmenil prostredie vizuálneho testovania tým, že zaviedol technológiu skenovania na humanizáciu testovacích skriptov a skrátil cyklus vydávania produktov. Prečítaj si náš článok Applitools a UI testing.

Najdôležitejšie funkcie:

• Applitools Eyes: Algoritmy počítačového videnia poháňané umelou inteligenciou, ktoré napodobňujú ľudské oko, aby efektívne našli vizuálne aj funkčné regresie.
• Dokáže rozpoznať dynamický obsah, ako sú reklamy alebo personalizované ovládacie panely a ignorovať ich.
• Integrácia s Cypress, Selenium alebo inými testovacími frameworkami, potom spustenie priamo v obľúbenom nástroji CI/CD: Jenkins, GitLab, GitHub, CircleCI a ďalšie.
• Integrácia s Jira a inými nástrojmi na hlásenie chýb pre lepšie výsledky a reportovanie.

Percy (od spoločnosti BrowserStack)

Percy je riešenie na vizuálne regresné testovanie od spoločnosti BrowserStack. Percy umožňuje vykonávať inteligentné vizuálne testovanie v prehliadačoch a zariadeniach. Dokáže vykonávať inteligentné porovnania, zoskupovať tieto vizuálne zmeny a potom vybrať len najvýraznejšie vizuálne regresie. Má tiež funkciu komentárov a oznámení, ktorá pomáha tvojmu tímu byť informovaný o priebehu projektu.

Najdôležitejšie funkcie:

• Automatické aktualizácie stavu v požiadavkách na stiahnutie vždy, keď sa zistia vizuálne zmeny.
• Technológia stabilizácie snímok automaticky zmrazí animáciu, aby sa minimalizovali falošne pozitívne výsledky.
• Ignorovanie špecifických oblastí na stránke.
• Bezproblémová integrácia do existujúceho pracovného postupu CI/CD.
• Podpora populárnych rámcov a jazykov na automatizáciu testovania.

AyeSpy

AyeSpy je menej známy, ale v skutočnosti celkom užitočný nástroj na automatizáciu vizuálneho testovania. Patrí medzi najlepšie bezplatné open source nástroje na vizuálne testovanie.

Najdôležitejšie funkcie:

• spusti na Selenium Grid,
• inšpirovaný nástrojmi Wraith a Backstop – obidva populárne nástroje na vizuálne regresné testovanie,
• podľa jeho tvorcov je USP tohto nástroja zlepšenie jeho výkonu v porovnaní s inými nástrojmi na vizuálne testovanie (spustí 40 porovnaní obrazoviek za minútu),
• priamočiare nastavenie s jednoduchou dokumentáciou pre tím, aby mohli začať testovať rýchlejšie a jednoduchšie,
• snímky obrazovky možno vyhotoviť pre viacero vetiev, čo skracuje čas testovania.

LambdaTest

LambdaTest ponúka funkciu inteligentného vizuálneho testovania, ktorá umožňuje tímom porovnať dve rozloženia obrazu a odhaliť nezrovnalosti. Technológia porovnávania jednotlivých obrázkov LambdaTest pomáha testerom ľahko nájsť aj tie najmenšie vizuálne chyby nahraním snímok obrazovky základného a porovnávacieho obrázka. O zvyšok sa postará jej engine umelej inteligencie.

Najdôležitejšie funkcie:

• inteligentné vizuálne regresné testovanie v cloude, ktoré dokáže identifikovať vizuálne chyby týkajúce sa veľkosti ikon, výplne, farby, rozloženia, textu, ako aj pozícií prvkov,
• môžeš si vybrať z viac ako 3000 reálnych prehliadačov a operačných systémov vrátane prehliadačov Chrome, Firefox, Safari, Internet Explorer, Edge a ďalších,
• podporované paralelné testovanie na skrátenie času vykonávania testov 10x,
• rozmanité integračné ekosystémy podporujúce viac ako 120 integrácií.

SikuliX

SikuliX je jeden z najlepších open source nástrojov na vizuálne regresné testovanie využívajúci technológiu rozpoznávania obrazu a ovládacieho grafického rozhrania. Testeri môžu identifikovať určité tlačidlo na obrazovke a potom ovládaním myši a klávesnice interagovať s identifikovaným tlačidlom. Vďaka tomu je SikuliX praktický, keď nemáš prístup k zdrojovému kódu aplikácie alebo webovej stránky.

Najdôležitejšie funkcie:

• možno použiť na automatizáciu objektov Flash / webových stránok Flash,
• môže vykonávať vizuálne testovanie webových stránok, desktopových aplikácií v systémoch Windows, Linux, Mac, iPhone a Android,
• dokáže automatizovať určité úlohy v grafickom používateľskom rozhraní, aj keď nepoznáte ID prvkov,
• možno ľahko integrovať do iných aplikácií tretích strán.

Záver

Vizuálne regresné testovanie je dôležitým prístupom na zabezpečenie kvalitného grafického rozhrania pre používateľov tvojej aplikácie. Manuálne testovanie a automatizované testovanie používateľského rozhrania pomocou nástrojov s otvoreným zdrojovým kódom môže byť zdĺhavé a neefektívne. Preto je potrebné dlhodobo investovať do nízkokódového riešenia.

Na trhu je k dispozícii niekoľko popredných nástrojov na vizuálne regresné testovanie, ktoré využívajú AI/ML (Artificial intelligence / machine learning) na maximalizáciu svojej účinnosti. Tieto riešenia dokážu rýchlo a presne odhaliť zmeny v grafickom používateľskom rozhraní a presne určiť chyby. Vďaka týmto kvalitným riešeniam si organizácie môžu byť isté, že ich produkt je nasadený čo najefektívnejšie. Dúfame, že sme ti s výberom vhodného nástroja pre vizuálne testovanie pomohli, alebo ti aspoň dali potrebné informácie o jednotlivých nástrojoch a ich funkciách.

Ak si IT tester alebo automatizovaný tester a vieš po nemecky, pozri si naše firemné benefity a reaguj na pracovné ponuky.

O autorovi

Michaela Kojnoková

Agile Test Engineer

Po štúdiu informatiky na ŽU a TUKE som sa najviac ponorila do oblasti automatizácie testovania. Okrem toho sa venujem tvorbe webov, databázam, dátovej analytike, umelej inteligencii a strojovému učeniu. Mám rada cestovanie, šport a najviac si užívam čas strávený v prírode s mojimi blízkymi. LinkedIn