Što je Front End testiranje?

By: Thomas Hamilton Thomas Hamilton
Hours Ažurirano

⚡ Pametni sažetak

Front-end testiranje provjerava grafičko korisničko sučelje, funkcionalnost, upotrebljivost i performanse prezentacijskog sloja, tako da se prekidi rasporeda, neispravne skripte i spore stranice uoče prije nego što ih stvarni korisnici uopće naiđu.

  • 🔘 Prvo područje primjene: Pisani plan ispravlja preglednike, operativne sustave i uređaje koji su obuhvaćeni prije početka skriptiranja.
  • ☑️ Tri okidača: CSS regresija, JavaProvjere lomljenja i performansi skripti pokreću većinu front-end paketa.
  • ✅ Slojeviti apartmani: Provjere jedinica, komponenti, end-to-end provjere, provjere vizualne regresije i provjere pristupačnosti otkrivaju različite greške.
  • 🧪 Mješavina alata: Jasmin, Selenium, CSSLint i BackstopJS nalaze se uz Jest, Cypress i dramatičar.
  • 🛠️ Brže trčanje: Preglednici bez zaglavlja, manje renderiranja DOM-a i izolirani testni slučajevi skraćuju svaki regresijski ciklus.
  • 📈 Fokus na performanse: Ključni pokazatelji weba mjereni pomoću PageSpeed ​​Insightsa pokazuju dopire li sučelje brzo do korisnika.
Pročitaj više

Front-end testiranje GUI-ja, funkcionalnosti i upotrebljivosti u web aplikaciji

Što je Front End testiranje?

Testiranje na front-endu je tehnika testiranja u kojoj se grafičko korisničko sučelje (GUI), funkcionalnost i upotrebljivost web aplikacija se testiraju. Cilj je potvrditi da prezentacijski sloj ostaje bez grešaka kroz uzastopna ažuriranja.

Na primjer, ako upišete svoje ime u polje obrasca, brojevi se ne bi trebali prihvaćati. Provjera poravnanja elemenata grafičkog korisničkog sučelja još je jedan svakodnevni slučaj.

Osim toga, front-end testiranje se provodi za:

  • CSS regresijsko testiranje: manje CSS promjene koje narušavaju izgled prednjeg dijela.
  • JavaPromjene skripte što čini prednji dio nefunkcionalnim.
  • Provjere izvedbe o tome koliko brzo sučelje postaje upotrebljivo.

Kako izraditi plan testiranja sučelje web stranice?

Izrada plana front-end testiranja jednostavan je proces u četiri koraka.

Korak 1) Pronađite alate za upravljanje planom testiranja.

Korak 2) Odredite proračun za front-end testiranje.

Korak 3) Postavite vremenski okvir za cijeli proces.

Korak 4) Odredite opseg projekta. Opseg uključuje:

  • Operasustave i preglednike koje koriste vaši korisnici
  • Popularni uređaji koje koristi publika
  • Tehnička vještina publike
  • Brzina internetske veze publike

Zašto izraditi plan front-end testiranja?

Donji dijagram prikazuje dvije dimenzije koje plan mora precizno odrediti.

Plan front-end testiranja koji pokriva preglednike i operativne sustave u opsegu

Plan određuje koji preglednici i Operativnih sustava projekt mora pokriti. Moguće kombinacije su bezbrojne, tako da plan smanjuje i trud i troškove.

Plan donosi dvije jasne prednosti:

  • Pruža potpunu jasnoću o opsegu projekta.
  • To daje povjerenje kada se projekt implementira.

Savjeti za bolje front-end testiranje

Savjeti za izradu boljeg plana front-end testiranja:

  • Razborito pripremite svoj proračun, resurse i vrijeme.
  • Koristite preglednik bez grafičkog prikaza kako bi se testovi brže izvršavali.
  • Smanjite količinu DOM renderiranja u testovima radi bržeg izvođenja.
  • Izolirajte testne slučajeve kako bi se uzrok greške brzo pronašao i ciklus ispravljanja ostao kratak.
  • Omogućite bržu upotrebu testnih skripti regresijski ciklusi.
  • Koristite dosljednu konvenciju imenovanja za svoje testne skripte.
  • Zaveži svaku testni slučaj na jedno vidljivo ponašanje.

POVEZANI ČLANCI

Alati za front-end testiranje

Nijedan alat ne pokriva skriptiranje, stilske listove i vizualne elemente, pa timovi kombiniraju nekoliko njih.

Alat za testiranje JS-a: Jasmine

Jasmin je okvir za razvoj testiranja vođen ponašanjem JavaScript kod. Fokusira se na poslovnu vrijednost, a ne na tehničke detalje, ima čistu sintaksu i ne ovisi ni o jednom drugom okviru. Crpio je temelje na okvirima za jedinično testiranje kao što su JSSpec, ScrewUnit, JSpec i RSpec. Jest i Vitest su danas široko korištene alternative.

Alat za funkcionalno testiranje: Selenium

Selenium provodi end-to-end testiranje na različitim preglednicima i platformama kao što su Windows, macOS i Linuxu, te vam omogućuje pisanje testova u Java, Python, C# i drugi jezici. Selenium IDE dodaje snimanje i reprodukciju, tako da prvi skript ne treba kod. Cypress i Dramski pisac pokrivaju isto područje s ugrađenim čekanjem i tracing..

