Vizualinis testavimas: ekrano kopijų palyginimo įvaldymas patikimoms vartotojo sąsajoms

Šiuolaikiniame sparčiai besivystančiame programinės įrangos kūrimo pasaulyje, nuoseklios ir vizualiai patrauklios vartotojo sąsajos (UI) pateikimas yra itin svarbus. Atrodytų, nedidelė vizualinė klaida gali ženkliai paveikti vartotojo patirtį, prekės ženklo reputaciją ir, galiausiai, verslo sėkmę. Vizualinis testavimas, ypač ekrano kopijų palyginimas, tapo galinga technika, užtikrinančia UI kokybę ir apsaugančia nuo vizualinių regresijų.

Kas yra vizualinis testavimas?

Vizualinis testavimas, dar žinomas kaip vizualinės regresijos testavimas, yra programinės įrangos testavimo tipas, kurio metu tikrinami vizualiniai aplikacijos vartotojo sąsajos aspektai. Skirtingai nuo tradicinio funkcinio testavimo, kurio metu daugiausia tikrinamas funkcionalumas ir duomenų vientisumas, vizualinis testavimas užtikrina, kad UI būtų teisingai atvaizduojamas įvairiose naršyklėse, įrenginiuose, operacinėse sistemose ir ekrano dydžiuose. Pagrindinis tikslas – aptikti nenumatytus vizualinius pokyčius ar neatitikimus, kurie gali atsirasti dėl kodo pakeitimų, atnaujinimų ar aplinkos pokyčių.

Ekrano kopijų palyginimas: vizualinio testavimo pagrindas

Ekrano kopijų palyginimas yra labiausiai paplitusi ir plačiausiai taikoma vizualinio testavimo technika. Ji apima UI skirtingų būsenų ekrano kopijų fiksavimą ir jų palyginimą su baziniais arba "auksiniais" atvaizdais. Bazinis atvaizdas atspindi tikėtiną UI išvaizdą tam tikroje būsenoje. Atlikus kodo pakeitimus, generuojamos naujos ekrano kopijos ir lyginamos su atitinkamais baziniais atvaizdais. Jei aptinkami kokie nors vizualiniai skirtumai, testas laikomas nesėkmingu, o tai rodo galimą vizualinę regresiją.

Kaip veikia ekrano kopijų palyginimas: žingsnis po žingsnio vadovas

1. Bazinių atvaizdų fiksavimas: Pradinis žingsnis yra UI ekrano kopijų fiksavimas norimoje būsenoje. Šios ekrano kopijos tarnauja kaip baziniai arba "auksiniai" atvaizdai, su kuriais bus lyginami vėlesni pakeitimai. Svarbu užtikrinti, kad baziniai atvaizdai būtų tikslūs ir atspindėtų numatytą UI vizualinę išvaizdą.
2. Automatizuoto testavimo vykdymas: Įdiekite automatizuotus testus, kurie sąveikauja su UI ir aktyvuoja konkrečius scenarijus ar darbo eigas. Šie testai automatiškai fiksuos UI ekrano kopijas iš anksto nustatytuose taškuose.
3. Ekrano kopijų palyginimas: Užfiksuotos ekrano kopijos lyginamos su atitinkamais baziniais atvaizdais naudojant atvaizdų palyginimo algoritmus. Šie algoritmai analizuoja atvaizdų skirtumus pikselis po pikselio ir nustato bet kokius vizualinius neatitikimus.
4. Skirtumų analizė ir ataskaitų teikimas: Jei aptinkami vizualiniai skirtumai, testavimo įrankis sugeneruoja išsamią ataskaitą, pabrėžiančią konkrečias sritis, kuriose atsiranda neatitikimų. Ši ataskaita paprastai apima vizualų skirtumų pavaizdavimą, pvz., paryškintą sritį arba skirtumų atvaizdą.
5. Peržiūra ir patvirtinimas: Nustatytus vizualinius skirtumus peržiūri kūrėjai arba kokybės užtikrinimo (QA) inžinieriai, siekdami nustatyti, ar jie yra tyčiniai, ar netyčiniai. Tyčiniams pakeitimams, pvz., UI atnaujinimams ar funkcijų patobulinimams, reikia atnaujinti bazinius atvaizdus. Netyčiniai pakeitimai rodo galimas vizualines regresijas, kurias reikia ištaisyti.

Vizualinio testavimo su ekrano kopijų palyginimu privalumai

Vizualinis testavimas su ekrano kopijų palyginimu suteikia daug privalumų programinės įrangos kūrimo komandoms:

