guide visual regression testing with visual testing tools
Tento komplexný sprievodca vysvetľuje všetko o testovaní vizuálnej regresie. Zahŕňa tiež recenziu bezplatných a komerčných nástrojov na vizuálne testovanie, ako sú Applitools, Percy, Screener atď.:
šablóna správy o vykonaní testu v programe Excel
Vizuálna regresná skúška alebo Vizuálne testovanie v softvéri je činnosť zabezpečovania kvality overovania, či sa vizuálne aspekty používateľského rozhrania aplikácie zdajú pre používateľa vhodné. Je tiež známy ako Testovanie vizuálnej validácie.
Zameriava sa na overenie, či sa na klientskom rozhraní aplikácie zobrazujú správne údaje a obsah. Ďalej tiež overuje rozloženie a vzhľad každého vizuálneho prvku prítomného v používateľskom rozhraní a v celom samotnom používateľskom rozhraní.
Čo sa dozviete:
Vizuálna regresná skúška
Keď hovoríme o správnosti rozloženia, znamená to, že umiestnenie, tvar a veľkosť každého prvku na obrazovke sú správne. Prvky by sa nemali navzájom prekrývať, mali by byť viditeľné a nie skryté.
Vizuálny prvok tu môže odkazovať na obrázok, stránku, časť stránky alebo časť obrázka.
Overenie vzhľadu znamená, že písmo, farba, jas, kontrast, hustota, textúra, vizuálna váha, grafika atď. Vizuálnych prvkov musia vyzerať správne.
Čo je testovanie vizuálnej regresie?
Regresné testovanie zaisťuje, že akákoľvek zmena zavedená do softvéru nezlomí nič, čo predtým fungovalo dobre.
Pokiaľ ide o vizuálne testovanie, vizuálne regresné testovanie zaisťuje, že pri akýchkoľvek zmenách v softvéri sa neobjavia žiadne problémy so štýlom. Aplikácia by mala naďalej vyzerať tak dobre, ako bola.
Nástroj na vizuálne regresné testovanie zachytáva snímky obrazovky aktuálneho používateľského rozhrania a porovnáva ich s pôvodnými snímkami obrazovky. Vizuálne regresné testovanie sa teda zameriava na historické rozdiely. Potvrdzuje, že webová stránka sa aj po úpravách kódu stále vykresľuje podľa očakávaní v rôznych prehľadávačoch.
Ďalej je uvedená sieťotlač testu vizuálnej regresie vykonaná pomocou automatizovaného nástroja:
(obrázok zdroj )
V dnešných postupoch neustálej integrácie je vizuálne regresné testovanie veľmi dôležité, aby sa zabezpečilo, že nové zmeny nespôsobia v rozložení žiadny chaos, pretože sa aplikácia vyvíja z verzie na verziu a postupuje naprieč prehliadačmi.
Mnoho organizácií využíva vizuálne regresné testovanie na zaznamenávanie verzií určitých webových stránok, aby dokumentovali, ako sa tieto zmeny medzi jednotlivými iteráciami menia.
Dôležitosť testovania vizuálnej validácie
Bez ohľadu na to, ako správne funkčnosť vašej aplikácie funguje, pre zákazníka nebude k dispozícii, pokiaľ nebude môcť poskytnúť dobré používateľské rozhranie a užívateľskú skúsenosť.
V dnešnej dobe hovoríme nielen o používateľskom rozhraní (UI), ale tiež sa veľa zameriavame na používateľské prostredie (UX). Keď sa zameriavame na poskytnutie lepšej používateľskej skúsenosti, potom je vizuálne testovanie veľmi dôležité, pretože atraktívnejší vizuálny dizajn je možné vnímať ako použiteľnejší pre používateľa.
Pozrime sa na nasledujúci príklad z webu Amazon:
(obrázok zdroj )
Na obrázku vyššie si môžete všimnúť, že sa text a obrázky prekrývajú a nie sú správne zarovnané. Toto je príklad vizuálnej chyby, ktorá môže spôsobiť zlý dojem používateľa, pretože zákazník nebude môcť dokončiť zamýšľanú akciu na webe.
Vizuálny dizajn formuje užívateľskú skúsenosť mnohými spôsobmi.
Napríklad
- Skvelé vizuálne vzory pomáhajú budovať dôveru a dôveryhodnosť.
- Posilňuje imidž značky.
- Ovplyvňuje čitateľnosť.
- Vytvára vizuálnu rovnováhu na obrazovke.
- Vedie používateľov k činom.
- Presvedčí oko, aby upriamilo svoju pozornosť na určité prvky stránky.
V dnešnej dobe máme tiež obrovskú škálu operačných systémov, webových prehľadávačov, rozlíšení obrazoviek a zariadení, a preto je nevyhnutné zabezpečiť, aby sa používateľské rozhranie zobrazovalo správne pri každej z ich možných kombinácií.
Aj malé narušenie používateľského rozhrania môže mať za následok stratu podnikania. Vizuálne chyby môžu byť pre používateľov nepríjemné a nepríjemné a robiť im nepríjemnosti.
Predpokladajme, že sa venujete bankovníctvu a svojim zákazníkom ponúkate aplikáciu mobilného bankovníctva online.
Dostanete sťažnosti od niektorých svojich zákazníkov, že keď chcú previesť peniaze na účet niekoho a potom, čo vyplnia všetky požadované informácie, nie sú schopní nájsť 'Predložiť' na obrazovke a je to pre nich dráždivý zážitok.
Keď problém preskúmate, zistíte, že tlačidlo odoslania sa skryje v konkrétnom rozlíšení obrazovky pre mobilné telefóny s Androidom, a preto všetci zákazníci s telefónmi so systémom Android s touto konkrétnou veľkosťou obrazovky nevideli tlačidlo odoslania.
Funkcionalita aplikácie teda v tomto prípade fungovala dobre, ale kvôli vizuálnej chybe používatelia neboli schopní vykonať v aplikácii zamýšľané akcie. Tento príklad ukazuje, aké dôležité je otestovať vizuálne aspekty aplikácie na každej možnej konfigurácii predtým, ako aplikáciu doručíte zákazníkom.
Niektoré oblasti, kde sa dôrazne odporúča testovanie vizuálnej validácie, sú (pretože to bude mať priamy dopad na vašu značku):
- Mobilné aplikácie
- Mobilný web / responzívny web
- Marketingové webové stránky
- Systémy na správu obsahu
- Spotrebiteľské systémy ako letecké spoločnosti, cestovanie, bankovníctvo atď.
Vzhľadom na jeho dôležitosť by spoločnosti mali vynaložiť značné úsilie a peniaze na vizuálne testovanie. Ak sa použije v kombinácii s existujúcimi testovacími vývojármi, pomôže vám pri zisťovaní vizuálnych problémov v počiatočných fázach životného cyklu vývoja.
Metódy a procesy vizuálneho testovania
Ako vývojári alebo testeri často pracujeme na testovaní funkčnosti aplikácií. Pomocou manuálneho alebo nejakého automatizovaného nástroja skontrolujeme, či aplikácia funguje podľa očakávania. Takéto testovanie funkčnosti je veľmi dôležité na zabezpečenie hladkého fungovania aplikácie.
Ak k tomu však pridáme vizuálne testovanie, potom by sa tým výrazne vylepšilo celkové testovanie. Toto testovanie sa preto často vykonáva v kombinácii s funkčným testovaním.
Existuje niekoľko testovacích metód a procesov, ktoré zodpovedajú výzvam vizuálneho testovania aplikácií v širokých konfiguráciách. K dispozícii je tiež veľa nástrojov na podporu testovania vizuálnej validácie.
Pri testovaní vizuálnej validácie sa všeobecne používajú dva hlavné prístupy, t. J. Na základe kódu a na základe konfigurácie. Vizuálne testovacie nástroje sú tiež kategorizované na základe týchto dvoch prístupov.
Môže sa to robiť ručne alebo automatizovaným spôsobom. Kvôli určitým výzvam nemôže byť plne manuálny ani plne automatizovaný. Spravidla sa uprednostňuje kombinácia manuálneho a automatizovaného prístupu.
Ďalej sú uvedené 3 rôzne vizuálne testovacie metódy, ktoré sa všeobecne dodržiavajú.
Tímy si môžu vybrať z ktorejkoľvek z týchto možností v závislosti od svojich potrieb:
# 1) Vytvorte vyhradené vizuálne testy : Toto je najviac odporúčaná metóda, pretože vám dáva úplnú kontrolu nad vizuálnou validáciou. Pomocou tohto prístupu tiež môžete písať testy s miernym úsilím. Ale áno, budete musieť písať testy od nuly a bude to vyžadovať nejaký čas.
# 2) Vložte vizuálne kontrolné body do existujúcich funkčných testov: V tejto metóde už máte testy na overenie funkčnosti aplikácie a medzi tieto testy pridáte iba nejaké vizuálne kontroly na overenie platnosti stránok.
Táto metóda samozrejme obmedzuje pokrytie vašimi testami, ale je to rýchly spôsob vloženia vizuálnych testov a využitie výhody existujúceho testovacieho kódu funkcie.
# 3) Vložte implicitnú vizuálnu validáciu do existujúceho testovacieho rámca: Táto metóda sa implementuje veľmi ľahko, pretože vyžaduje iba pár riadkov kódu. Trpí však obmedzením, že v tomto prípade môžete vykonať aj všeobecné overenie. V rámci nemôžete overiť konkrétne komponenty.
Keď budeme pokračovať, budeme diskutovať o manuálnom a automatickom vizuálnom testovaní. Taktiež podrobne skontrolujeme nástroje a rámce vizuálneho testovania.
Ručné vizuálne testovanie
Softvérové spoločnosti čelia dvom možnostiam vykonania vizuálneho testovania, a to manuálnemu testovaniu alebo automatickému testovaniu. Pozrime sa podrobne na manuálne vizuálne testovanie.
Aj keď manuálne testovanie môže byť pomalé, drahé a náchylné na chyby, kvôli subjektívnej povahe návrhu rozhrania nie je často možné automatizovaný test, ktorý by zachytil správnosť každého scenára. Občas teda musíme zvoliť rovnováhu medzi manuálnym a automatizačným testovaním.
otázky a odpovede na otázky týkajúce sa kódovania java pre skúsených
Jednou z hlavných výhod manuálneho testovania človekom môže byť aj mimo rozsah testu. Test automatizácie môže zachytiť iba problém, ktorý je v jeho rozsahu, ale pri manuálnom teste môže ľudský tester spozorovať aj ďalšie kozmetické chyby a ďalšie veci, ktoré na používateľskom rozhraní vyzerajú nesprávne.
Pretože manuálne testy sú bližšie k akciám používateľov v reálnom živote, môžu zachytiť chyby v rozložení a problémy s dizajnom, ktoré sa zvyčajne odhalia pri interakcii skutočného používateľa s aplikáciou.
Môžete prejsť na manuálne testovanie v počiatočných fázach vývoja aplikácie, keď je vaše používateľské rozhranie nestabilné. Je tiež užitočný na ad hoc testovanie, keď potrebujete rýchle kontroly na mieste.
Pri manuálnom testovaní vizuálnej validácie musí tester ručne skontrolovať vzhľad a rozloženie vizuálnych prvkov. Môže to zahŕňať snímanie aktuálnych snímok obrazovky a ich následné manuálne porovnanie so základnými snímkami obrazovky, aby sa identifikovali medzery.
Ďalším efektívnym spôsobom manuálneho testovania je použitie prehľadávača komponentov. V tomto definujete testovacie stavy, pomocou prieskumníka vyberte stav a komponent a skontrolujte ich na obrazovke. Jedným z takýchto nástrojov je React Storybook, kde môžete izolovane vyvíjať komponenty používateľského rozhrania.
Prostredníctvom tejto metódy môže tester spustiť manuálny test komponentu, skontrolovať jeho vykreslenie a zistiť, či funguje dobre alebo nie.
Kroky manuálneho testovania:
- Prejdite si aplikáciu a nasnímajte známe základné snímky obrazovky.
- Neskôr urobte ďalšiu sadu snímok obrazovky z najnovšej verzie aplikácie.
- Teraz ručne porovnajte tieto snímky obrazovky (základná vs. súčasná), aby ste zistili vizuálne chyby.
Automatizované vizuálne testovanie
Automatizované vizuálne testovanie je spôsob, ako automaticky overiť, či sa používateľské rozhranie vizuálne javí podľa plánu.
Výhody automatizácie vizuálnych testov spočívajú v tom, že ponúkajú dlhodobú efektívnosť nákladov, sú rýchlejšie ako manuálne testy, presnejšie, pretože dokážu vylúčiť ľudské chyby a dodať dokonalé vizuálne testy, sú opakovane použiteľné a transparentné, pretože ponúkajú automatické správy, ktoré sú ľahko a ľahko prístupný pre kohokoľvek v tíme.
Niektoré z obmedzení automatizovaného vizuálneho testovania spočívajú v tom, že môžu existovať vysoké počiatočné náklady a budete musieť vynaložiť značné úsilie na údržbu testov, aby ste vyhoveli každej zmene.
Pri automatizovanom testovaní je rozsah užší, pokiaľ nie je zavedené testovanie snímok obrazovky. Existuje tiež strmá krivka učenia, pretože organizáciám chvíľu trvá, kým sa dozvedia o nástrojoch na automatizáciu testovania.
Ísť s automatizáciou by bola dobrá voľba, ak sa od vás vyžaduje, aby ste vykonali regresné vizuálne testovanie, aby ste zvládli časté zmeny, ktoré sa dejú v stabilnom používateľskom rozhraní. Automatizované testovanie tiež pomáha pri skvelom vizuálnom porovnaní snímok obrazovky.
Automatizované porovnanie snímok obrazovky ponúka veľkú mieru presnosti vizuálneho testovania a zvyšuje NI. Automatizované porovnanie snímok obrazovky dokáže zachytiť chyby, ktoré nie je možné zistiť ľudskými očami a manuálnym porovnaním. Je tiež užitočné na konci testovania komplexných používateľských príbehov.
Pre automatizované testovanie je k dispozícii široká škála otvorených a komerčných nástrojov.
Nasledujúci obrázok ukazuje, ako je možné automatizovať vizuálnu validáciu pomocou ľubovoľného programovacieho jazyka:
(obrázok zdroj )
Nižšie je uvedený všeobecný pracovný postup automatizácie vizuálnych testov:
(obrázok zdroj )
Ako je znázornené vo vyššie uvedenom diagrame pracovného toku, do automatizovaného vizuálneho testovania sú zapojené 4 kroky:
Krok 1 : V tomto kroku musíme riadiť aplikáciu a testovať a snímať snímky obrazovky.
Krok 2 : V tomto kroku automatizačný nástroj porovnáva tieto snímky obrazovky so základnými snímkami obrazovky. Východiskové snímky obrazovky sú všeobecne obrázky, ktoré boli nasnímané v predchádzajúcich testovacích cykloch a preukázané testerom.
Krok 3: Len čo nástroj získa výsledky porovnania obrázkov, vygeneruje správu, ktorá zvýrazní všetky zistené rozdiely.
Napríklad,nasledujúci obrázok zobrazuje jeden z nástrojov na automatizáciu testov, ktorý zdôrazňuje rozdiely v uhlovej aplikácii:
Krok 4 : V poslednom kroku tester skontroluje správu a skontroluje každý rozdiel, či ide o chybu alebo platnú zmenu (falošné poplachy). Na základe toho sa aktualizujú základné obrázky.
Pri prvom teste nemáte základné obrázky. Takže obrázky získané pri prvom spustení sa všeobecne považujú za obrázky základnej čiary. Od nasledujúceho cyklu sa porovnávajú so snímkami obrazovky.
Najlepšie postupy pre automatické vizuálne testovanie
- Vyberte si nástroj, ktorý je dostatočne inteligentný na to, aby ignoroval falošné poplachy. Tento nástroj by mal byť schopný spracovať vyhladenie, odsadenie pixelov atď. A z týchto dôvodov nezlyhá vo vašich testoch.
- Automatizácia testov by mala byť schopná spracovať dynamický a pohyblivý obsah.
- Nespoliehajte sa na chybové pomery alebo konfiguráciu prahových hodnôt. Jediné, na čom by malo záležať, je, či ľudská bytosť vidí tento rozdiel, a ovplyvní to používateľskú skúsenosť?
- Automatizačný algoritmus by mal byť schopný analyzovať štruktúru stránky a mal by byť schopný robiť porovnania rozloženia.
- Uprednostnite overenie celej stránky používateľského rozhrania namiesto jednotlivých komponentov. To zabezpečí väčšie a lepšie pokrytie. V prípade overovania iba konkrétnych komponentov vám môžu chýbať neočakávané chyby.
Automatizované testovacie nástroje a vizuálne testovacie rámce
Dnes je na trhu k dispozícii široká škála nástrojov (takmer 30 plus) pre automatizované vizuálne testovanie. Niektoré z týchto nástrojov sú otvorené zdroje, iné sú komerčné. Väčšina z týchto nástrojov funguje rovnakým spôsobom, ale sledujú odlišný pracovný tok podľa cieľového publika.
Pre front-endových vývojárov existujú dva typy rámcov zapojených do vizuálneho testovania. Najskôr potrebujete testovacieho bežca, ktorý vám umožní písať a vykonávať testy. Po druhé, na replikáciu interakcií používateľov potrebujete rámec automatizácie prehľadávača. Tieto dva rámce sa spoločne nazývajú vizuálny testovací kód.
Pomocou týchto testovacích rámcov vytvárajú vývojári kód, ktorý napodobňuje skutočné akcie používateľov, ako je písanie textu alebo klikanie na tlačidlá. Testovací kód obsahuje príkazy na vytváranie snímok obrazovky v relevantných bodoch. Pri prvom spustení testu sa vytvorí úvodná sada snímok obrazovky.
Tieto snímky obrazovky slúžia ako základňa pre porovnanie pri akýchkoľvek zmenách vykonaných v aplikácii. Po založení základnej čiary vývojár vykoná kód na pozadí. Po nájdení zmeny sa zachytí snímka obrazovky so zmenou.
Testovací bežec porovnáva túto snímku obrazovky so základnou snímkou obrazovky pre túto oblasť kódu. Ak sa medzi obrázkami zistia nejaké rozdiely, potom sa test považuje za zlyhanie a nahlási sa vizuálna chyba.
Po vykonaní celého testovacieho kódu sa automaticky vygeneruje správa. Túto správu manuálne skontroluje ľudský tester, aby skontroloval všetky obrázky snímok obrazovky, ktoré sa líšia od základných snímok. Niektoré nástroje generujú rozdielny obrázok, aby zvýraznili rozdiel medzi skutočnou a očakávanou snímkou obrazovky.
Ak je rozdiel spôsobený problémom v kóde, môže vývojár tento problém opraviť a znova spustiť kód. Ak je rozdiel spôsobený požadovanou zmenou používateľského rozhrania aplikácie, potom vývojár skontroluje túto snímku obrazovky a aktualizuje snímku obrazovky základnej čiary, aby bolo možné absolvovať budúce testy.
Vizuálne testovanie obsahuje bezplatné aj platené nástroje. Pozrime sa na tieto nástroje podrobne.
Zoznam najlepších nástrojov na vizuálne testovanie
Open-source a bezplatné nástroje založené na kódoch / skriptoch
Nižšie je uvedený zoznam kódových nástrojov vizuálnej validácie, ktoré sú open-source a sú k dispozícii zadarmo.
- PhantomCSS (UJs CapserJs)
- FBSnapshotTestCase (Používa XCTest)
- Blíženci (Používa JS DSL)
- Ihla (Používa Python)
- Regresia stránky Rspec (Používa Capibaru)
- Pix-Diff (Používa JS a uhlomer)
- Vizuálny rozdiel selénu (Používa Java a WD)
- Vizregres (Používa .NET a WD)
- VisualCeption (Používa PHP a CodeCeption)
- Strašidlo (Používa JS DSL)
Konfiguračný open-source a bezplatné nástroje
Nižšie sú pre vašu informáciu uvedené nástroje vizuálnej validácie založené na konfigurácii, ktoré sú open-source a sú k dispozícii zadarmo.
- BaskstopJS
- dpxdtMake - zobrazené
- CSSCritic
- Grunt Fotobox
- VIFF
- Zelená Cibuľa
- škriatok
- Vizuálny test CSS
- Snap a porovnanie
- Grunt-Vigo
- Galenov rámec
- Automotion
Nebudeme sa hlbšie venovať každému z vyššie uvedených nástrojov, poďme si však v krátkosti prediskutovať tie najlepšie.
Phantom CSS je jedným z veľmi populárnych nástrojov open-source na vizuálnu validáciu. Má 4 768 hviezd GitHub. Pomáha vám s automatizovaným vizuálnym regresným testovaním. Na snímanie snímok obrazovky používa program CasperJS a porovnáva ich so základnými snímkami obrazovky pomocou súboru Resemble.js.
(obrázok zdroj )
Generuje obrazové rozdiely na základe rozdielov pixelov RGB. Tento nástroj je užitočný, iba ak je používateľské rozhranie predvídateľné.
FBSnapshotTestCase je tiež ďalším populárnym nástrojom v tejto kategórii. Má 880 hviezd GitHub.
Zachytáva nakonfigurovaný UIView alebo CALayer a využíva metódu nazvanú render InContext: na získanie obrazovej snímky jeho obsahu. Zhoduje sa s týmto obrázkom s „referenčným obrázkom“ uloženým vo vašom úložisku zdrojového kódu a zlyhá v prípade, že sa dva snímky nezhodujú.
BackstopJS je popredný nástroj v kategórii konfiguračných nástrojov. Chytá to CSS Curveballs. Jedná sa o automatizačný nástroj na vizuálne regresné testovanie, ktorý dokáže testovať responzívne webové používateľské rozhranie porovnaním snímok obrazovky DOM v priebehu času.
Jedná sa o ľahko použiteľný nástroj s niektorými skvelými funkciami, ako je napríklad používateľské rozhranie prehľadov v prehliadači, integrované vykreslenie ukotviteľného panelu, správy JUnit, správy CLI atď.
Galen framework je tiež jedným zo slávnych open-source frameworkov pre testovanie vizuálnej validácie. Pomocou tohto nástroja môžete automatickým spôsobom testovať rozloženie a responzívny dizajn webových aplikácií.
(obrázok zdroj )
Tento rámec funguje dobre v mriežke selénu.
Poďme si teraz predstaviť niektoré komerčné nástroje a rámce dostupné pre Visual Test Automation!
Obchodné nástroje
# 1) Applitools
Je to jeden z veľmi populárnych komerčných rámcov pre automatické vizuálne testovanie a vizuálne regresné testovanie. Tento nástroj poskytuje kognitívne videnie založené na umelej inteligencii. Využíva umelú inteligenciu, ktorá vám pomôže pri komplexnom vizuálnom testovaní a monitorovaní.
Pomocou aplikácie Applitools môžete automaticky testovať stovky komponentov používateľského rozhrania na všetkých platformách a konfiguráciách bez toho, aby ste museli písať akýkoľvek kód alebo len s minimálnym kódom. Má podporu pre viac ako 40 testovacích rámcov a jazykov.
Podporuje tiež proces DevOps, kde môžete ľahko integrovať svoje vizuálne testovacie prípady do potrubia CI / CD. Tento nástroj tiež umožňuje vytvárať vlastné vizuálne správy.
Tento rámec využívajú niektoré špičkové spoločnosti vrátane spoločností Sony, SAP, MasterCard a PayPal. Má tiež veľmi pozitívne hodnotenia zákazníkov.
Predajca ponúka tri verzie tohto rámca, tj Starter, Enterprise Public Cloud a Enterprise Dedicated Cloud. O cenách sa bude musieť obrátiť na dodávateľa.
Webová stránka: Applitools
# 2) Vizuálne testovanie na krížovom prehliadaní
Crossbrowsertesting je webová testovacia platforma vyvinutá spoločnosťou SmartBear pre celý testovací proces. Tento nástroj pokrýva vizuálne testovanie aj vizuálne regresné testovanie.
Funkcia testovania snímok obrazovky, ktorú poskytuje tento nástroj, zachytáva snímky celej stránky a rýchlo pomáha pri hľadaní vizuálnych chýb a sledovaní vizuálnych nezrovnalostí. Ak chcete spustiť test snímok obrazovky, musíte zadať adresu URL a zvoliť niektoré prehľadávače.
Testy snímok obrazovky sú k dispozícii pre väčšinu stolných a populárnych mobilných zariadení. Môžete kombinovať a porovnávať rozlíšenie vášho prehliadača pre dynamické responzívne testovanie naprieč prehliadačmi pre počítače a mobilnými orientáciami. Váš test snímok obrazovky zachytí tri zobrazenia každej konfigurácie, tj. Bez okien, na celú stránku a na celú stránku bez chrómu.
Výsledky testov môžete rýchlo filtrovať a zobraziť vizuálne chyby. Môžete tiež prejsť na živý test a odladiť alebo opraviť vizuálne chyby. Miestne a vývojové prostredia môžete testovať pomocou nástroja na miestne pripojenie, ktorý poskytuje tento softvér.
Pre vizuálne regresné testovanie môžete po úspešnom vykonaní testu obrazovky naplánovať denný, týždenný alebo mesačný test. Nástroj odošle aj upozornenia na výsledky testu.
Tento nástroj má automatizovaný porovnávací nástroj na zaznamenávanie automatizovaných snímok obrazovky tej istej stránky v rôznych konfiguráciách. Odtiaľ môžete vybrať základný prehľadávač a potom vyhodnotiť zvýraznené rozdiely v rozložení.
Ponúka tiež niekoľko pokročilých možností, vďaka ktorým bude test silnejší. Medzi tieto možnosti patrí základné overenie totožnosti, profil prihlásenia, selénový skript, oneskorenie snímky obrazovky, odosielanie e-mailov, skrytie pevných prvkov atď.
Prečítajte si tiež = >> Ako vytvoriť snímku obrazovky v seléne
Toto je cenovo výhodný nástroj. K dispozícii je však aj bezplatná skúšobná verzia. Živá testovacia verzia tohto nástroja vás bude stáť 29 dolárov mesačne, automatické testovanie bude stáť 60 dolárov mesačne a neobmedzené testovanie 100 dolárov mesačne.
Webová stránka: Crossbrowsertesting
# 3) Percy vizuálne testovanie
Percy je jedným z výkonných nástrojov na automatizované vizuálne testovanie. Umožňuje vám integrovať, vykonávať a kontrolovať vizuálne testy. Integráciu je možné vykonať pomocou rámcov automatizácie testov, služieb CI / CD alebo priamo prostredníctvom vašej aplikácie.
Po integrácii môžeme začať vykonávať vizuálne testy požadované pre aplikácie a komponenty. Po spustení vizuálneho testu nástroj Percy extrahuje snímky obrazovky používateľského rozhrania v rôznych prehliadačoch a šírkach odpovedí. Potom vykoná porovnanie základnej čiary po jednotlivých pixeloch a identifikuje všetky relevantné vizuálne zmeny vo vašom používateľskom rozhraní.
Po vykreslení snímok obrazovky môžete skontrolovať, či neobsahujú akékoľvek vizuálne problémy.
čo môže prehrávať súbory .swf
Rozdiely medzi pixelmi a responzívnymi rozdielmi poskytované týmto nástrojom poskytujú vynikajúce vizuálne pokrytie. Funkcia stabilizácie snímky tiež minimalizuje falošné poplachy.
Toto je platený nástroj. Ponúka však tiež bezplatnú skúšobnú verziu. Platené verzie majú tri príchute, tj. Essential, Business a Enterprise. Cena verzie Essential je 29 dolárov mesačne, verzie Business cena 849 dolárov mesačne a verzia Enterprise je vytvorená na mieru podľa vašich potrieb, a preto sa jej cena bude líšiť podľa toho.
Webová stránka: Percy vizuálne testovanie
# 4) Screener.io
Toto je automatizovaný testovací nástroj, ktorý vám umožňuje zaznamenávať a vykonávať testy v cloude v reálnom čase. Testovacie toky je možné ľahko automatizovať bez potreby kódovania. Automaticky zisťuje nekonzistenciu používateľského rozhrania na rôznych platformách. Podporuje tiež testovanie komponentov rozprávkových kníh.
Umožňuje vám vizuálne testovať v kombinácii s funkčným testovaním v rovnakom testovacom behu, čím sa zvyšuje celkové pokrytie testom. Medzi spoločnosti využívajúce screener.io patria Yammer, Microsoft, uber atď.
Štartovací balíček tohto nástroja vás bude stáť okolo 249 dolárov / mesiac, balíček Perform za cenu 499 dolárov / mesiac a balík Enterprise má vlastné ceny na základe vašich požiadaviek.
Webová stránka: Screener.io
# 5) záverečný test
endtest je UI testovacia platforma, ktorá podporuje testovanie automatizácie bez kódovania pomocou strojového učenia. Umožňuje vám rýchlo vytvárať automatizované testy, ukladať ich a vykonávať priamo v cloude. Majú tiež chrómové rozšírenie, cez ktoré môžete zaznamenávať testy.
Tento nástroj má veľa funkcií, ako je generovanie náhodných testovacích údajov, pokročilé tvrdenie, automatické zálohovanie, geolokácia, živé videá, porovnanie snímok obrazovky atď.
Webová stránka: endtest
Záver
V tomto tutoriáli sme diskutovali o tom, aké dôležité je testovanie vizuálnej validácie v dnešnom scenári, keď softvérová aplikácia vyžaduje správne fungovanie na viacerých konfiguráciách veľkostí obrazoviek, mobilných zariadení, operačných systémov, rozlíšení obrazoviek atď.
Ak chcete dobrý dojem používateľa, potom je testovanie vizuálnej validácie rovnako dôležité ako funkčné testovanie. Kombinácia vizuálneho a funkčného testovania môže poskytnúť široké pokrytie testom.
Na testovanie vizuálnej validácie je k dispozícii široká škála otvorených a komerčných nástrojov a rámcov. V tomto tutoriáli sme diskutovali o niektorých najlepších nástrojoch. Tieto nástroje vám môžu skutočne pomôcť s automatizovaným vizuálnym testovaním a testovaním vizuálnej regresie.
Príjemné čítanie!
Odporúčané čítanie
- Najlepšie nástroje na testovanie softvéru 2021 (QA Test Automation Tools)
- Alfa testovanie a beta testovanie (kompletný sprievodca)
- Sprievodca validačnými testami
- 11 najlepších automatizačných nástrojov na testovanie aplikácií pre Android (Android App Testing Tools)
- Testovanie zabezpečenia siete a najlepšie nástroje zabezpečenia siete
- Funkčné testovanie vs. Nefunkčné testovanie
- Stiahnutie e-knihy Testing Primer
- Rozdiely medzi testovaním jednotiek, testovaním integrácie a funkčným testovaním