CSS i vizualni alati: CSSLint i BackstopJS

CSSLint je linter otvorenog koda napisan u JavaSkripta koja se pokreće u pregledniku i iz naredbenog retka. Više se aktivno ne održava, pa timovi sada koriste lint stilske listove s CSS podrškom Stylelinta ili ESLinta.

BackstopJS bavi se vizualnim regresijskim testiranjem. Iscrtava stranice u Chromeu bez grafičkog prikaza, uspoređuje svaku snimku zaslona s odobrenom referentnom slikom i omogućuje vam konfiguriranje veličina prikaza i uvjeta prolaz/neuspjeh.

Dva izazova primjenjuju se na bilo koji alat za front-end testiranje:

  • Automatizacija ispitivanja zahtijeva puno truda u početnoj fazi.
  • Alati mogu imati problema s kompatibilnošću s određenim operativnim sustavima i verzijama preglednika.

Optimizacija front-end performansi

Testiranje performansi front-enda odgovara na jedno pitanje: koliko se brzo stranica učitava i postaje upotrebljiva? Podešavanje za jednog korisnika dobra je praksa prije nego što se aplikacija suoči s velikim opterećenjem u ispitivanje performansi.

Zašto je važna optimizacija front-end performansi?

Optimizacija performansi nekada je značila podešavanje poslužitelja, jer je većina web stranica bila statična, a obrada se odvijala na strani poslužitelja.

Kako su web aplikacije postajale dinamične, puno više posla se preselilo u preglednik: kod okvira, skripte trećih strana, slike i fontovi. Klijentski kod postao je usko grlo sam po sebi.

Koja je korist od optimizacije performansi front-enda?

  • Problemi na strani klijenta štete korisničkom iskustvu jednako izravno kao i uska grla poslužitelja, stoga oba zaslužuju pažnju.
  • Velik dio čekanja posjetitelja događa se nakon što poslužitelj odgovori - preuzimanje, parsiranje i renderiranje - pa rad na front-endu često donosi veću vidljivu dobit.
  • Ispravci poput komprimiranja slika, odgađanja skripti i rezerviranja prostora za medije jeftiniji su od rearhitekture pozadinskog sustava.
  • Ključni pokazatelji weba — Najveće iscrtavanje sadržaja, interakcija sa sljedećim iscrtavanjem i kumulativni izgled Shift — dati rezultate u zajedničku tablicu rezultata.

Front-end alati za testiranje performansi

1. PageSpeed ​​Insights

PageSpeed ​​Insights is GoogleBesplatna usluga analize stranica tvrtke Google. Provodi Lighthouse reviziju, izvještava o Core Web Vitals i navodi prijedloge za smanjenje vremena učitavanja. Lighthouse se također isporučuje unutar Chrome DevToolsa.

2. Pingdom

Pingdom je usluga praćenja web stranice i njezinih performansi. Obavještava korisnike kada se stranica uspori ili prestane s radom, tako da se problemi pojave prije nego što ih korisnici prijave.

Značajke:

  • Ispituje sve dijelove web stranice
  • Pruža pregled performansi
  • Tracvaša povijest performansi
  • Omogućuje testiranje s više lokacija

Pitanja i odgovori

Front-end testiranje vježba ono što korisnik vidi - izgled, interakcije i responzivnost. Back-end testiranje provjerava poslužitelje, API-je i baze podataka iza sučelja. To dvoje se nadopunjuje, a izdanje treba oboje.

Tipičan paket slojeva uključuje jedinične testove funkcija, testove komponenti na renderiranim widgetima, end-to-end testove na korisničkim putovanjima, vizualnu regresiju na snimkama zaslona i skeniranje pristupačnosti. Svaki sloj hvata propuste koje drugi propuštaju.

Osnovna snimka zaslona se odobrava, a zatim se kasnija snimanja uspoređuju s njom piksel po piksel. Razlike se šalju čovjeku na prihvaćanje ili odbijanje, hvatajući prekide rasporeda koje funkcionalne tvrdnje nikada ne vide.

Da. Skeneri istovremeno označavaju nedostajuće oznake, loš kontrast i poremećen redoslijed fokusa. Propusnice za tipkovnicu i čitač zaslona ostaju ručne, tako da testiranje pristupačnosti nikada nije potpuno automatiziran.

Umjetna inteligencija izrađuje nacrte testnih slučajeva iz korisničkih priča, predlaže stabilne selektore, samostalno ispravlja lokatore nakon promjena oznaka i grupira gotovo identične vizualne razlike. Revpogled je i dalje važan: generirana tvrdnja može zaključati defekt.

GitHub kopilot izrađuje testove komponenti, mockove i objekte stranica iz otvorene datoteke, uklanjajući velik dio standardnog sadržaja. Asinkrono ponašanje i poslovna pravila koja nikada nije vidio još uvijek trebaju provjeru programera.

Oboje. Ponavljajuće provjere - obrasci, navigacija, snimke izgleda - automatizirane su pri svakoj izradi. Istraživački rad, vizualna procjena i promatranje upotrebljivosti ostaju ručni jer ovise o ljudskoj interpretaciji.

Neka analitika odluči. Pokrijte preglednike, verzije i veličine zaslona koji nose najviše stvarnog prometa, dodajte jednu stariju osnovnu liniju, a ostalo tretirajte kao nasumične provjere tijekom mobilno testiranje.

Sažmite ovu objavu uz: