Responzivno testiranje web dizajna: Cjelokupni vodič za početnike

responsive web design testing

U današnje doba upotreba mobilnih uređaja za pristup internetu porasla je i postala prilično popularna. Gotovo svaki korisnik interneta želi mobilnu verziju web stranice.

Međutim, većina web stranica nije toliko optimizirana koliko bi trebala biti za mobilne uređaje. Ispitivači bi trebali izvršiti mobilni responzivni test na responzivnim dizajnom.

Tradicionalni softverski proizvodi u osnovi čine isto na bilo kojem uređaju.

Microsoft Office, na primjer , izgleda jednako na svakom osobnom računalu. Zamislite da uzmete Microsoft Word točno onako kako radi na vašoj radnoj površini i pregledate ga na iPhone4. Ili će se izbornici i gumbi pojaviti sitni, inače ćete vidjeti samo kut zaslona i trebati koristiti opsežne klizače. U svakom slučaju, aplikacija postaje u biti neupotrebljiva.

Ovo frustrirajuće iskustvo upravo je ono kroz što prolazi svaki dizajner kada pokušava dizajnirati za web.

Rješenje problema je nešto što se naziva 'responzivni dizajn', tehnika kojom web stranice pitaju preglednik kakva je razlučivost, a zatim graciozno redizajniraju korisničko iskustvo na temelju dostupne nekretnine na ekranu. Odjednom je nemoguće točno znati kako će vaš softver izgledati u proizvodnji.

To znači strategiju testiranja (i strategiju automatizacije) koja mora biti sposobna eksperimentirati i naučiti što 'izgleda dobro', a što ne, u raznim rezolucijama.

Što ćete naučiti:

• Vodič za početnike za testiranje responzivnih dizajna web stranica
  • Što je prilagodljivi web dizajn?
  • Prednosti responzivnog dizajna:
  • Glavne komponente responzivnog dizajna web stranice:
  • Primjeri responzivnog web dizajna
  • Kako testirati prilagodljivu web stranicu
  • Primjeri scenarija testiranja za responzivno testiranje web stranica:
  • Alati za testiranje prilagodljive web stranice
  • Izazovi ispitivanja prilagodljivog dizajna i mogućih rješenja
  • Savjeti za responzivno web testiranje
• Zaključak
  • Preporučena literatura

Vodič za početnike za testiranje responzivnih dizajna web stranica

Kada pokušamo otvoriti web stranicu, poslužitelj čita „ m.poddomene ”Kako bi se utvrdilo iz koje vrste mobilnog uređaja zahtjev potječe. Na temelju toga preusmjerava korisnika na odgovarajuću mobilnu verziju.

Da bi ovo bilo 100% učinkovito, svaki uređaj treba imati vlastiti dizajn web stranice posebno izrađene za njega; fili primjer,drugačiji specifični dizajn za Blackberry, iPhone, iPad, itd. uzimajući u obzir veličinu zaslona i rezolucije.

Međutim, različita web verzija za svaku rezoluciju i uređaj nije praktična. The Ethan Marcotte je smislio novi pristup - Responsive Web Design ( RWD ) - to rješava ovaj problem.

Naša preporuka

# 1) LT preglednik

LT preglednik pomaže korisnicima da testiraju i otklone pogreške na svojoj web stranici u više od 45 prikaza uređaja. Testirajte svoje web mjesto na različitim unaprijed instaliranim priključcima za prikaz mobilnih i stolnih uređaja s LT preglednikom, razvojnim preglednikom za otklanjanje pogrešaka u mobilnom prikazu.

Jednostavno unesite URL svog web mjesta, odaberite uređaj na kojem ćete testirati svoje web mjesto. Možete istovremeno odabrati dva uređaja za usporedbu pogleda.

Ne samo testiranje, već i korisnici mogu otkloniti pogreške na svojoj web stranici u pokretu uz pomoć ugrađenih DevTools koje nudi LT Browser.

Najbolji dio je taj što korisnici mogu stvoriti prilagođeni uređaj na temelju svojih zahtjeva što LT preglednik čini našim prvim izborom za responzivno testiranje.

Što je prilagodljivi web dizajn?

RWDciljevi za internetske stranice da reagiraju na svoj uređaj, razlučivost te da se mogu pravilno prikazati i prilagoditi. Na primjer, ako se korisnik prebaci sa stolnog / prijenosnog računala na iPad, tada bi web mjesto trebalo automatski prilagoditi promjene razlučivosti poput veličine slike itd. prema mogućnostima odgovarajućeg uređaja.

Ukratko,Odzivni dizajnje 'Jedna web stranica za svaki zaslon' .

Zaslon ispod jeprimjerRWD-a:

Bilješka: Stvarno vrijemeprimjerresponzivnog web mjesta je www.fpl.com

U RWD-u web stranica je dizajnirana da pruži vrhunsko korisničko iskustvo putem jednostavne navigacije, preglednog i jednostavnog korisničkog sučelja itd. Odzivne web stranice lako se prilagođavaju i rade u svim rezolucijama, preglednicima, veličinama zaslona, ​​hardveru i operativnim sustavima.

• Odzivne web stranice kodirane su u PHP, .Net, Java, CQ5 (Adobe Experience Manager - AEM) i mnogim novim okvirima koji su vrlo korisni za razvoj responzivnih dizajna.
• Značajke CSS i HTML koriste se kako bi se razlučivosti zaslona i slike automatski promijenile.
• Dizajn RW-a koristi točke prekida za prepoznavanje izgleda web mjesta. Svaki se dizajn koristi na različitim graničnim točkama. Jedan dizajn primjenjuje se preko točke prekida, dok se drugi dizajn koristi ispod točke prekida. Te se prijelomne točke uglavnom temelje na širini preglednika.
• Tijekom dizajniranja responzivnog web mjesta, programeri uzimaju u obzir sadržaj, dizajn i izvedbu web mjesta na svim uređajima osigurati iskoristivost .

Dijagram je točna sličnost načinu prilagođavanja sadržaja okolini i ponašanju uređaja.

Bilješka : Osim RWD-a, postoji i drugi pristup Adaptivni web dizajn ( AWD ) . U pristupu AWD, postojat će određeni dizajn za svaki uređaj. Međutim, AWD možda neće biti prikladan cijelo vrijeme. Osim toga, dizajniranje AWD stranica zahtijeva više vremena i novca u odnosu na RWD stranice.

Prednosti responzivnog dizajna:

# 1) Korisničko iskustvo: Na temelju uređaja s kojeg pristupamo RW-u, on skriva neobične elemente i pomaže korisnicima da brže postignu svoje ciljeve.Na primjer:ako otvorimo RW s mobitela, on skriva nevažne elemente i ubrzava učitavanje web stranica.

#dva) Dijeljenje ili povezivanje: Za RW se za različite uređaje koristi samo jedan URL. Kako samo jedan URL sakuplja sve podatke i informacije s različitih uređaja, to daje bolji UX za korisnike.

# 3) Za RW potrebno malo ili minimalno održavanje.

# 4) RW rasporedi su fluidni.

Razlike između prilagodljivog web dizajna i prilagodljivog web dizajna:

RWD i AWD usko su povezani jedni s drugima.

• RWD reagira brzo i pozitivno na promjene, dok se AWD može lako izmijeniti u novu svrhu.
• RWD ima više rasporeda tekućih mreža, a AWD ima više rasporeda fiksne širine.
• Slike u RWD-u nazivaju se kontekstualno osviještene.

Glavne komponente responzivnog dizajna web stranice:

Responzivni web dizajn ima tri glavne komponente:

# 1) Fleksibilni izgledi: Izrada web stranice s fleksibilnom mrežom koja se može jednostavno dinamički promijeniti na bilo koju širinu.

#dva) Upiti za medije: Navedite različite stilove za preglednike i uređaje na temelju konteksta, poput orijentacije uređaja, okvira za prikaz itd.

# 3)Fleksibilni medij: Kako se veličina okvira za prikaz mijenja, mediji (slike, videozapisi itd.) Također trebaju promijeniti svoju veličinu ili razlučivost u skladu sa zahtjevom.

Bilješka : 'Pregledni prikaz' je područje preglednika u kojem se prikazuje stvarni sadržaj web mjesta. Pregled ne uključuje alatne trake, kartice itd.

Primjeri responzivnog web dizajna

Primjer # 1)

Otvorite vezu www.fpl.com s različitih uređaja i promatrajte URL. URL prilagodljivog web mjesta ostaje isti za sve uređaje.

do) Pogled na RW s radne površine ili prijenosnog računala (velika veličina zaslona)

b) Pogled na RW s tableta (srednja veličina zaslona)

