Applitools: inteligentná platforma na automatizované vizuálne testovanie UI

Automatizované testovanie používateľského rozhrania (UI) je nevyhnutnou súčasťou každého procesu vývoja softvéru. Pomáha vývojárom a testerom zabezpečiť, aby ich webové aplikácie a mobilné aplikácie boli kvalitné a bez chýb.

Applitools je cloudová platforma na automatizované testovanie UI, ktorá využíva strojové učenie na porovnanie obrazoviek a identifikáciu chýb. Vďaka tomu je Applitols schopný identifikovať aj tie najmenšie zmeny v používateľskom rozhraní, ktoré by ľudské oko mohlo prehliadnuť.

Čo je UI testing

Pri testovaní používateľského rozhrania testuješ funkciu svojej webovej aplikácie prostredníctvom simulovaných vstupov používateľa. Pomocou testovacieho frameworku Cypress.io môžeš napríklad simulovať činnosti používateľa, ako je otvorenie webového prehliadača, vyhľadanie a kliknutie na tlačidlo na stránke alebo dokonca zadanie textu do vstupného poľa. Funguje to perfektne a môže to byť skvelá pomôcka, ktorá pomôže otestovať stránku používateľského rozhrania tvojej aplikácie overením funkčnosti stránok a toho, ako budú fungovať v produkcii.

Funkčné testovanie používateľského rozhrania je však len jedným z aspektov testovania a toto samotné nestačí na vykonanie úplného vizuálneho testu aplikácie. Musíme brať do úvahy také veci, ako sú zmeny v rozložení, veľkosti alebo umiestnení komponentov na stránke, zmeny vo formátovaní textu alebo obsahu a mnohé ďalšie vizuálne zmeny, ktoré sa pri tradičnom funkčnom testovaní ťažšie zisťujú. To platí najmä v prípade responzívnych webových aplikácií, ktoré menia rozloženie na základe veľkosti zobrazovacej plochy.

Preto je vizuálne testovanie používateľského rozhrania nevyhnutné! V opačnom prípade zostanú neúmyselné zmeny používateľského rozhrania (zmena CSS, obsahu atď.) pri testovaní nepovšimnuté a ovplyvnia používateľov.

Vizuálne testovanie UI (používateľského rozhrania)

Automatizované vizuálne testovanie používateľského rozhrania je forma regresného testovania, ktorá sa riadi určitými krokmi s cieľom overiť, či sa obrazovky alebo stránky neočakávane nezmenili od jedného spustenia testu k druhému. Na nasledujúcom obrázku je znázornený typický testovací prípad, ktorý simuluje činnosti používateľa pri otvorení webovej lokality „Wikipedia“ a hľadaní kľúčového slova „Software“.single test case schema

Proces vizuálneho testovania používateľského rozhrania sa začína vytvorením typického prípadu integračného testu pomocou rovnakých nástrojov a testovacích balíkov, aké sa bežne používajú pri vykonávaní takýchto integračných testov. Integračný test je séria akcií vykonaných na obrazovkách/stránkach aplikácie, ktoré simulujú skutočného používateľa.

Pri vizuálnom testovaní používateľského rozhrania postupuješ podľa rovnakých krokov, ako je uvedené vyššie, ale s obmenou:

  1. Otvor prehliadač a prejdi na webovú lokalitu „Wikipedia“.
  2. Uvedený krok vytvorí nový stav „Prehliadač otvára webovú stránku Wikipedia“.
  3. Urob snímku tohto stavu. Ak sa testovací prípad spúšťa prvýkrát, ulož tento snímok ako „základný stav“ pre tento krok v rámci testovacieho prípadu. To platí aj pre ostatné kroky snímkovania uvedené nižšie.
  4. Zadanie kľúčového slova „Software“ (Softvér) do vyhľadávacieho poľa.
  5. Vyššie uvedený krok vytvorí nový stav „Wikipedia English website and the search-box field filled with the keyword Software“.
  6. Urob snímku tohto stavu.
  7. Otvorí sa stránka „Wikipedia“ Software.
  8. Vyššie uvedené kroky vytvoria nový stav „Wikipedia Software page displayed for user“.
  9. Urob snímku tohto stavu.

Pri ďalšom spustení toho istého testovacieho prípadu by si po vyhotovení snímky porovnal snímku so základným stavom a nahlásil výsledky. Výsledky by mohli byť nasledovné:

  • Žiadna zmena: V tomto prípade je nová snímka ekvivalentná so základnou snímkou.
  • Zmena: V tomto prípade má nová snímka v porovnaní so základnou snímkou určité zmeny používateľského rozhrania.

Vizuálny tester používateľského rozhrania je teraz zodpovedný za porovnanie snímok, ich analýzu a rozhodnutie, ako riešiť prípadné rozdiely. Môže akceptovať rozdiely, uložiť novú snímku ako východiskovú a použiť ju pre nadchádzajúce regresné testy. Alebo môže rozdiely odmietnuť a informovať vývojárov o chybách a problémoch, na ktoré výsledky upozornili.

