Mis on esiotsa testimine?
Thomas Hamilton
⚡ Nutikas kokkuvõte
Esiotsa testimine kontrollib esitluskihi graafilist kasutajaliidest, funktsionaalsust, kasutatavust ja jõudlust, et paigutusvead, katkised skriptid ja aeglased lehed tuvastataks enne, kui päris kasutajad nendega kokku puutuvad.
Mis on esiotsa testimine?
Esiotsa testimine on testimistehnika, mille puhul graafiline kasutajaliides (GUI), funktsionaalsus ja kasutatavus veebirakendus on testitud. Eesmärk on kinnitada, et esitluskiht jääb järjestikuste värskenduste käigus veatuks.
Näiteks kui sisestate vormiväljale oma nime, ei tohiks numbreid vastu võtta. GUI-elementide joonduse kontrollimine on samuti igapäevane juhtum.
Lisaks sellele viiakse läbi eeltestimine järgmistel eesmärkidel:
- CSS-i regressioontestimine: väikesed CSS-i muudatused, mis lõhuvad esiotsa paigutust.
- JavaSkripti muudatused mis muudavad esiosa mittefunktsionaalseks.
- Jõudluskontrollid sellest, kui kiiresti liides kasutatavaks muutub.
Kuidas luua Frontendi veebisaidi testimise kava?
Esiotsa testimise plaani loomine on lihtne neljaastmeline protsess.
Step 1) Uurige tööriistu oma testimisplaani haldamiseks.
Step 2) Otsustage esiotsa testimise eelarve.
Step 3) Määrake kogu protsessi ajakava.
Step 4) Otsustage projekti ulatus. Ulatus hõlmab järgmist:
- Operateie kasutajate kasutatavad süsteemid ja brauserid
- Publiku seas populaarsed seadmed
- Publiku tehniline oskus
- Publiku internetiühenduse kiirus
Miks luua esiotsa testimise plaan?
Allolev diagramm näitab kahte dimensiooni, mille plaan peab kindlaks määrama.
Plaan määrab, millised brauserid ja operatsioonisüsteemid mida projekt peab hõlmama. Võimalikke kombinatsioone on lugematu arv, seega vähendab plaan nii pingutust kui ka kulusid.
Plaanil on kaks selget eelist:
- See annab projekti ulatuse kohta täieliku selguse.
- See annab projekti käivitamisel kindlustunde.
Näpunäited paremaks esiotsa testimiseks
Näpunäited parema esiotsa testimise plaani koostamiseks:
- Valmistage oma eelarve, ressursid ja aeg arukalt ette.
- Kasutage peata brauserit, et testid kiiremini töötaksid.
- Kiiremaks täitmiseks vähendage testides DOM-i renderdamise hulka.
- Isoleerige testjuhtumid, et vea algpõhjus leitaks kiiresti ja parandustsükkel jääks lühikeseks.
- Muutke oma testiskriptid kiiremaks ja korduvkasutatavateks. regressioonitsüklid.
- Kasutage oma testiskriptide jaoks ühtset nimetamiskonventsiooni.
- Seo igaüks testjuhtum ühe nähtava käitumise suhtes.
Esiotsa testimise tööriistad
Ükski tööriist ei kata skriptimist, stiililehti ja visuaale, seega meeskonnad kombineerivad mitut.
JS-i testimise tööriist: Jasmine
jasmiin on käitumispõhine arendusraamistik testimiseks JavaScript kood. See keskendub pigem äriväärtusele kui tehnilistele detailidele, sellel on puhas süntaks ja see ei sõltu ühestki teisest raamistikust. See tugines ühiktestimise raamistikele nagu JSSSpec, ScrewUnit, JSpec ja RSpec. Jest ja Vitest on tänapäeval laialdaselt kasutatavad alternatiivid.
Funktsionaalne testimise tööriist: Selenium
Selenium teostab otsast lõpuni testimist brauserites ja platvormidel, näiteks Windows, macOS ja Linuxis ning võimaldab teil teste kirjutada Java, Python, C# ja teised programmeerimiskeeled. Selenium IDE lisab salvestamise ja taasesituse, seega esimene skript ei vaja koodi. Cypress ja näitekirjanik katavad sama valdkonda sisseehitatud ootamise ja tracing.
CSS ja visuaalsed tööriistad: CSSLint ja BackstopJS
CSSLint on avatud lähtekoodiga linter, mis on kirjutatud keeles JavaSkript, mis töötab brauseris ja käsurealt. Seda enam aktiivselt ei hooldata, seega meeskonnad loovad nüüd stiilitabeleid Stylelint'i või ESLinti CSS-i toega.
BackstopJS tegeleb visuaalse regressiooni testimisega. See renderdab lehti Chrome'is ilma peata, võrdleb iga ekraanipilti heakskiidetud võrdluspildiga ning võimaldab teil konfigureerida vaatevälja suurusi ja läbimise/kaugelejäämise tingimusi.
Iga esiotsa testimise tööriista puhul on kaks väljakutset:
- Testi automatiseerimine nõuab algstaadiumis palju pingutust.
- Tööriistadel võib olla ühilduvusprobleeme teatud operatsioonisüsteemide ja brauseriversioonidega.
Esiotsa jõudluse optimeerimine
Esiotsa jõudlustestimine vastab ühele küsimusele: kui kiiresti leht laadib ja muutub kasutatavaks? Hea tava on selle häälestamine ühele kasutajale enne, kui rakendus saab suure koormuse. jõudluse testimine.
Miks on esiotsa jõudluse optimeerimine oluline?
Jõudluse optimeerimine tähendas kunagi serveri häälestamist, sest enamik veebisaite olid staatilised ja töötlemine toimus serveri poolel.
Veebirakenduste dünaamiliseks muutudes kolis palju rohkem tööd brauserisse: raamistiku kood, kolmandate osapoolte skriptid, pildid ja fondid. Kliendipoolsest koodist sai omaette kitsaskoht.
Mis kasu on esiotsa jõudluse optimeerimisest?
- Kliendipoolsed probleemid kahjustavad kasutajakogemust sama otseselt kui serveri kitsaskohad, seega väärivad mõlemad tähelepanu.
- Suur osa külastaja ooteajast toimub pärast serveri vastust – allalaadimist, parsimist ja renderdamist –, seega annab kliendipoolse töö sageli suurema nähtava kasu.
- Sellised parandused nagu piltide tihendamine, skriptide edasilükkamine ja meedia jaoks ruumi reserveerimine on odavamad kui tagaserveri ümberarhitekteerimine.
- Põhilised veebinäitajad – suurim sisuvärvimine, interaktsioon järgmise värvimisega ja kumulatiivne paigutus Shift — esitage tulemused ühises punktitabelis.
Esiotsa jõudluse testimise tööriistad
1. PageSpeed Insights
PageSpeed Insights is Googletasuta leheanalüüsi teenus. See viib läbi Lighthouse'i auditi, annab aru veebi põhinäitajatest ja loetleb soovitusi laadimisaja lühendamiseks. Lighthouse on saadaval ka Chrome DevToolsi sees.
2. Pingdom
Pingdom on veebisaidi ja jõudluse jälgimise teenus. See hoiatab kliente, kui leht aeglustub või võrguühenduseta läheb, et probleemid ilmneksid enne, kui kasutajad neist teatavad.
Funktsioonid:
- Uurib veebilehe kõiki osi
- Annab ülevaate tulemuslikkusest
- Tracteie soorituste ajalugu
- Võimaldab testida mitmest kohast