c) Pogled na RW s mobitela (mala veličina zaslona)

Primjer # 2)

Otvorite web mjesto www.yepme.com s prijenosnog računala, a također s mobitela i usporedite URL-ove. Ovaj yepme.com link nije responzivna veza.

do) Pogled web stranice koja ne reagira sa stolnog ili prijenosnog računala

slušalice za virtualnu stvarnost kompatibilne s ps4

b) Pogled web stranice koja ne reagira s mobitela

Kako testirati prilagodljivu web stranicu

Značaj reakcijskog dizajna znači testiranje web stranice ili URL s različitih uređaja. Praktički nije moguće testirati responzivno web mjesto u potpunosti jer za to moramo postaviti različite sustave za različite veličine zaslona.

Mogući način responzivnog testa je promjenom veličine prozora preglednika prema testnom scenariju.

Neki preglednici, poput IE i Safari, pružit će dodatke ili proširenja preglednika koji će vam pomoći da pregledate područje prikaza u pikselima. To olakšava testiranje dobivanjem željene veličine zaslona izmjenom piksela.

Ostali preglednici poput Chrome pružaju softver ili tzv 'Emulator' što će pomoći u promjeni značajki zaslona i okruženja prema željenom uređaju potrebnom za testiranje.

Bilješka: 'Emulator' je softver ili program koji se nudi u pregledniku zbog čega se glavni sustav (trenutni preglednik) ponaša poput gostujućeg sustava (preglednik željenog uređaja koji treba testirati na željenu veličinu zaslona).

Iako vam emulatori ne mogu pružiti točno okruženje potrebno za testiranje, oni su isplativo rješenje za testiranje RW-a na visokoj razini.

Primjeri scenarija testiranja za responzivno testiranje web stranica:

Tester responzivnog web dizajna trebao bi biti siguran da odgovarajući dizajn zadovoljava sve dolje spomenuto testni scenariji kako bi se osiguralo da je riječ o dizajnu bez grešaka.

# 1) Veza ili URL responzivne web stranice trebali bi biti jednaki za sve preglednike na svakom uređaju, bez obzira na razlučivost zaslona.

Pretpostavimo www.abc.com je prilagodljiva web stranica. Ako ga otvorimo na prijenosnom računalu i mobilnom telefonu, onda bi URL trebao biti jednak na oba uređaja. Web stranica otvorena u mobilnom pregledniku ne smije započeti s www.m.abc.com ili www.mobile.abc.com

Primjer: Otvorite web stranicu www.kotak.com s prijenosnog računala, a isto tako otvorite i s mobitela i promatrajte URL na oba uređaja. URL nije isti za oba uređaja.

Ispod snimke prikazano je kako se URL mijenja za web-lokacija koja ne reagira na različitim uređajima kao što su prijenosno računalo i mobitel.

Otvorite web stranicu www.w3schools.com s prijenosnog računala i s mobitela i provjerite URL-ove. Trebao bi biti jednak za oba uređaja.

Ispod snimke prikazano je da URL ostaje isti za responzivnu web lokaciju na različitim uređajima:

#dva) Mjesto prikaza sadržaja (slike, podveze, izbornici itd.) Responzivnog web mjesta trebalo bi se dinamički mijenjati prema promjeni razlučivosti zaslona. Odnosno, ako promijenimo razlučivost zaslona s veličine prijenosnog računala na mobitel, prikaz opcija izbornika trebao bi se dinamički mijenjati.

Primjer: Otvorite vezu www.fpl.com s prijenosnog računala i kliknite izbornik u gornjem desnom kutu prozora. Opcije izbornika prikazuju se kao što je prikazano u nastavku:

kružni dvostruko povezani popis c ++

Otvoren www.fpl.com s mobitela i kliknite izbornik u gornjem desnom kutu prozora. Opcije izbornika su kako je prikazano u nastavku:

Bilješka: Ovaj se scenarij također može testirati pomoću emulatora preglednika (Prijašnji:krom).

Otvorite web stranicu www.fpl.com kroz radnu površinu i promatrajte kako se prikazuju opcije izbornika. Pogledajte donji snimak:

Sada prilagodite veličinu prozora preglednika na veličinu zaslona za mobitele, a zatim provjerite prikaz opcija izbornika. Pogledajte donji snimak:

# 3) URL-ovi responzivnog web mjesta također trebaju biti specifični za razlučivost.

Preduvjet za testiranje ovog scenarija: Zamolite razvojnog programera da umetne bilo koju podvezu na web mjesto Responsive testing gdje podveza ne reagira.

Na primjer, programer može umetnuti vezu www.snapdeal.com na našu web stranicu za testiranje.

Sada s mobitela otvorite web mjesto za responzivno testiranje i kliknite na poveznicu spomenutu u preduvjetu. Tada bi se URL podveze trebao promijeniti u https://m.snapdeal.com .

# 4) Isti se scenarij može testirati i s prijenosnog računala. Otvorite RW s radne površine ili prijenosnog računala i kliknite na podvezu (spomenutu u preduvjetu testnog scenarija tri) koja ne reagira. URL podveze ne bi se trebao mijenjati (budući da ovaj scenarij testiramo s prijenosnog računala, URL bi trebao ostati isti).

# 5) Preduvjet za testiranje ovog scenarija: Zamolite programera da umetne bilo koju podvezu,na primjer, www.paytm.com na mjesto testiranja. Mobilni uređaj u kojem ćete izvršiti ovaj scenarij trebao bi imati instaliranu odgovarajuću aplikaciju Paytm u mobitelu.

Sada s mobitela otvorite našu web stranicu za testiranje koja odgovara i kliknite na podvezu 'paytm'. Tada bi se trebala otvoriti aplikacija Paytm koja je instalirana u mobitelu. (Korisnik ne smije biti preusmjeren na web mjesto u pregledniku ili drugom prozoru; treba otvoriti samo aplikaciju.)

# 6) Slike na odgovarajućem web mjestu specifične su za razlučivost. To znači da se razlučivost slike umetnute u kod odgovarajuće web stranice dizajnirane za mobilnu kompatibilnost razlikuje od one na radnoj površini ili tabletu. Svaka veličina zaslona trebala bi imati svoju specifičnu sliku u dizajnu.

Preduvjet za testiranje ovog scenarija: Testiranje i provjera razlučivosti slika mogao bi biti težak zadatak. Zamolite razvojnog programera da na prilagodljivo web mjesto umetne tri različite slike odvojeno za mobilne uređaje, tablete i radne površine.

Otvorite web mjesto za testiranje responzivnog dizajna sa stolnog računala, tableta i mobitela. Slike na responzivnoj web stranici trebale bi se razlikovati za sva tri uređaja.

(ILI)

Otvorite testni RW sa radne površine i provjerite sliku na web stranici. Sada promijenite veličinu prozora na onaj na tabletu i provjerite sliku. To bi se trebalo razlikovati od slike prikazane za veličinu zaslona radne površine. Sada možete promijeniti veličinu prozora na veličinu zaslona za mobilne uređaje i provjeriti sliku. Ova se slika također treba razlikovati od gornje dvije slike.

Primjer: Otvorite responzivno web mjesto www.fpl.com s radne površine; desni klik na sliku na početna stranica -> odaberite 'Pregledaj' s jelovnika. Provjerite razlučivost slike (provjerite nastavak naziva slikovne datoteke .jpg) iz koda. Pogledajte donji snimak zaslona:

Sada promenite veličinu istog prozora na veličinu zaslona tableta i provjerite razlučivost slike. (Proširenje naziva slike je srednje.jpg)

Na kraju, promijenite veličinu prozora na veličinu mobilnog zaslona i provjerite sliku. (Proširenje naziva slike je malo.jpg)

# 7) Slučajno kliknite bilo gdje na web stranici i provjerite hoće li se bilo koji podatak ili tekst koji nije hiperveza pokrenuti i preusmjeriti na bilo koju drugu stranicu ili sadržaj. Ovim se provjerava je li bilo koja riječ ili tekst označena kao hiperveza u stražnji kraj .

Bilješka : U nekoliko projekata zahtjevi govore o veličini piksela i razlučivosti zaslona za određene uređaje. (Na primjer, prikaz tableta za njihov RW trebao bi biti 15:15 piksela, a za mobitel 10:10 itd.)

Testiranje dinamičkih promjena koje bi se trebale dogoditi za RW zaslon kada promijenimo veličinu piksela glavni je scenarij.

# 8) Otvorite naš testni RW u pregledniku i pregledajte sadržaj i prikaz glavnih slika. Sada promijenite veličinu prozora do granične vrijednosti veličine tableta i provjerite promjene koje bi se trebale dogoditi u razlučivosti slike i bilo kojem drugom sadržaju. Na prekidnim točkama promjene bi se trebale događati dinamički (ponekad se promjene neće dogoditi na prijelaznim točkama i mogu se promijeniti na nekim drugim veličinama piksela što je nedostatak.)

Alati za testiranje prilagodljive web stranice

Malo je alata (web stranica) koji će vam omogućiti pregled web stranica našeg responzivnog web mjesta.

Na primjer,našu responzivnu web lokaciju možemo testirati u različitim unaprijed definiranim razlučivostima zaslona (pametni telefoni, tableti itd.) i prilagoditi bilo kojoj željenoj razlučivosti. Ovi alati čine aktivnosti testiranja lakšim i bržim. Takvi alati u pregledniku mogu se nazvati Odgovornik .

Neki alati nude i važnu značajku snimanja responzivnog snimka zaslona koji bi nam mogao pomoći u testiranju dizajna web stranica, HTML-a, izgleda, CSS-a itd. Responzivnog web mjesta.

Ovi su alati izvrsna alternativa kada stvarni uređaji nisu dostupni ili spremni.

Evo popisa brzih alata:

# 1) Responzivna provjera dizajna

Unesite URL responzivnog web mjesta koje treba testirati u gornje polje 'Ovdje unesite svoj URL' i kliknite 'GO'. Možete čak odabrati uređaj i razlučivost na kojoj želite pregledati odgovarajuću web lokaciju.

Sad uđi www.fpl.com u polju odaberite raspored 'Nexus 7 PORTRET' i kliknite GO. Stranica se prikazuje u razlučivosti odabranog formata.

#dva) Screenfly

Uđite na mjesto za testiranje www.fpl.com i kliknite GO.

Promijenite izgled na desktop, tablet, mobitel itd. I testirajte web mjesto. Pomoću ovog alata možete čak prilagoditi razlučivost.

Na primjer, postavite razlučivost zaslona na 512 x 256 i testirajte web mjesto.

Bilješka : Pomoću ovog alata možete čak i testirati scenarij 6 lako promjenom razlučivosti i provjerom imenovanja slike.

# 3) Designmodo

Unesite bilo koji URL, www.makemytrip.com i kliknite Enter.

Na desnoj gornjoj strani preglednika imate mogućnost promijeniti izgled web stranice u izgled bilo kojeg određenog mobilnog modela ili uređaja itd.

Bilješka : Ovaj alat ima još jednu značajku poput povlačenja zaslona i prilagođavanja razlučivosti željenoj razlučivosti.

# 4) jeOdgovarajući

što je bug u testiranju softvera s primjerom

Unesite testni URL, www.fpl.com u polju i kliknite gumb 'Test'.

Bilješka: Ovaj alat ima samo nekoliko opcija fiksnog izgleda na kojima se naša web lokacija može testirati.

# 5) Mattkersley

Ako želite imati prikaz svog RW-a na više veličina zaslona istovremeno, ovaj alat mattkersley je ono što trebate.

Sada unesite URL za testiranje u adresnu traku i kliknite Enter. RW možete istodobno pregledavati na više veličina zaslona.

# 6) Prema zadanim postavkama, chrome ima malo alata za razvoj putem kojih možemo simulirati način rada uređaja i njihove mogućnosti.

Da biste koristili ovu značajku kroma, otvorite bilo koje web mjesto za testiranje, poput www.fpl.com u kromu i desnom tipkom miša kliknite web stranicu i na izborniku odaberite opciju 'Inspect' ili pritisnite Ctrl + Shift + I. Prozor u nastavku otvara se na dnu web stranice.

Sada kliknite ikonu kao što je prikazano na donjem snimku zaslona.

Otvara se mobilni način rada web stranice. Od toga možete promijeniti razlučivost na bilo koji određeni piksel, a također i na bilo koji unaprijed definirani mobilni model koji se prikazuje u padajućem izborniku. Pogledajte donju snimku da biste dobili jasnu ideju:

Bilješka: Web stranicu također možemo promijeniti u portretni ili pejzažni prikaz.

Ostali dobri alati za testiranje responzivnog dizajna:

7) ResponsiveDesign
8) BrowserStack
9) Troja
10) AmIResponsiveDesign
jedanaest) Odgovornik
12) Studiopress
13) ResponsiveTest
14) Za MAC strojeve imamo zasebnu aplikaciju pod nazivom „ FIT ”Za testiranje RW-a. Ovaj vam program omogućuje postavljanje različitih točaka prekida na različitim uređajima za testiranje. APTUS nije besplatna aplikacija i moramo je kupiti u Mac App Storeu.

Izazovi ispitivanja prilagodljivog dizajna i mogućih rješenja

Strategija dinamičkog ispitivanja

Pomicanjem sa 320 × 480 (razlučivost iPhone4) na 2048 × 2048 (veliki monitor) ostaje preko 4 milijuna mogućih veličina preglednika. Većina ispitnih skupina suzit će popis ispitnih uređaja na pregršt. Čak je i tada problemu ručnog testiranja teško ili je nemoguće pristupiti.

Programeri ne mogu predvidjeti sve probleme platforme, a testeri ih ne mogu uhvatiti prije izlaska. Zbog toga u proizvodnji nalazimo povremene probleme s korisničkim sučeljem.

Možda je netko smanjio veličinu svog preglednika zbog čega su važna tekstualna polja prekrivena oznakom stranice. Možda neki kôd dizajniran za rukovanje dinamičkom promjenom veličine stranice prekida modalne alate za odabir datuma i nikad ga normalni test izgrađen na WebDriveru ne primijeti. Previše je mogućnosti prikaza za izradu testova i premalo vremena.

Pogledajmo arealan primjerradi ilustracije problema.

Dinamične stranice, stvari kao što su klizači za oglašavanje i sadržaj koji se struji od korisnika različitih veličina stranica, osnovni su dio mnogih softverskih proizvoda. Dodajte tome činjenicu da ne možemo predvidjeti kako će se stranica prikazivati ​​i mnogi napori na automatizaciji započinju s neuspjehom.

Vidim dva popularna rješenja za ovaj problem - korištenje standardiziranog ili osnovnog skupa podataka i osvježavanje pri svakom pokretanju paketa za testiranje i uzimanje stvari po jedno okruženje ili platformu.

Standardni podaci osiguravaju da sadržaj stranice izgleda jednako svaki put kad učitamo testno okruženje. Ta se strategija kombinira s nečim poput Sauce Labs koji ljudima daje pristup mnogim platformama i prilično se daleko odmiče.

Ovaj pristup zahtijeva vrijeme i resurse. Za izradu i ažuriranje izvoza baze podataka trebat će vam neko s pristupom bazi podataka, obično DBA. Neko mora stvoriti skripte za postavljanje i uklanjanje skripti kako bi održavao testno okruženje. Nakon svih ovih napora, mogli biste završiti s onom vrstom saniranog okoliša u kojem se bube vole skrivati.

Alternativno biste mogli koristiti tehnologiju vizualnog testiranja da biste pomogli automatizirati testove na web stranicama koje se razlikuju po izgledu i sadržaju. Korištenjem ovog alata možete stvoriti testove bez ikakvih promjena u testnom okruženju i bez potrebe za bilo kakvim skupinama vještina od ljudi izvan vaše testne skupine.

Pogledajmo primjer.

Razmotrite mobilnu aplikaciju Twitter.

Ovaj proizvod kombinacija je stalnog mijenjanja korisničkog sadržaja i oglašavanja. U zaglavlju se nalazi i nekoliko temeljnih dijelova korisničkog sučelja, poput feeda vijesti i obavijesti.

Pomoću alata za vizualno testiranje možete započeti snimanjem zaslona cijele pomične stranice, a ne samo vidljivog područja. Možete odabrati opciju usporedbe koja zanemaruje tekstualni sadržaj, ali se usredotočuje na elemente na stranici.

Na primjer, mogli ste vidjeti da polja za tweetove postoje, da svaki tweet ima element imena i element datum / vrijeme, bez brige o tome što se nalazi u elementima.

Traženje elemenata na punim stranicama također ublažava teret održavanja i složenosti koji vidimo u mnogim automatiziranim testovima. Umjesto da manipulirate podacima na stranici, spremate, pomičete i zatim provjeravate, sve dobivate u jednom kadru. To znači manje koda za pisanje, manje koda za održavanje i manje lažnih pozitivnih rezultata u noćnim probnim radnjama.

Responzivno testiranje za responzivan dizajn:

Odzivni dizajn dodao je kombinacijski problem svakoj dostupnoj platformi. Pitanje je; od svih ovih mogućih platformi i veličina zaslona, ​​koje odabiremo za najbolje pokrivenost testom.