• Ankstyvas vizualinių regresijų aptikimas: Vizualinis testavimas padeda anksti aptikti vizualines regresijas kūrimo cikle, neleidžiant joms pasiekti gamybinės aplinkos ir paveikti galutinių vartotojų.
• Pagerinta UI kokybė: Užtikrindamas, kad UI būtų teisingai atvaizduojamas įvairiose platformose ir įrenginiuose, vizualinis testavimas prisideda prie aukštesnės kokybės vartotojo patirties.
• Sumažintos rankinio testavimo pastangos: Automatizavus vizualinį testavimą, žymiai sumažėja rankinio vizualinio tikrinimo poreikis, o tai leidžia QA inžinieriams sutelkti dėmesį į sudėtingesnes testavimo užduotis.
• Greitesni išleidimo ciklai: Automatizuodamos vizualinį testavimą, kūrimo komandos gali pagreitinti išleidimo ciklus ir dažniau teikti naujas funkcijas bei atnaujinimus, nepakenkiant UI kokybei.
• Patobulintas bendradarbiavimas: Vizualinio testavimo įrankiai dažnai suteikia bendradarbiavimo funkcijų, kurios leidžia kūrėjams, QA inžinieriams ir dizaineriams kartu peržiūrėti ir tvirtinti vizualinius pakeitimus.
• Pagerintas prekės ženklo nuoseklumas: Užtikrina vizualinį nuoseklumą skirtingose platformose ir įrenginiuose, stiprinant prekės ženklo identitetą ir vartotojų pasitikėjimą.

Vizualinio testavimo su ekrano kopijų palyginimu iššūkiai

Nors vizualinis testavimas su ekrano kopijų palyginimu suteikia didelių privalumų, jis taip pat kelia tam tikrų iššūkių:

• Darbas su dinaminiu turiniu: Dinaminis turinys, pvz., laiko žymos, reklamos ar animacijos, gali sukelti klaidingai teigiamus rezultatus ekrano kopijų palyginime. Šią problemą gali sušvelninti strategijos, tokios kaip konkrečių sričių ignoravimas arba dinaminis maskavimas. Pavyzdžiui, naujienų svetainė rodo dinamines antraštes. Kiekvieno testo metu būtų užfiksuotos skirtingos antraštės, o tai, jei netinkamai valdoma, lemtų testo nesėkmę.
• Kelių naršyklių ir kelių platformų skirtumų valdymas: Skirtingos naršyklės ir operacinės sistemos gali šiek tiek skirtingai atvaizduoti UI elementus, o tai lemia teisėtus vizualinius skirtumus. Svarbu sukonfigūruoti testavimo aplinką taip, kad ji atsižvelgtų į šiuos skirtumus. Pavyzdžiui, šriftai gali būti skirtingai atvaizduojami „Chrome“ naršyklėje „macOS“ sistemoje ir „Firefox“ naršyklėje „Windows“ sistemoje.
• Bazinių atvaizdų priežiūra: Vystantis UI, bazinius atvaizdus reikia atnaujinti, kad jie atspindėtų tyčinius pakeitimus. Bazinių atvaizdų priežiūra gali tapti sudėtinga, ypač didelėms ir sudėtingoms aplikacijoms. Pavyzdžiui, didelė el. prekybos svetainė su šimtais puslapių ir dažnais UI atnaujinimais; bazinių atvaizdų valdymas gali tapti didele užduotimi.
• Tinkamo palyginimo algoritmo pasirinkimas: Skirtingi atvaizdų palyginimo algoritmai turi skirtingą jautrumo ir tikslumo lygį. Svarbu pasirinkti tinkamą algoritmą konkrečiai aplikacijai. Algoritmai skiriasi greičiu ir tikslumu, dažnai aukojant vieną dėl kito.
• Testavimo aplinkos nuoseklumas: Patikimiems vizualinio testavimo rezultatams užtikrinti būtina nuosekli testavimo aplinka. Tokie veiksniai kaip šriftų prieinamumas, operacinės sistemos nustatymai ir naršyklės versijos gali paveikti vizualinį UI atvaizdavimą.
• Našumo aspektai: Vizualinių testų vykdymas gali reikalauti daug resursų, ypač dirbant su dideliu kiekiu ekrano kopijų. Svarbu optimizuoti testavimo procesą ir infrastruktūrą, siekiant sumažinti našumo sąnaudas.

Geriausios efektyvaus vizualinio testavimo praktikos

