guide visual regression testing with visual testing tools
Ta izčrpen vodnik pojasnjuje vse o testiranju vizualne regresije. Vključuje tudi pregled brezplačnih in komercialnih orodij za vizualno testiranje, kot so Applitools, Percy, Screener itd.:
Testiranje vizualne regresije ali vizualno testiranje v programski opremi je dejavnost zagotavljanja kakovosti preverjanja, ali se vizualni vidiki uporabniškega vmesnika aplikacije zdijo uporabniku primerni. Znano je tudi kot testiranje vizualne validacije.
Njegov namen je preveriti, ali se na sprednjem delu aplikacije prikažejo pravilni podatki in vsebina. Poleg tega potrdi tudi postavitev in videz vsakega vizualnega elementa, ki je prisoten v uporabniškem vmesniku in celotnem uporabniškem vmesniku samem.
Kaj se boste naučili:
Testiranje vizualne regresije
Ko govorimo o pravilnosti postavitve, to pomeni, da je položaj, oblika in velikost vsakega elementa na zaslonu pravilna. Elementi se ne smejo prekrivati, morali bi biti vidni in ne skriti.
Tu se vizualni element lahko nanaša na sliko, stran, del strani ali del slike.
Preverjanje videza pomeni, da morajo biti pisava, barva, svetlost, kontrast, gostota, tekstura, vizualna teža, grafika itd. Vizualnih elementov videti pravilno.
Kaj je testiranje vizualne regresije?
Regresijsko testiranje zagotavlja, da kakršna koli sprememba programske opreme ne zlomi ničesar, kar je prej delovalo dobro.
Ko gre za vizualno testiranje, testiranje vizualne regresije zagotavlja, da se pri spremembah programske opreme ne pojavijo težave s slogom. Aplikacija bi morala še naprej izgledati tako dobro, kot je bila.
Orodje za testiranje vizualne regresije zajema posnetke zaslona trenutnega uporabniškega vmesnika in jih primerja s prvotnimi posnetki zaslona. Torej, vizualno regresijsko testiranje preučuje zgodovinske razlike. Potrjuje, da se spletna stran še vedno prikazuje po pričakovanjih v različnih brskalnikih tudi po spremembah kode.
Spodaj je prikaz zaslona preizkusa vizualne regresije, opravljenega s pomočjo avtomatiziranega orodja:
(slika vir )
V današnjih praksah nenehne integracije je testiranje vizualne regresije zelo pomembno, da zagotovimo, da nove spremembe ne povzročajo nereda v postavitvi, ko se aplikacija razvija od različice do različice in napreduje med brskalniki.
Mnoge organizacije uporabljajo testiranje vizualne regresije za snemanje različic določenih spletnih strani, da dokumentirajo, kako se spreminja iz ene v drugo ponovitev.
Pomen testiranja vizualne validacije
Ne glede na to, kako pravilno deluje funkcionalnost vaše aplikacije, kupcu ne bo koristila, če ne bo zagotovila dobrega uporabniškega vmesnika in uporabniške izkušnje.
Dandanes ne govorimo le o uporabniškem vmesniku (User Interface), temveč se veliko osredotočamo tudi na UX (uporabniško izkušnjo). Ko želimo doseči boljšo uporabniško izkušnjo, postane vizualno testiranje zelo pomembno, saj je privlačnejša vizualna zasnova uporabniku uporabnejša.
Oglejmo si spodnji primer s spletnega mesta Amazon:
(slika vir )
Na zgornji sliki lahko opazite, da se besedilo in slike prekrivata in niso pravilno poravnani. To je primer vizualne napake, ki lahko ustvari slabo uporabniško izkušnjo, saj kupec ne bo mogel izvesti predvidenega dejanja na spletnem mestu.
Vizualno oblikovanje na več načinov oblikuje uporabniško izkušnjo.
Na primer,
- Odlični vizualni modeli pomagajo graditi zaupanje in verodostojnost.
- Krepi podobo blagovne znamke.
- Vpliva na čitljivost.
- Oblikuje vizualno ravnovesje na zaslonu.
- Uporabnike usmerja k dejanjem.
- Prepriča oko, da svojo pozornost preusmeri na določene elemente strani.
Dandanes imamo na voljo veliko različnih operacijskih sistemov, spletnih brskalnikov, ločljivosti zaslona in naprav, zato je ključnega pomena zagotoviti, da je uporabniški vmesnik videti pravilno v vsaki od možnih kombinacij le-teh.
Že majhno izkrivljanje uporabniškega vmesnika lahko povzroči izgubo posla. Vizualne napake so lahko moteče in neprijetne za uporabnike ter jim povzročajo neprijetnosti.
Recimo, da se ukvarjate z bančnim poslovanjem in svojim strankam ponujate spletno aplikacijo za mobilno bančništvo.
Nekatere stranke dobijo pritožbe, da ko želijo nakazati denar nekomu na račun in potem, ko izpolnijo vse zahtevane podatke, ne morejo najti ‘Pošlji’ na zaslonu in to je zanje dražilno.
Ko raziščete težavo, ugotovite, da se gumb za oddajo skrije v določeni ločljivosti zaslona za mobilne telefone Android in zato vsi kupci s telefoni Android s to velikostjo zaslona niso mogli videti gumba za oddajo.
Funkcionalnost aplikacije je v tem primeru torej delovala dobro, vendar zaradi vizualne napake uporabniki niso mogli dokončati predvidenih dejanj v aplikaciji. Ta primer prikazuje, kako pomembno je, da vizualne vidike aplikacije preizkusite na vseh možnih konfiguracijah, preden aplikacijo dostavite strankam.
Nekatera področja, kjer je zelo priporočljivo testiranje vizualne validacije, so (ker bodo neposredno vplivala na vašo blagovno znamko):
katera plast modela osi se uporablja za stvari, kot so signali, bit, kabli in konektorji?
- Mobilne aplikacije
- Mobilni splet / odzivni splet
- Trženje spletnih strani
- Sistemi za upravljanje vsebin
- Potrošniški sistemi, kot so letalski prevozniki, potovanja, bančništvo itd.
Glede na njegov pomen bi morala podjetja za vizualno testiranje nameniti nekaj velikega truda in denarja. Če se uporablja v kombinaciji z obstoječimi testi za razvijalce, vam bo pomagal pri odkrivanju težav z vidom v zgodnjih fazah razvojnega življenjskega cikla.
Metode in procesi vizualnega testiranja
Kot razvijalci ali preizkuševalci pogosto delamo na preizkušanju funkcionalnosti aplikacij. S pomočjo ročnega ali kakšnega avtomatiziranega orodja preverimo, ali aplikacija deluje po pričakovanjih. Takšno testiranje funkcionalnosti je zelo pomembno za zagotovitev nemotenega delovanja aplikacije.
Če pa temu dodamo še vizualno testiranje, bi to znatno izboljšalo splošno testiranje. Tako se to testiranje pogosto izvaja v kombinaciji s funkcionalnim testiranjem.
Obstaja več preskusnih metod in postopkov za spopadanje z izzivi vizualnega testiranja aplikacij v širokih konfiguracijah. Na voljo je tudi veliko orodij, ki podpirajo testiranje vizualne validacije.
Na splošno obstajata dva glavna pristopa za testiranje vizualne validacije, tj. Na osnovi kode in na podlagi konfiguracije. Orodja za vizualno testiranje so prav tako razvrščena na podlagi teh dveh pristopov.
To lahko storite ročno ali avtomatizirano. Zaradi določenih izzivov ne more biti niti popolnoma ročen niti popolnoma avtomatiziran. Na splošno je zaželena kombinacija ročnega in avtomatiziranega pristopa.
Spodaj so navedene tri različne metode vizualnega testiranja, ki se jih običajno upošteva.
Skupine lahko izbirajo med katero koli od teh možnosti, odvisno od njihovih potreb:
# 1) Ustvarite namenske vizualne teste : To je najbolj priporočljiva metoda, saj vam daje popoln nadzor nad vizualno validacijo. Tudi s tem pristopom lahko pišete teste z zmernimi napori. Ampak ja, teste boste morali pisati iz nič in za to bo treba nekaj časa.
# 2) V obstoječe funkcionalne teste vstavite vizualne kontrolne točke: Pri tej metodi že imate teste za preverjanje funkcionalnosti aplikacije in med te teste dodate le nekaj vizualnih preverjanj, da preverite strani.
Seveda ta metoda omejuje vašo pokritost s testom, vendar je hiter način za vstavljanje vizualnih testov in izkoristite obstoječo kodo za funkcionalno testiranje.
# 3) V obstoječo ogrodje za preskušanje vstavite implicitno vizualno preverjanje: Ta način je zelo enostaven za uporabo, saj zahteva le nekaj vrstic kode. Vendar ima omejitev, da lahko v tem primeru opravite tudi generično preverjanje. V okviru ne morete preveriti določenih komponent.
Ko gremo naprej, bomo razpravljali o ročnem in avtomatiziranem vizualnem testiranju. Podrobno bomo preverili tudi orodja in okvire za vizualno testiranje.
Ročno vizualno testiranje
Podjetja, ki se ukvarjajo s programsko opremo, imajo dve možnosti za izvedbo vizualnega testiranja, tj. Oglejmo si podrobno ročno vizualno testiranje.
Čeprav je ročno testiranje lahko počasno, drago in nagnjeno k napakam, zaradi subjektivne narave zasnove vmesnika pogosto ni mogoče imeti avtomatiziranega testa, ki bi zajel pravilnost vsakega scenarija. Torej, včasih moramo izbrati ravnovesje med ročnim in samodejnim testiranjem.
Ena glavnih prednosti ročnega testiranja s strani človeka je lahko zunaj obsega testa. Test avtomatizacije lahko zajame samo težavo, ki je v njegovem obsegu, toda pri ročnem preizkusu lahko človeški tester opazi tudi druge kozmetične napake in druge stvari, ki na uporabniškem vmesniku niso pravilne.
Ker so ročni testi bližje dejanskim uporabniškim dejanjem, lahko zajamejo napake pri postavitvi in težave z načrtovanjem, ki se običajno odkrijejo, ko dejanski uporabnik sodeluje z aplikacijo.
Na ročno preizkušanje se lahko odpravite v zgodnjih fazah razvoja aplikacije, ko je vaš uporabniški vmesnik nestabilen. Prav tako je koristno za ad-hoc testiranje, kadar morate opraviti hitre preglede na kraju samem.
Pri ročnem testiranju vizualne validacije mora tester ročno preveriti videz in postavitev vizualnih elementov. To lahko vključuje snemanje trenutnih posnetkov zaslona in nato ročno primerjavo z osnovnimi posnetki zaslona, da se ugotovijo morebitne vrzeli.
Drug učinkovit način za ročno preskušanje je uporaba raziskovalca komponent. V tem definirate testna stanja, z raziskovalcem izberete stanje in komponento in preverite na zaslonu. Eno takšnih orodij je React Storybook, kjer lahko komponente UI razvijate samostojno.
Preizkuševalec lahko s to metodo zažene ročni test komponente, preveri, kako se upodobi, in ugotovi, ali deluje v redu ali ne.
Koraki ročnega preskušanja:
- Pobrskajte po aplikaciji in posnemite znane dobre osnovne posnetke zaslona.
- Kasneje naredite še en posnetek zaslona iz najnovejše različice aplikacije.
- Zdaj pa ročno primerjajte te posnetke zaslona (osnovno in trenutno), da ugotovite vizualne napake.
Avtomatizirano vizualno testiranje
Avtomatizirano vizualno testiranje je način za samodejno preverjanje, ali je uporabniški vmesnik vizualno videti, kot je predvideno.
Prednosti avtomatizacije vizualnih testov so, da ponujajo dolgoročno stroškovno učinkovitost, so hitrejši od ročnih, natančnejši, saj lahko izključijo človeške napake in podajo vizualne teste, popolne v slikovnih pikah, so večkrat in pregledni, saj ponujajo samodejna poročila enostaven in lahko dostopen vsem v ekipi.
Nekatere omejitve avtomatiziranega vizualnega testiranja so, da lahko pride do velikih vnaprejšnjih stroškov, zato se boste morali precej potruditi pri vzdrževanju testa, da se prilagodite vsaki spremembi.
Pri preizkušanju avtomatizacije je obseg ožji, razen če ni na voljo preizkus zaslona. Obstaja tudi strma krivulja učenja, saj si organizacije vzamejo čas za učenje orodij za testiranje avtomatizacije.
Če želite nadaljevati z avtomatizacijo, bi bila dobra izbira, če morate izvesti regresijsko vizualno testiranje, da se spoprimete s pogostimi spremembami stabilnega uporabniškega vmesnika. Avtomatizirano testiranje pomaga tudi pri odlični vizualni primerjavi posnetkov zaslona.
Avtomatizirana primerjava posnetkov zaslona ponuja visoko stopnjo natančnosti pri vizualnem testiranju in povečuje donosnost naložbe. Avtomatizirana primerjava posnetkov zaslona lahko zajame tiste napake, ki jih je nemogoče zaznati s človeškimi očmi in ročno primerjavo. V pomoč je tudi na koncu testiranje zapletenih uporabniških zgodb.
Za avtomatizirano testiranje je na voljo široko paleto odprtokodnih in komercialnih orodij.
Spodnja slika prikazuje, kako je mogoče vizualno preverjanje veljavnosti avtomatizirati s katerim koli programskim jezikom:
(slika vir )
Spodaj je splošen potek avtomatizacije vizualnih testov:
(slika vir )
Kot je prikazano v zgornjem diagramu poteka dela, so pri samodejnem vizualnem testiranju vključeni 4 koraki:
Korak 1 : V tem koraku moramo voziti aplikacijo in preskus ter zajeti posnetke zaslona.
2. korak : V tem koraku orodje za avtomatizacijo primerja te posnetke zaslona z osnovnimi posnetki zaslona. Osnovni posnetki zaslona so na splošno slike, ki so bile posnete v prejšnjih preizkusih in jih je preizkusil tester.
3. korak: Ko orodje pridobi rezultate primerjav slik, ustvari poročilo, ki poudari vse ugotovljene razlike.
Na primer,spodnja slika prikazuje eno od orodij za avtomatizacijo preskusov, ki poudarja razlike v kotni aplikaciji:
4. korak : V zadnjem koraku preizkuševalec pregleda poročilo in za vsako razliko preveri, ali gre za napako ali veljavno spremembo (lažno pozitivni rezultati). Na podlagi tega se posodobijo osnovne slike.
Za prvi poskusni zagon nimate osnovnih slik. Torej se slike, pridobljene v prvem zagonu, običajno obravnavajo kot osnovne slike. Od naslednje vožnje naprej se primerjajo s posnetki zaslona.
Najboljše prakse za avtomatizirano vizualno testiranje
- Izberite orodje, ki je dovolj pametno, da prezrete lažne pozitivne učinke. Orodje bi moralo biti sposobno obvladovati izravnavo, odmike slikovnih pik itd. In zaradi teh razlogov ne uspe na vaših testih.
- Avtomatizacija preskusov mora biti sposobna obvladovati dinamično in premikajočo se vsebino.
- Ne zanašajte se na razmerja napak ali konfiguracijo pragov. Pomembno bi bilo le, ali lahko človek vidi to razliko in ali bo to vplivalo na uporabniško izkušnjo?
- Algoritem za avtomatizacijo mora biti sposoben analizirati strukturo strani in primerjati postavitve.
- Raje preverite preverjanje strani s celotnim uporabniškim vmesnikom namesto posameznih komponent. To bo zagotovilo večjo in boljšo pokritost. V primeru preverjanja veljavnosti samo določenih komponent lahko zamudite nepričakovane napake.
Avtomatizirana orodja za testiranje in okviri za vizualno testiranje
Danes je na trgu na voljo široko paleto (skoraj 30 plus) orodij za avtomatizirano vizualno testiranje. Nekatera od teh orodij so odprtokodna, druga pa komercialna. Večina teh orodij deluje na enak način, vendar sledijo drugačnemu poteku dela glede na ciljno skupino.
Za front-end razvijalce obstajata dve vrsti ogrodja, ki sodelujeta pri vizualnem testiranju. Najprej potrebujete preskusni program, ki vam omogoča pisanje in izvajanje preizkusov. Drugič, za kopiranje uporabniških interakcij potrebujete ogrodje za avtomatizacijo brskalnika. Ta dva okvira se skupaj imenujeta Visual test code.
S pomočjo teh okvirov za testiranje razvijalci ustvarijo kodo, ki posnema dejanska uporabniška dejanja, kot je tipkanje besedila ali klikanje gumbov. Testna koda ima ukaze za posnetek zaslona na ustreznih točkah. Ko se test izvede prvič, se posname začetni nabor posnetkov zaslona.
Ti posnetki zaslona delujejo kot izhodišče za primerjavo ob kakršnih koli spremembah v aplikaciji. Ko je osnova osnova, razvijalec izvede kodo v ozadju. Ko je sprememba najdena, je posnet posnetek zaslona spremembe.
Testni tekač primerja ta posnetek zaslona z osnovnim posnetkom zaslona za to področje kode. Če se med slikami ugotovijo kakršne koli razlike, se test šteje za neuspeh in se poroča o vizualni napaki.
Ko se izvede celotna testna koda, se poročilo samodejno ustvari. To poročilo človeški tester ročno pregleda, da preveri vse slike zaslona, ki se razlikujejo od osnovnih slik. Nekatera orodja ustvarijo različno sliko, da poudarijo razliko med dejanskim in pričakovanim posnetkom zaslona.
Če je razliko povzročila težava v kodi, lahko razvijalec to težavo odpravi in ponovno zažene kodo. Če je razlika posledica zahtevane spremembe uporabniškega vmesnika aplikacije, razvijalec pregleda to sliko zaslona in posodobi osnovni posnetek zaslona, tako da je mogoče opraviti prihodnje teste.
Vizualno testiranje vključuje brezplačna in plačljiva orodja. Podrobno se pogovorimo o orodjih.
Seznam najboljših orodij za vizualno testiranje
Odprtokodna in brezplačna orodja na osnovi kode / skripta
Spodaj je naveden seznam orodij za vizualno preverjanje na osnovi kode, ki so odprtokodna in so na voljo brezplačno.
- PhantomCSS (UJs CapserJs)
- FBSnapshotTestCase (Uporablja XCTest)
- Dvojčka (Uporablja JS DSL)
- Igla (Uporablja Python)
- Regresija strani Rspec (Uporablja Capibara)
- Pix-Diff (Uporablja JS in kotomer)
- Selen Visual Diff (Uporablja Java in WD)
- Vizregress (Uporablja .NET in WD)
- VisualCeption (Uporablja PHP in CodeCeption)
- spekter (Uporablja JS DSL)
Odprtokodna in brezplačna orodja na osnovi konfiguracije
Orodja za vizualno preverjanje na osnovi konfiguracije, ki so odprtokodna in so na voljo brezplačno, so spodaj navedena za referenco:
- BaskstopJS
- dpxdtMake - Prikazana
- CSSCritic
- Grunt Photobox
- VIFF
- Zelena čebula
- leprechaun
- Vizualni test CSS
- Snap In Primerjaj
- Grunt-Vigo
- Galen Framework
- Automotion
Ne bomo se poglabljali v vsako od zgornjih orodij, vendar se na kratko pogovorimo o najboljših.
Fantomski CSS je eno izmed zelo priljubljenih odprtokodnih orodij za vizualno preverjanje veljavnosti. Ima 4.768 zvezd GitHub. Pomaga vam z avtomatiziranim testiranjem vizualne regresije. Za posnetke zaslona uporablja CasperJS in jih z Resemble.js primerja z osnovnimi posnetki zaslona.
(slika vir )
Ustvari razlike v sliki na podlagi razlik v slikovnih pikah RGB. To orodje je uporabno le, če je uporabniški vmesnik predvidljiv.
FBSnapshotTestCase je tudi drugo priljubljeno orodje v tej kategoriji. Ima 880 zvezd GitHub.
Zajame konfigurirani UIView ali CALayer in uporabi metodo, imenovano upodabljanje InContext: za pridobitev slikovnega posnetka njene vsebine. Ta slika se ujema z 'referenčno sliko', ki je shranjena v shrambi izvorne kode, in ne uspe, če se posnetka ne ujemata.
BackstopJS je vodilno orodje v kategoriji orodij, ki temeljijo na konfiguraciji. Ujame krivulje CSS. Je avtomatizirano orodje za testiranje vizualne regresije, ki lahko preizkusi odzivni spletni uporabniški vmesnik tako, da sčasoma uskladi posnetke zaslona DOM.
Je enostavno orodje z nekaj odličnimi funkcijami, kot je uporabniški vmesnik za poročanje v brskalniku, integrirano upodabljanje priklopne postaje, poročila JUnit, poročila CLI itd.
Galen framework je tudi eden izmed znanih odprtokodnih okvirov za testiranje vizualne validacije. S tem orodjem lahko samodejno preizkusite postavitev in odzivno oblikovanje spletnih aplikacij.
(slika vir )
Ta okvir dobro deluje v selenovi mreži.
Pogovorimo se o nekaterih komercialnih orodjih in okvirih, ki so na voljo za avtomatizacijo vizualnih testov!
Komercialna orodja
# 1) Applitools
Je eden izmed zelo priljubljenih komercialnih okvirov za avtomatizirano vizualno testiranje in testiranje vizualne regresije. To orodje zagotavlja kognitivni vid na osnovi umetne inteligence. Uporablja umetno inteligenco, da vam pomaga pri vizualnem testiranju in spremljanju.
Z Applitools lahko samodejno preizkusite na stotine komponent uporabniškega vmesnika na vseh platformah in konfiguracijah brez pisanja kode ali z zelo minimalno kodo. Podpira več kot 40 testnih okvirov in jezikov.
Podpira tudi postopek DevOps, kjer lahko vizualne testne primere enostavno vključite v cevovod CI / CD. To orodje vam omogoča tudi ustvarjanje vizualnih poročil po meri.
Ta okvir uporabljajo nekatera vrhunska podjetja, vključno s Sony, SAP, MasterCard in PayPal. Ima tudi zelo pozitivne ocene strank.
Prodajalec ponuja tri različice tega okvira, to so Starter, Enterprise Public Cloud in Enterprise Dedicated Cloud. Za cene se boste morali obrniti na prodajalca.
Spletna stran: Applitools
# 2) Vizualno testiranje z navzkrižnim pregledovanjem
Crossbrowsertesting je platforma za spletno testiranje, ki jo je za celoten postopek testiranja razvil SmartBear. To orodje zajema vizualno testiranje in vizualno regresijsko testiranje.
Funkcija preizkušanja posnetkov zaslona, ki jo ponuja to orodje, zajema posnetke zaslona na celotni strani in hitro pomaga pri iskanju vizualnih napak in sledenju vizualnim nedoslednostim. Če želite začeti preizkus posnetka zaslona, morate navesti URL in izbrati nekaj brskalnikov.
Preskusi zaslona so na voljo za večino namiznih naprav in priljubljenih mobilnih naprav. Ločljivost brskalnika lahko kombinirate in prilagodite za dinamično odzivno testiranje v namiznih brskalnikih in mobilnih usmeritvah. Preizkus zaslona bo zajemal tri poglede vsake konfiguracije, tj. Brez oken, z okni, celo stran in celo stran.
Rezultate testov lahko hitro filtrirate in si ogledate vizualne napake. Lahko tudi preskočite na preizkus v živo in odpravite napake ali popravite vidne napake. Lokalno in razvojno okolje lahko preizkusite z orodjem za lokalno povezavo, ki ga nudi ta programska oprema.
Ko preizkusite vizualno regresijo, potem ko ste uspešno izvedli preizkus zaslona, ga lahko načrtujete dnevno, tedensko ali mesečno. Orodje bo poslalo tudi obvestila o rezultatih testa.
To orodje ima avtomatiziran primerjalni mehanizem za zajemanje samodejnih posnetkov zaslona iste strani v različnih konfiguracijah. Od tu lahko izberete osnovni brskalnik in nato ocenite poudarjene razlike v postavitvi.
Ponuja tudi nekaj naprednih možnosti, s katerimi bo vaš test močnejši. Te možnosti vključujejo osnovno preverjanje pristnosti, prijavni profil, skript selenium, zakasnitev zaslona, pošiljanje e-pošte, skrivanje fiksnih elementov itd.
Preberite tudi = >> Kako narediti posnetek zaslona v selenu
To je cenovno orodje. Na voljo pa je tudi brezplačna preskusna različica. Preizkusna različica tega orodja v živo vas bo stala 29 USD / mesec, avtomatizirano testiranje je 60 USD / mesec, neomejeno testiranje pa 100 USD / mesec.
Spletna stran: Crossbrowsertesting
# 3) Vizualno testiranje Percyja
Percy je eno močnih orodij za avtomatizirano vizualno testiranje. Omogoča vam integracijo, izvajanje in pregled vizualnih testov. Integracijo lahko izvedete prek okvirov za avtomatizacijo preskusov, storitev CI / CD ali neposredno prek vaše aplikacije.
Po integraciji lahko začnemo izvajati vizualne teste, potrebne za aplikacije in komponente. Ko se začne vizualni test, orodje Percy ekstrahira posnetke zaslona uporabniškega vmesnika v različnih brskalnikih in odzivnih širinah. Nato opravi primerjavo osnovnih slikovnih pik in prepozna vse pomembne vizualne spremembe v vašem uporabniškem vmesniku.
Ko so posnetki zaslona upodobljeni, jih lahko pregledate glede morebitnih vizualnih težav.
Razlike med slikovnimi pikami in odzivne razlike, ki jih ponuja to orodje, zagotavljajo odlično vizualno pokritost. Poleg tega funkcija stabilizacije posnetka zmanjša lažne pozitivne učinke.
To je plačljivo orodje. Vendar pa ponuja tudi brezplačno preskusno različico. Plačljive različice imajo tri okuse, to so Essential, Business in Enterprise. Različica Essential je na voljo 29 USD na mesec, poslovna različica je 849 USD na mesec, različica Enterprise pa je ustvarjena po meri po vaših željah, zato se bo tudi cena spreminjala.
Spletna stran: Percyjevo vizualno testiranje
# 4) Screener.io
To je avtomatizirano orodje za testiranje, ki vam omogoča beleženje in izvajanje testov v realnem času v oblaku. Preizkusne tokove je mogoče enostavno avtomatizirati brez kodiranja. Samodejno opazi nedoslednosti uporabniškega vmesnika na različnih platformah. Podpira tudi preizkušanje komponent zgodbe.
Omogoča vam vizualno testiranje v kombinaciji s funkcionalnim testiranjem v istem testnem zagonu, kar poveča splošno pokritost s testom. Podjetja, ki uporabljajo screener.io, vključujejo Yammer, Microsoft, uber itd.
Začetni paket tega orodja vas bo stal približno 249 USD na mesec, paket Perform je na voljo 499 USD na mesec, paket Enterprise pa ima cene po meri glede na vaše potrebe.
Spletna stran: Sito.io
# 5) končni test
endtest je platforma za testiranje uporabniškega vmesnika, ki podpira testiranje brezkodne avtomatizacije s pomočjo strojnega učenja. Omogoča vam hitro ustvarjanje avtomatiziranih testov, njihovo shranjevanje in izvajanje neposredno v oblaku. Imajo tudi kromiran podaljšek, skozi katerega lahko snemate teste.
To orodje ima veliko funkcij, kot so ustvarjanje naključnih testnih podatkov, napredna trditev, samodejno varnostno kopiranje, geolokacija, video posnetki v živo, primerjava posnetkov zaslona itd.
Spletna stran: endtest
Zaključek
V tej vadnici smo razpravljali o tem, kako pomembno je testiranje vizualne validacije v današnjem scenariju, ko mora programska aplikacija dobro delovati na več konfiguracijah velikosti zaslona, mobilnih naprav, operacijskih sistemov, ločljivosti zaslona itd.
Če želite dobro uporabniško izkušnjo, je testiranje vizualne validacije enako pomembno kot funkcionalno testiranje. Vizualno testiranje in funkcionalno testiranje v kombinaciji lahko zagotovita široko pokritost s testi.
Za testiranje vizualne validacije je na voljo široko paleto odprtokodnih in komercialnih orodij in okvirov. V tej vadnici smo razpravljali o nekaterih najboljših orodjih. Ta orodja vam lahko resnično pomagajo pri samodejnem vizualnem testiranju in testiranju vizualne regresije.
Veselo branje!
Priporočeno branje
- Najboljša orodja za testiranje programske opreme 2021 (QA Test Automation Tools)
- Alfa testiranje in beta testiranje (popoln vodnik)
- Končni vodnik za preverjanje veljavnosti
- 11 najboljših orodij za avtomatizacijo za testiranje aplikacij za Android (orodja za testiranje aplikacij za Android)
- Testiranje omrežne varnosti in najboljša orodja za omrežno varnost
- Funkcionalno testiranje vs nefunkcionalno testiranje
- Preizkus eBook Prenos knjige
- Razlike med preskušanjem enot, preskušanjem integracije in funkcionalnim preskušanjem