Applitools využíva rovnaký prístup ako vyššie, pretože poskytuje nástroje, ktoré môžeš použiť na vytváranie snímok, odosielanie snímok do cloudu Applitools a spúšťanie logiky umelej inteligencie na porovnanie snímok s príslušnými základnými hodnotami.

Funkcie Applitools

  • Applitools Eyes: Nástroj na automatizované testovanie používateľského rozhrania, ktorý využíva strojové učenie na porovnanie obrazoviek a identifikáciu chýb.
  • Applitools Visual AI: Služba, ktorá umožňuje vývojárom a testerom automatizovať testovanie používateľského rozhrania pomocou umelej inteligencie.
  • Applitools Test Manager: Nástroj na správu a automatizáciu testov používateľského rozhrania.
  • Applitools Eyes SDKs: SDK pre rôzne programovacie jazyky, ktoré umožňujú vývojárom integrovať Applitols do svojich aplikácií.

Ako Applitools funguje?

Nástroj applitools je navrhnutý na automatizované vizuálne testovanie pomocou snímania obrazovky aplikácie a analýzy jej zmien. Využíva pokročilé algoritmy na zisťovanie vizuálnych rozdielov a anomálií, aj keď sú zmeny jemné alebo komplexné. Pri prvom spustení testu Applitools Eyes nahrá počiatočnú snímku do cloudu ako základnú snímku. Potom pri každom ďalšom spustení testu Applitools zachytí čerstvú snímku nazývanú kontrolná snímka a pomocou Visual AI v cloude zistí všetky významné rozdiely.

Výhody Applitools

Applitools je výkonný nástroj na vizuálne testovanie, ktorý má oproti tradičným metódam testovania niekoľko výhod. Medzi hlavné výhody Applitools patria:

Vizuálne testovanie na báze umelej inteligencie

Applitools využíva pokročilú umelú inteligenciu a algoritmy strojového učenia na zisťovanie vizuálnych rozdielov a anomálií, a to aj v zložitých a dynamických webových a mobilných aplikáciách. To umožňuje presnejšie a efektívnejšie vizuálne testovanie na identifikáciu aj tých najjemnejších chýb.

Testovanie naprieč prehliadačmi a zariadeniami

Applitools umožňuje jednoduché testovanie aplikácií vo viacerých prehliadačoch, zariadeniach a rozlíšeniach. To šetrí čas a úsilie a zabezpečuje, aby aplikácie fungovali správne pre všetkých používateľov.

Integrácia s populárnymi testovacími frameworkami

Applitools sa bez problémov integruje s populárnymi testovacími frameworkami, ako sú Selenium, Cypress, Robot Framework, Playwright, WebDriverIO a Appium. Vďaka tomu môžu tímy ľahko integrovať vizuálne testovanie do svojich existujúcich pracovných postupov a procesov.

Vyššia efektivita testovania

S Applitools môžu tímy automatizovať vizuálne testovanie a rýchlo a presne identifikovať chyby. To šetrí čas a úsilie a umožňuje tímom sústrediť sa na iné dôležité aspekty vývoja softvéru.

Lepšie skúsenosti používateľov

Identifikáciou a riešením vizuálnych chýb Applitools pomáha zabezpečiť, aby aplikácie fungovali správne a poskytovali používateľom pozitívne skúsenosti. To môže viesť k väčšej spokojnosti a lojalite zákazníkov.

Spolupráca a reporting

Applitools poskytuje nástroje, ktoré tímom umožňujú zdieľať výsledky testov, sledovať pokrok a spolupracovať na vizuálnom testovaní. To pomáha zlepšiť komunikáciu a spoluprácu v rámci tímov a medzi oddeleniami.

mladý muž s tmavými vlasmi v čiernej košeli pracuje na laptope a píše do poznámkového bloku

Nevýhody Applitools

Náklady

Applitools môže byť pre malé tímy alebo projekty drahšie ako iné testovacie nástroje. Náklady na Applitools môžu byť prekážkou pre tímy s obmedzeným rozpočtom alebo zdrojmi.

Krivka učenia

Applitools môže byť pre tímy, ktoré sa s vizuálnym testovaním alebo testovacími nástrojmi na báze umelej inteligencie ešte len zoznamujú, náročný na učenie. Tímy možno budú musieť investovať čas do školenia a učenia sa, aby mohli nástroj efektívne používať.

Obmedzená podpora manuálneho testovania

Applitools je síce určený na automatizované vizuálne testovanie, ale nemusí poskytovať takú podporu pre manuálne testovanie. Tímom, ktoré sa vo veľkej miere spoliehajú na manuálne testovanie, môže Applitools pomôcť menej.

Technické obmedzenia

Applitools môže mať technické obmedzenia pre určité aplikácie alebo prostredia. Napríklad má problémy so spracovaním vysoko dynamického obsahu, ktorý sa často mení.