Norėdami maksimaliai padidinti vizualinio testavimo su ekrano kopijų palyginimu efektyvumą, apsvarstykite šias geriausias praktikas:

• Nustatykite aiškius vizualinio priėmimo kriterijus: Apibrėžkite aiškius ir išmatuojamus vizualinio priėmimo kriterijus, kurie nusako tikėtiną UI išvaizdą. Tai padeda užtikrinti nuoseklumą ir aiškumą testavimo procese.
• Išskirkite testavimo atvejus: Kurkite testavimo atvejus, kurie sutelkti į konkrečius UI komponentus ar funkcionalumus, kad sumažintumėte nesusijusių pakeitimų poveikį.
• Naudokite patikimą ekrano kopijų palyginimo įrankį: Pasirinkite ekrano kopijų palyginimo įrankį, kuris suteikia tikslias ir patikimas atvaizdų palyginimo galimybes, taip pat funkcijas, skirtas valdyti bazinius atvaizdus ir analizuoti vizualinius skirtumus.
• Įdiekite versijų kontrolės sistemą baziniams atvaizdams: Saugokite bazinius atvaizdus versijų kontrolės sistemoje, pvz., „Git“, kad galėtumėte sekti pakeitimus ir palengvinti bendradarbiavimą.
• Integruokite vizualinį testavimą į CI/CD procesą: Integruokite vizualinį testavimą į nuolatinės integracijos ir nuolatinio pristatymo (CI/CD) procesą, kad užtikrintumėte, jog vizualinės regresijos būtų aptiktos anksti kūrimo cikle.
• Automatizuokite bazinių atvaizdų atnaujinimus: Automatizuokite bazinių atvaizdų atnaujinimo procesą, kad supaprastintumėte darbo eigą ir sumažintumėte rankinio darbo pastangas.
• Reguliariai peržiūrėkite ir tobulinkite vizualinius testus: Reguliariai peržiūrėkite ir tobulinkite vizualinius testus, kad užtikrintumėte, jog jie išliktų aktualūs ir veiksmingi vystantis UI.
• Atsižvelkite į skirtingus peržiūros langus ir įrenginius: Testuokite skirtinguose peržiūros languose (stalinis kompiuteris, planšetė, mobilusis) ir įrenginiuose, kad užtikrintumėte adaptyvųjį dizainą ir vizualinį nuoseklumą.
• Naudokite ignoravimo sritis arba dinaminį maskavimą: Norėdami valdyti dinaminį turinį, pvz., datas, reklamas ar animacijas, naudokite ignoravimo sritis arba dinaminį maskavimą, kad išvengtumėte klaidingai teigiamų rezultatų.
• Testuokite skirtingose aplinkose: Užtikrinkite, kad testai būtų vykdomi parengiamojoje (staging) ir gamybinėje aplinkose, kad būtų galima aptikti specifinių aplinkų vizualines problemas.

Populiarūs vizualinio testavimo įrankiai

Yra keletas puikių vizualinio testavimo įrankių, kurių kiekvienas turi savo stipriąsias ir silpnąsias puses. Štai keletas populiariausių variantų:

• Percy.io: Debesijos pagrindu veikianti vizualinio testavimo platforma, teikianti išsamias vizualinės regresijos testavimo galimybes. „Percy“ sklandžiai integruojasi su populiariais CI/CD įrankiais ir siūlo funkcijas baziniams atvaizdams valdyti, vizualiniams skirtumams analizuoti ir bendradarbiauti su komandos nariais. „Percy“ atvaizduoja jūsų aplikaciją stabilioje, pakartojamoje aplinkoje, fiksuodama viso puslapio momentines nuotraukas.
• Applitools: Kita debesijos pagrindu veikianti vizualinio testavimo platforma, kuri naudoja dirbtiniu intelektu pagrįstą atvaizdų palyginimą vizualinėms regresijoms aptikti. „Applitools“ siūlo pažangias funkcijas, tokias kaip išdėstymo analizė, turinio išgavimas ir kelių naršyklių testavimas. „Applitools“ naudoja „vizualinio DI“ variklį, kad suprastų vizualinius elementus puslapyje ir tiksliau nei pikselių palyginimas aptiktų anomalijas.
• BackstopJS: Atvirojo kodo vizualinės regresijos testavimo įrankis, veikiantis naršyklėje. „BackstopJS“ lengva nustatyti ir naudoti, jis suteikia pagrindines ekrano kopijų palyginimo galimybes. „BackstopJS“ yra „Node.js“ įrankis, naudingas testuojant adaptyviasias žiniatinklio vartotojo sąsajas, lyginant ekrano kopijas su bazine versija.
• Wraith: „Ruby“ pagrindu sukurtas ekrano kopijų palyginimo įrankis, kuris generuoja skirtumų atvaizdus, pabrėžiančius vizualinius skirtumus. „Wraith“ yra lankstus ir pritaikomas įrankis, kurį galima naudoti tiek vizualinės regresijos testavimui, tiek svetainių palyginimui. „Wraith“ sutelkia dėmesį į išsamių vizualinių skirtumų generavimą, kad būtų lengviau derinti kodą.
• Diffy: Atvirojo kodo vizualinės regresijos testavimo įrankis, kuris naudoja „ImageMagick“ ekrano kopijoms palyginti. „Diffy“ yra paprastas ir lengvas įrankis, kurį lengva integruoti į esamas testavimo darbo eigas. „Diffy“ yra geras pasirinkimas mažesniems projektams dėl savo paprastumo.
• Selenium su ekrano kopijų palyginimo bibliotekomis: Bibliotekos, tokios kaip „Ashot“ ar „Eyes.Selenium“ („Applitools“), gali būti naudojamos su „Selenium“ ekrano kopijoms daryti ir vizualiniams palyginimams atlikti esamuose „Selenium“ testų rinkiniuose.

Realaus pasaulio vizualinio testavimo pavyzdžiai

Štai keletas pavyzdžių, kaip vizualinis testavimas gali būti taikomas realaus pasaulio scenarijuose:

• Elektroninės prekybos svetainė: Vizualinis testavimas gali būti naudojamas siekiant užtikrinti, kad produktų atvaizdai, aprašymai ir kainos būtų teisingai rodomi skirtinguose įrenginiuose ir naršyklėse. Jis taip pat gali aptikti vizualines regresijas, atsiradusias dėl svetainės dizaino ar išdėstymo pakeitimų. Pavyzdžiui, jei CSS atnaujinimas netyčia išlygina produktų pavadinimus, vizualinis testavimas užfiksuotų šią problemą.
• Mobilioji programėlė: Vizualinis testavimas gali būti naudojamas patikrinti, ar UI elementai, tokie kaip mygtukai, piktogramos ir teksto laukai, yra teisingai rodomi skirtinguose mobiliuosiuose įrenginiuose ir operacinėse sistemose. Jis taip pat gali aptikti vizualines regresijas, atsiradusias dėl programėlės kodo ar dizaino pakeitimų. Pavyzdžiui, jei programėlės atnaujinimas šiek tiek pakeičia mygtuko išvaizdą, vizualinis testavimas tai nustatytų.
• Žiniatinklio aplikacija: Vizualinis testavimas gali būti naudojamas siekiant užtikrinti, kad aplikacijos UI būtų nuoseklus ir vizualiai patrauklus skirtingose naršyklėse ir ekrano rezoliucijose. Jis taip pat gali aptikti vizualines regresijas, atsiradusias dėl aplikacijos kodo ar dizaino pakeitimų. Pavyzdžiui, pakeitus aplikacijos temą, tekstas tam tikrose srityse gali tapti neįskaitomas; vizualinis testavimas tai pabrėžtų.
• Žaidimų sąsaja: Vizualinis testavimas gali patikrinti, ar žaidimo UI elementai, tokie kaip gyvybės juostos, rezultatų lentelės ir meniu, tinkamai atvaizduojami skirtingose rezoliucijose ir grafikos nustatymuose. Vizualiniai artefaktai ar trikdžiai, atsiradę dėl žaidimų atnaujinimų, gali būti aptikti anksti.

1 pavyzdys: Pasaulinė elektroninės prekybos platforma

Didelė elektroninės prekybos platforma, prekiaujanti produktais visame pasaulyje, įdiegė vizualinį testavimą, kad užtikrintų nuoseklų produktų pateikimą skirtinguose regionuose ir įrenginiuose. Jie naudojo „Percy.io“ automatiškai fiksuoti produktų puslapių ekrano kopijas ir lyginti jas su baziniais atvaizdais. Tai padėjo jiems nustatyti vizualines regresijas, atsiradusias dėl jų svetainės dizaino ir kodo pakeitimų, užtikrinant, kad klientai skirtingose šalyse matytų tą pačią aukštos kokybės informaciją apie produktus.

2 pavyzdys: Tarptautinė bankininkystės aplikacija