Smanjivanje broja okruženja koja pokrivamo na samo najpopularnija olakšava tehnički zadatak, a istovremeno se zanemaruje problem pokrivenosti.

Povećanje broja okruženja samo s okvirom automatizacije stvara noćnu moru za održavanje i potencijalno dodaje nerješiv problem testiranja.

Kombinacija dobrih alata za vizualno testiranje s fleksibilnim okvirom za automatizaciju korisničkog sučelja, poput web-upravljačkog programa, može tehničke aspekte ovog problema učiniti ne samo lakšim za rješavanje, već i rješivim.

Cilj je dobra pokrivenost korisničkog sučelja uz razumno opterećenje održavanjem. Vizualno testiranje jedina je robusna i skalabilna opcija.

Savjeti za responzivno web testiranje

# 1) Tijekom testiranja RW-a trebali biste voditi računa o dosljednosti dizajna, kao što su poravnanje slika, tekstova, dodavanje rubova itd. U svim preglednicima i operativnim sustavima.

#dva) Tijekom testiranja RW-a, ispitivač bi trebao biti svjestan što testirati i kako testirati na više uređaja na različitim točkama prekida. Inače, moglo bi biti prilično iscrpno i dezorijentirajuće.

# 3) Za temeljito testiranje responzivnog web mjesta neophodna je koordinacija ispitivača i programera. Programer bi trebao pomoći testerima u stvaranju uvjeta spomenutih u preduvjetima test slučajeva.

# 4) Provjerite jesu li web stranice čitljive u svim rezolucijama, tj. Sadržaj bi trebao biti čitljiv čak i ako pregledniku prilagodimo veličinu zaslona za mobitel.

# 5) Važni sadržaj RW-a trebao bi biti vidljiv za sve točke prekida, tj. Ako promijenimo veličinu preglednika sa zaslona radne površine na zaslon mobitela, tada bi glavne slike, glavni tekst, izbornik itd. Trebali ostati isti.

# 6) Ako se pregledniku promijeni veličina za testiranje, bilo koje područje klika (poput gumba, izbornika, podveza itd.) RW-a trebalo bi biti pogodno za klikanje.

# 7) Promjenom veličine preglednika i testiranjem responzivnog web mjesta možete identificirati samo nekoliko glavnih problema, dok na mobilnim uređajima može postojati nekoliko drugih problema povezanih s prevlačenjem prsta, tapkanjem itd. Testiranje ovih određenih značajki na stvarnim uređajima može dovesti do boljeg pronalaženja i uklanjanja kvara.

Zaključak

Kada testiramo Responzivni dizajn imat će mnogo izazova. Trebali biste razmišljati na učinkovit način kako biste prevladali izazove.

Testiranje responzivnog web mjesta vrlo je važno za uspješnu budućnost mnogih mobilne aplikacije. Korisnici mobilnih uređaja samo će se povećavati i njihova su očekivanja vrlo različita od očekivanja korisnika stolnih računala. Implementacija i temeljito testiranje RWD-a izvrstan je način da postavite svoje web mjesto u susret očekivanjima.

Implementacija i temeljito testiranje RWD-a izvrstan je način da postavite svoje web mjesto u susret očekivanjima.

Nadamo se da će informacije, savjeti i scenariji ispitivanja razmotreni u ovom članku zasigurno pomoći vašim potrebama testiranja responzivnih web stranica.

O autoru: Ovo je gost Laxmija. Ima 7+ godina iskustva u testiranju softvera i trenutno radi kao viši inženjer za testiranje softvera.

Isprobajte sve primjere dane u ovom članku i javite nam ako imate bilo kakve upite / komentare na iste.

Preporučena literatura

• Alfa testiranje i beta testiranje (cjelovit vodič)
• Potpuni vodič za testiranje provjere izrade (BVT testiranje)
• Funkcionalno ispitivanje vs nefunkcionalno testiranje
• Vrste testiranja softvera: različite vrste ispitivanja s pojedinostima
• Najbolji alati za testiranje softvera 2021. (Alati za automatizaciju ispitivanja kvalitete)
• Vodič za ispitivanje skladišta podataka ETL-a (cjelovit vodič)
• Vodič za ispitivanje sigurnosti web aplikacija
• Najbolje QA usluge testiranja softvera tvrtke SoftwareTestingHelp