Obmedzené možnosti prispôsobenia

Applitools síce ponúka širokú škálu funkcií, ale nemusí umožňovať také prispôsobenie ako iné testovacie nástroje. Tímy, ktoré vyžadujú rozsiahle prispôsobenie, môžu považovať Applitools za menej vhodný pre svoje potreby.

Applitools Test Manager

Applitools poskytuje ovládací panel Test Manager, ktorý ti pomáha spravovať všetky spustené testy. V rámci jedného spustenia môžeš spustiť viacero testovacích prípadov.

Pre každý testovací prípad získaš zoznam všetkých snímok urobených počas vykonávania testovacieho prípadu. Prístrojový panel ťa upozorní na všetky testovacie prípady, ktoré nie sú vyriešené, čo znamená, že snímky vytvorené testovacím prípadom sa môžu líšiť od tých, ktoré sú uložené ako východiskové. Prístrojový panel poskytuje nástroje na označenie týchto zmien ako akceptovaných a ich aktualizáciu ako novej základnej snímky, alebo na zamietnutie rozdielov a označenie týchto zmien ako chýb, ktoré majú vývojári riešiť.

Test Manager poskytuje množstvo funkcií, ktoré uľahčujú proces kontroly a overovania výsledkov testovacích prípadov.

Výkonný engine umelej inteligencie, ktorý stojí za nástrojom Applitools, môže na porovnanie snímok s príslušnými základnými hodnotami použiť jeden zo štyroch algoritmov porovnávania vzorov. Ide o tieto algoritmy:

  • Exact: Ide o techniku porovnávania pixel po pixeli, ktorá sa vo všeobecnosti neodporúča kvôli svojej prísnosti.
  • Strict: Táto technika porovnávania porovnáva všetko vrátane obsahu (textu), písma, rozloženia, farieb a polohy jednotlivých prvkov. Tento režim ignoruje zmeny vykresľovania, ktoré nie sú viditeľné pre človeka. S týmto režimom porovnávania spravidla dosiahnete najlepšie výsledky.
  • Content: Táto možnosť je podobná vyššie uvedenej striktnej možnosti s tým rozdielom, že vykonáva iba porovnania obsahu (textu).

Layout: Táto možnosť je podobná vyššie uvedenej možnosti Strict s tým rozdielom, že vykonáva iba porovnania rozloženia stránky a komponentov.

Stratégiu porovnávania môžete určiť v samotnom kóde testovacieho prípadu alebo prostredníctvom Test Managera pri prezeraní výsledkov porovnávania medzi snímkami.

Cypress – Applitools

Cypress a Applitools sú dva nástroje, ktoré sa často používajú spoločne na automatizáciu testovania používateľského rozhrania (UI). Cypress je zjednodušene JavaScript knižnica na automatizované testovanie webových aplikácií. Applitools je cloudová platforma na automatizované testovanie UI, ktorá využíva strojové učenie na porovnanie obrazoviek a identifikáciu chýb.

Výhody používania Cypress a Applitols spoločne:

  • Cypress a Applitools umožňujú vývojárom a testerom rýchlo a efektívne automatizovať testovanie UI. Cypress poskytuje rýchle vykonávanie testov a Applitools poskytuje rýchle porovnávanie obrazoviek a identifikáciu chýb.
  • Applitools využíva strojové učenie na porovnanie obrazoviek a identifikáciu chýb, vďaka čomu je presnejší ako tradičné nástroje na porovnávanie obrazoviek.
  • Cypress a Applitools sú oba jednoduché na používanie. Cypress poskytuje jednoduché API na písanie testov a Applitools poskytuje jednoduché používateľské rozhranie na správu testov a analýzu výsledkov.

Ako používať Cypress a Applitools spoločne:

  1. Nainštaluj si Cypress a Applitools.
  2. Napíš Cypress testy pre svoje webové aplikácie.
  3. Použi Applitools Eyes na pridanie vizuálnych kontrol do svojich Cypress testov.
  4. Spusti svoje Cypress testy.
  5. Prezri si výsledky testov v Applitools.

Tu si môžeš prezrieť dokumentáciu ku Applitools –  Applitools documentation.

Záver

Applitools predstavuje inovatívnu cloudovú platformu pre automatizované vizuálne testovanie používateľského rozhrania, ktorá využíva strojové učenie na efektívne identifikovanie aj najmenších zmien a chýb, ktoré by mohli byť prehliadnuté ľudským okom. Táto platforma, integrovateľná s populárnymi testovacími frameworkmi ako Cypress, umožňuje vývojárom a testerom zvýšiť kvalitu a spoľahlivosť webových a mobilných aplikácií prostredníctvom presného a efektívneho vizuálneho testovania.

Ak hľadáš prácu ako IT tester a vieš po nemecky, prezri si naše benefity pre zamestnancov a reaguj na najnovšie ponuky práce.

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

Daj nám o sebe vedieť