Tarptautinė bankininkystės aplikacija naudoja „Applitools“, kad užtikrintų, jog UI būtų teisingai atvaizduojamas įvairiuose įrenginiuose ir operacinėse sistemose, kurias naudoja jų pasaulinė klientų bazė. Jie turi sukonfigūruotus testus skirtingoms kalboms, valiutoms ir reguliavimo reikalavimams. Tai padeda jiems palaikyti nuoseklią ir reikalavimus atitinkančią vartotojo patirtį skirtinguose regionuose.

Vizualinio testavimo ateitis

Vizualinio testavimo sritis nuolat vystosi, atsiranda naujų technologijų ir metodų, skirtų spręsti šiuolaikinės programinės įrangos kūrimo iššūkius. Kai kurios iš pagrindinių tendencijų, formuojančių vizualinio testavimo ateitį, apima:

• Dirbtiniu intelektu pagrįstas vizualinis testavimas: DI ir mašininis mokymasis naudojami automatizuoti vizualinio testavimo užduotis, tokias kaip vizualinių skirtumų nustatymas ir jų klasifikavimas kaip tyčinių ar netyčinių. DI pagrįsti vizualinio testavimo įrankiai taip pat gali mokytis iš ankstesnių testų, kad pagerintų savo tikslumą ir efektyvumą.
• Savaime pasitaisantys vizualiniai testai: Savaime pasitaisantys vizualiniai testai gali automatiškai prisitaikyti prie nedidelių UI pakeitimų, nereikalaujant rankinio įsikišimo. Tai sumažina su vizualiniu testavimu susijusias priežiūros išlaidas ir palengvina testų atnaujinimą.
• Vizualinis testavimas kaip kodas: Vizualinis testavimas kaip kodas leidžia kūrėjams apibrėžti vizualinius testus naudojant kodą, todėl lengviau integruoti vizualinį testavimą į kūrimo darbo eigą.
• Patobulintas bendradarbiavimas: Vizualinio testavimo įrankiai tampa labiau orientuoti į bendradarbiavimą, leidžiantys kūrėjams, QA inžinieriams ir dizaineriams kartu peržiūrėti ir tvirtinti vizualinius pakeitimus.
• Integracija su mažo kodo / be kodo platformomis: Vizualinis testavimas integruojamas į mažo kodo / be kodo platformas, leidžiant „citizen developers“ lengvai kurti ir prižiūrėti vizualinius testus.

Išvada

Vizualinis testavimas su ekrano kopijų palyginimu yra esminė technika, užtikrinanti UI kokybę ir apsauganti nuo vizualinių regresijų. Įgyvendindamos vizualinį testavimą, kūrimo komandos gali pateikti nuoseklią ir vizualiai patrauklią vartotojo patirtį, sumažinti rankinio testavimo pastangas ir pagreitinti išleidimo ciklus. Vizualinio testavimo sričiai toliau vystantis, atsiras naujų technologijų ir metodų, kurie padarys jį dar efektyvesnį ir prieinamesnį.

Nesvarbu, ar kuriate žiniatinklio aplikaciją, mobiliąją programėlę ar bet kokio kito tipo programinę įrangą su grafine vartotojo sąsaja, vizualinis testavimas turėtų būti neatsiejama jūsų testavimo strategijos dalis. Priimdami vizualinį testavimą, galite užtikrinti, kad jūsų vartotojai turės teigiamą ir įtraukiančią patirtį, nepriklausomai nuo platformos ar įrenginio, kurį jie naudoja.

Praktinės įžvalgos

• Pradėkite nuo mažų žingsnių: Pradėkite nuo vizualinių testų įdiegimo svarbiausiems UI komponentams ar puslapiams.
• Pasirinkite tinkamą įrankį: Įvertinkite skirtingus vizualinio testavimo įrankius ir pasirinkite tą, kuris geriausiai atitinka jūsų poreikius ir biudžetą. Atsižvelkite į tokius veiksnius kaip kaina, funkcijos, integracija su esamais įrankiais ir naudojimo paprastumas.
• Investuokite į mokymus: Suteikite savo komandai mokymus apie vizualinio testavimo metodus ir įrankius.
• Stebėkite rezultatus: Reguliariai stebėkite vizualinių testų rezultatus ir nedelsdami spręskite visas nustatytas problemas.
• Kartokite ir tobulinkite: Nuolat kartokite ir tobulinkite savo vizualinio testavimo procesą, kad pagerintumėte jo efektyvumą ir veiksmingumą.