Testarea proiectării web responsive: Ghidul complet pentru începători

responsive web design testing

În epoca actuală, utilizarea dispozitivelor mobile pentru a accesa internetul a crescut și a devenit destul de populară. Aproape fiecare utilizator de internet dorește o versiune mobilă a site-ului web.

Cu toate acestea, majoritatea site-urilor web nu sunt la fel de optimizate pe cât ar trebui să fie pentru dispozitivele mobile. Testerii ar trebui să efectueze un test de receptivitate mobilă pentru proiectele responsive.

Produsele software tradiționale sunt în esență aceleași pe orice dispozitiv.

Microsoft Office, de exemplu , arată la fel pe fiecare computer personal. Imaginați-vă că luați Microsoft Word exact așa cum rulează pe desktop și îl vedeți pe un iPhone4. Fie meniurile și butoanele vor apărea minuscule, altfel veți vedea doar un colț al ecranului și va trebui să utilizați bare de derulare extinse. Oricum, aplicația devine în esență inutilizabilă.

Această experiență frustrantă este exact prin ce trece fiecare designer atunci când încearcă să proiecteze pentru web.

Remedierea problemei este ceva numit „design receptiv”, o tehnică prin care paginile web întreabă browserul care este rezoluția, apoi re-proiectează cu grație experiența utilizatorului pe baza ecranului disponibil. Dintr-o dată, este imposibil să știm exact cum va arăta software-ul dvs. în producție.

Aceasta înseamnă o strategie de testare (și o strategie de automatizare) care trebuie să fie capabilă să experimenteze și să învețe ceea ce „arată bine” și ce nu, la diferite rezoluții.

Ce veți învăța:

• Ghid pentru începători pentru testarea proiectelor de site-uri web adaptabile
  • Ce este Responsive Web Design?
  • Avantajele proiectării responsive:
  • Componentele principale ale proiectării de site-uri web responsive:
  • Exemple de design web receptiv
  • Cum să testați un site web receptiv
  • Exemple de scenarii de testare pentru testarea site-ului web receptiv:
  • Instrumente pentru testarea unui site web receptiv
  • Provocări ale testării proiectării responsive și soluțiilor posibile
  • Sfaturi pentru testarea web Responsive
• Concluzie
  • Lectură recomandată

Ghid pentru începători pentru testarea proiectelor de site-uri web adaptabile

Când încercăm să deschidem un site web, serverul citește „ m.sub-domenii ”Pentru a identifica din ce tip de dispozitiv mobil a provenit solicitarea. Pe baza acestui fapt, redirecționează utilizatorul către versiunea mobilă corespunzătoare.

Pentru a face acest lucru 100% eficient, fiecare dispozitiv ar trebui să aibă propriul design al site-ului web special conceput pentru acesta; fsau exemplu,un design specific diferit pentru Blackberry, iPhone, iPad etc., ținând cont de dimensiunea și rezoluțiile ecranului.

Cu toate acestea, versiunea web diferită pentru fiecare rezoluție și dispozitiv nu este practică. Ethan Marcotte a venit cu o nouă abordare - Responsive Web Design ( RWD ) - care rezolvă această problemă.

Recomandarea noastră

# 1) Browser LT

Browser LT ajută utilizatorii să-și testeze și să depaneze site-ul web pe peste 45 de porturi de vizualizare a dispozitivelor. Testați-vă site-ul web pe diferite porturi de vizualizare pentru dispozitive mobile și desktop preinstalate cu LT Browser, un browser prietenos cu dezvoltatorii pentru depanarea vizualizărilor mobile.

Pur și simplu introduceți adresa URL a site-ului dvs. web, selectați dispozitivul pe care doriți să testați site-ul web. Puteți alege simultan două dispozitive pentru compararea vizualizării.

Nu numai testarea, ci și utilizatorii își pot depana site-ul web din mers cu ajutorul DevTools încorporat oferit de LT Browser.

Cea mai bună parte este că utilizatorii pot crea un dispozitiv personalizat pe baza cerințelor lor, ceea ce face ca browserul LT să fie prima noastră alegere pentru testarea receptivă.

Ce este Responsive Web Design?

RWDținte pentru ca site-urile web să reacționeze la dispozitivul lor, la rezoluție și să poată reda și adapta corect. De exemplu, dacă utilizatorul trece de la desktop / laptop la iPad, atunci site-ul web ar trebui să adapteze automat modificările de rezoluție, cum ar fi dimensiunea imaginii etc., conform abilităților dispozitivului respectiv.

Pe scurt,Proiectare receptivăeste „Un site web pentru fiecare ecran” .

Ecranul de mai jos este unexempludin RWD:

Notă: Timp realexemplua unui site web receptiv este www.fpl.com

În RWD, un site web este conceput pentru a oferi o experiență superioară utilizatorului printr-o navigare ușoară, o interfață de utilizator clară și simplă, etc.

• Site-urile web responsive sunt codificate în PHP, .Net, Java, CQ5 (Adobe Experience Manager - AEM) și multe noi cadre care sunt foarte utile pentru a dezvolta design-uri responsive.
• Funcțiile CSS și HTML sunt folosite pentru a face rezoluțiile ecranului și imaginile să fie redimensionate automat.
• Proiectarea RW utilizează puncte de întrerupere pentru a identifica aspectul unui site. Fiecare proiectare este utilizată la diferite puncte de întrerupere. Un design este aplicat peste un punct de întrerupere, în timp ce un alt design este utilizat sub punctul de întrerupere. Aceste puncte de întrerupere se bazează, în general, pe lățimea browserelor.
• În timp ce proiectează un site web receptiv, dezvoltatorii iau în considerare conținutul, designul și performanța site-ului pe toate dispozitivele asigura usabilitatea .

Diagrama este o comparație exactă cu modul în care conținutul se adaptează la mediul și comportamentul dispozitivului.

Notă : În afară de RWD, există o altă abordare numită Design Web adaptiv ( AWD ) . În abordarea AWD, va exista un design specific pentru fiecare dispozitiv. Cu toate acestea, AWD ar putea să nu fie potrivit tot timpul. În plus, proiectarea site-urilor AWD necesită mai mult timp și bani în comparație cu site-urile RWD.

Avantajele proiectării responsive:

# 1) Experiența utilizatorului: Pe baza dispozitivului de pe care accesăm un RW, acesta ascunde elementele neobișnuite și îi ajută pe utilizatori să își atingă obiectivele mai repede.De exemplu:dacă deschidem un RW de pe mobil, acesta ascunde elementele neimportante și accelerează încărcarea paginilor web.

#Două) Partajare sau conectare: Pentru un RW se folosește o singură adresă URL pentru diferite dispozitive. Deoarece doar o singură adresă URL acumulează toate datele și informațiile de pe diferite dispozitive, oferă un UX mai bun pentru utilizatori.

# 3) Este necesară o întreținere mică sau minimă pentru un RW.

# 4) Aspectele RW sunt fluide.

Diferențele dintre designul web adaptabil și proiectarea web adaptivă:

RWD și AWD sunt strâns legate între ele.

• RWD reacționează rapid și pozitiv la schimbări, în timp ce AWD poate fi modificat cu ușurință pentru un nou scop.
• RWD are mai multe planuri de rețea fluidă, iar AWD are mai multe planuri cu lățime fixă.
• Imaginile din RWD sunt numite conștiente de context.

Componentele principale ale proiectării de site-uri web responsive:

Responsive Web Design are trei componente principale:

# 1) Aspecte flexibile: Construirea unui site web cu o grilă flexibilă care poate fi redimensionată cu ușurință la orice lățime dinamic.

#Două) Interogări media: Furnizați diverse stiluri pentru browsere și dispozitive în funcție de context, cum ar fi orientarea dispozitivului, fereastra de vizualizare etc.

# 3)Mediu flexibil: Pe măsură ce dimensiunea ferestrelor se schimbă, suportul media (imagini, videoclipuri etc.) trebuie, de asemenea, să își schimbe dimensiunea sau rezoluția în funcție de cerință.

Notă : „Viewport” este zona browserului în care este afișat conținutul real al site-ului web. Viewport nu include bare de instrumente, file etc.

Exemple de design web receptiv

Exemplul nr. 1)

Deschideți linkul www.fpl.com de pe diferite dispozitive și observați adresa URL. Adresa URL a unui site web adaptabil rămâne aceeași pentru toate dispozitivele.

la) Vizualizare RW de pe desktop sau laptop (dimensiune mare a ecranului)

b) Vizualizarea RW de pe o tabletă (dimensiune medie a ecranului)

c) Vizualizarea RW de pe un telefon mobil (dimensiune mică a ecranului)

Exemplul 2)

Deschideți site-ul www.yepme.com de pe un laptop și, de asemenea, de pe un mobil și comparați adresele URL. Acest yepme.com linkul nu este un link receptiv.

la) Vizualizarea unui site web care nu răspunde de pe un desktop sau laptop

cum se scriu cazuri de testare manuale

b) Vizualizarea unui site web care nu răspunde de pe un telefon mobil

Cum să testați un site web receptiv

Testul de proiectare Responsive înseamnă testarea site-ului web sau adresa URL de pe diferite dispozitive. Practic, nu este posibil să testăm complet site-ul web receptiv, deoarece pentru a face acest lucru trebuie să configurăm diferite sisteme pentru diferite dimensiuni de ecran.

O modalitate posibilă pentru testul receptiv este prin redimensionarea dimensiunii ferestrei browserului conform scenariului de testare.

Unele browsere, cum ar fi IE și Safari, vor oferi plugin-uri sau extensii de browser care vă vor ajuta să vizualizați zona de vizualizare în pixeli. Acest lucru face testarea mai ușoară obținând dimensiunea dorită a ecranului prin modificarea pixelilor.

Alte browsere precum Chrome oferă software sau program numit „Emulator” care va ajuta la schimbarea caracteristicilor ecranului și a mediului conform dispozitivului dorit necesar testării.

Notă: „Emulator” este un software sau program furnizat în browser care face ca sistemul gazdă (browserul actual) să se comporte ca sistemul invitat (browserul dispozitivului dorit care urmează să fie testat pentru dimensiunea ecranului dorită).

Chiar dacă emulatoarele nu vă pot oferi mediul exact necesar pentru testare, ele reprezintă o soluție rentabilă pentru a testa un RW la nivel înalt.

Exemple de scenarii de testare pentru testarea site-ului web receptiv:

Testerul de design web receptiv ar trebui să se asigure că designul receptiv satisface toate cele menționate mai jos scenarii de testare pentru a vă asigura că este un design receptiv fără erori.

# 1) Link-ul web sau adresa URL adaptabile ar trebui să fie aceleași pentru toate browserele din fiecare dispozitiv, indiferent de rezoluția ecranului.

Presupune www.abc.com este un site web receptiv. Dacă îl deschidem pe un laptop și pe un telefon mobil, atunci adresa URL ar trebui să fie aceeași pe ambele dispozitive. Site-ul web deschis în browserul mobil nu ar trebui să înceapă cu www.m.abc.com sau www.mobile.abc.com

Exemplu: Deschideți site-ul web www.kotak.com de pe un laptop și, de asemenea, deschideți același lucru și de pe mobil și observați adresa URL din ambele dispozitive. Adresa URL nu este aceeași pentru ambele dispozitive.

Mai jos instantaneu afișează modul în care se modifică adresa URL pentru un site web care nu răspunde pe diferite dispozitive precum laptop și mobil.

Deschideți site-ul web www.w3schools.com de pe un laptop și de pe mobil și verificați adresele URL. Ar trebui să fie același pentru ambele dispozitive.

Instantaneul de mai jos arată că adresa URL rămâne aceeași pentru un site web receptiv pe diferite dispozitive:

#Două) Locația de afișare a conținutului (imagini, sub-linkuri, meniuri etc.) a unui site web receptiv ar trebui să se schimbe dinamic în funcție de modificarea rezoluției ecranului. Adică, dacă schimbăm rezoluția ecranului de la dimensiunea laptopului la un mobil, atunci afișarea opțiunilor meniului ar trebui să se schimbe dinamic.

Exemplu: Deschideți linkul www.fpl.com de pe un laptop și faceți clic pe meniul din colțul din dreapta sus al ferestrei. Opțiunile meniului sunt afișate așa cum se arată mai jos:

unde sunt stocate fișierele apk pe Android

Deschis www.fpl.com de pe mobil și faceți clic pe meniul din colțul din dreapta sus al ferestrei. Opțiunile meniului sunt următoarele:

Notă: Acest scenariu poate fi testat și cu ajutorul emulatoarelor de browser (Fost:crom).

Deschideți site-ul web www.fpl.com printr-un desktop și observați cum sunt afișate opțiunile meniului. Vezi mai jos instantaneu:

Acum redimensionați fereastra browserului la dimensiunea ecranului mobil și apoi verificați afișarea opțiunilor meniului. Vezi mai jos instantaneu:

# 3) Adresele URL ale unui site web adaptabil ar trebui, de asemenea, să fie specifice rezoluției.

Cerință prealabilă pentru a testa acest scenariu: Solicitați dezvoltatorului să insereze orice sub-link pe site-ul web de testare receptivă în cazul în care sub-link-ul nu răspunde.

De exemplu, dezvoltatorul poate insera linkul www.snapdeal.com pe site-ul nostru de testare.

Acum, deschideți site-ul de testare receptivă de pe un telefon mobil și faceți clic pe sub-linkul menționat în cerință prealabilă. Apoi, adresa URL a sub-linkului ar trebui să se schimbe în https://m.snapdeal.com .

# 4) Același scenariu poate fi testat și de pe un laptop. Deschideți RW de pe un desktop sau laptop și faceți clic pe sub-legătura (menționată în cerința prealabilă a scenariului de testare trei) care nu răspunde. Adresa URL a sub-linkului nu ar trebui să se schimbe (deoarece testăm acest scenariu de pe laptop, URL-ul ar trebui să rămână același).

# 5) Cerință prealabilă pentru a testa acest scenariu: Solicitați dezvoltatorului să introducă orice sub-link,de exemplu, www.paytm.com în site-ul de testare. Dispozitivul mobil în care urmează să executați acest scenariu ar trebui să aibă aplicația respectivă Paytm instalată pe mobil.

Acum deschideți site-ul nostru de testare receptiv de pe un telefon mobil și faceți clic pe sub-linkul „paytm”. Apoi, aplicația Paytm care este instalată pe mobil ar trebui să fie deschisă. (Utilizatorul nu trebuie redirecționat către site-ul web în browser sau într-o altă fereastră; numai aplicația ar trebui să fie deschisă.)

# 6) Imaginile de pe site-ul web receptiv sunt specifice rezoluției. Înseamnă că rezoluția imaginii inserate în codul site-ului web receptiv conceput pentru compatibilitate mobilă este diferită de cea a unui desktop sau tabletă. Fiecare dimensiune a ecranului trebuie să aibă imaginea sa specifică în design.

Cerință prealabilă pentru a testa acest scenariu: Testarea și verificarea rezoluției imaginilor ar putea fi o sarcină dificilă. Solicitați dezvoltatorului să insereze trei imagini diferite în site-ul receptiv separat pentru mobil, tabletă și desktop.

Deschideți site-ul web de proiectare receptivă de testare de pe desktop, tabletă și mobil. Imaginile de pe pagina web receptivă ar trebui să fie diferite pentru toate cele trei dispozitive.

(SAU)

Deschideți testul RW de pe un desktop și verificați imaginea de pe pagina web. Acum redimensionați fereastra la cea a unei tablete și verificați imaginea. Acest lucru ar trebui să fie diferit de cel al imaginii afișate pentru dimensiunea ecranului desktopului. Acum puteți redimensiona fereastra la dimensiunea ecranului mobil și puteți verifica imaginea. Această imagine ar trebui să fie, de asemenea, diferită de cele două imagini de mai sus.

Exemplu: Deschideți site-ul receptiv www.fpl.com de pe un desktop; faceți clic dreapta pe imaginea de pe pagina principală -> selectați „Inspectați” din meniu. Verificați rezoluția imaginii (verificați extensia cu numele fișierului imagine .jpg) din cod. Vedeți captura de ecran de mai jos:

Acum redimensionați aceeași fereastră la cea a dimensiunii ecranului unei tablete și verificați rezoluția imaginii. (Extensia numelui imaginii este medium.jpg)

În cele din urmă, redimensionați dimensiunea ferestrei la cea a unui ecran mobil și verificați imaginea. (Extensia numelui imaginii este mică.jpg)

# 7) Faceți clic aleatoriu oriunde pe pagina web și verificați dacă orice date sau text care nu sunt hyperlink sunt inițiate și redirecționate către orice altă pagină sau conținut. Aceasta testează dacă orice cuvânt sau text este marcat ca hyperlink în fișierul back end .

Notă : În câteva proiecte, cerințele vorbesc despre dimensiunea pixelilor și rezoluția ecranului pentru anumite dispozitive. (De exemplu, o vizualizare tabletă pentru RW-ul lor ar trebui să fie la 15:15 pixeli, iar pentru un telefon mobil, ar trebui să fie la 10:10 etc.)

Principalul scenariu este testarea modificărilor dinamice care ar trebui să se întâmple pentru afișajul RW atunci când schimbăm dimensiunea pixelilor.

# 8) Deschideți testul RW într-un browser și vizualizați conținutul și afișarea imaginilor principale. Acum redimensionați fereastra până la punctul de întrerupere al dimensiunii tabletei și verificați modificările care ar trebui să se întâmple la rezoluția imaginii și la orice alt conținut. La punctele de întrerupere, modificările ar trebui să aibă loc în mod dinamic (uneori modificările nu se vor întâmpla la punctele de întrerupere și se pot modifica la alte dimensiuni ale pixelilor, care este un defect.)

Instrumente pentru testarea unui site web receptiv

Există puține instrumente (site-uri web) care vă vor permite să previzualizați paginile web ale site-ului nostru receptiv.

De exemplu,putem testa site-ul nostru receptiv la diferite rezoluții de ecran predefinite (smartphone-uri, tablete etc.) și, de asemenea, personaliza la orice rezoluție dorită. Aceste instrumente fac testarea activităților mai ușoară și mai rapidă. Astfel de instrumente din browser pot fi denumite Responsabil .

Unele instrumente oferă, de asemenea, o caracteristică importantă de a captura captura de ecran receptivă, care ne-ar putea ajuta să testăm proiectele site-ului web, HTML, aspectele, CSS etc. ale site-ului web receptiv.

Aceste instrumente sunt alternative excelente atunci când dispozitivele reale nu sunt disponibile sau gata.

Iată o listă rapidă de instrumente:

# 1) Verificator de proiectare receptiv

Introduceți adresa URL a site-ului web adaptabil care trebuie testat în câmpul „Introduceți adresa URL aici” de mai sus și faceți clic pe „GO”. Puteți chiar să selectați dispozitivul și rezoluția la care doriți să vizualizați site-ul receptiv.

Acum intră www.fpl.com în câmp, selectați aspectul „Nexus 7 PORTRAIT” și faceți clic pe GO. Site-ul este afișat în rezoluția formatului selectat.

#Două) Screenfly

Intrați pe site-ul de testare www.fpl.com și faceți clic pe GO.

Schimbați aspectul pe desktop, tabletă, mobil etc. și testați site-ul. Cu acest instrument, puteți personaliza chiar rezoluția.

De exemplu, setați rezoluția ecranului la 512 x 256 și testați site-ul.

Notă : Cu acest instrument, puteți chiar să testați scenariul 6 modificând cu ușurință rezoluțiile și verificând denumirea imaginii.

# 3) Designmodo

Introduceți orice adresă URL, www.makemytrip.com și faceți clic pe Enter.

În partea dreaptă sus a browserului, aveți opțiunea de a schimba aspectul site-ului web cu cel al oricărui model sau dispozitiv mobil etc.

Notă : Acest instrument are o altă caracteristică, cum ar fi glisarea ecranului și modificarea rezoluției la rezoluția dorită.

# 4) este răspunzător

Introduceți adresa URL de testare, www.fpl.com în câmp și faceți clic pe butonul „Test”.

Notă: Acest instrument are doar câteva opțiuni de aspect fixe pe care site-ul nostru poate fi testat.

# 5) Mattkersley

Dacă doriți să aveți o vizualizare a RW-ului dvs. pe mai multe dimensiuni de ecran la un moment dat, acest instrument mattkersley este ceea ce ai nevoie.

Acum introduceți adresa URL de testare în bara de adrese și faceți clic pe Enter. Puteți vizualiza RW pe mai multe dimensiuni de ecran simultan.

# 6) În mod implicit, Chrome are puține instrumente de dezvoltare prin care putem simula modul dispozitivului și capacitățile acestora.

Pentru a utiliza această caracteristică a cromului, deschideți orice site de proiectare adaptabil la testare, cum ar fi www.fpl.com în Chrome și faceți clic dreapta pe pagina web și selectați opțiunea „Inspectare” din meniu sau apăsați Ctrl + Shift + I. Fereastra de mai jos se deschide în partea de jos a paginii web.

Acum faceți clic pe pictogramă așa cum se arată în captura de ecran de mai jos.

Modul mobil al paginii web se deschide. Din aceasta, puteți schimba rezoluția la orice pixel specific și, de asemenea, la orice model mobil predefinit care este afișat în meniul derulant. Vizualizați instantaneul de mai jos pentru a vă face o idee clară:

Notă: De asemenea, putem schimba pagina web în portret sau peisaj.

Alte instrumente bune pentru a testa designul receptiv:

7) ResponsiveDesign
8) BrowserStack
9) Troia
10) AmIResponsiveDesign
unsprezece) Responsabil
12) Studiopress
13) ResponsiveTest
14) Pentru mașinile MAC avem o aplicație separată numită „ POTRIVI ”Pentru a testa un RW. Această aplicație vă permite să configurați diferite puncte de întrerupere pe diferite dispozitive pentru testare. APTUS nu este o aplicație gratuită și trebuie să o cumpărăm din Mac App Store.

Provocări ale testării proiectării responsive și soluțiilor posibile

Strategie de testare dinamică

Trecerea de la 320 × 480 (rezoluția iPhone4) la 2048 × 2048 (un monitor mare) lasă peste 4 milioane de dimensiuni posibile ale browserului. Majoritatea grupurilor de testare vor restrânge lista dispozitivelor de testare la o mână. Chiar și atunci, problema de testare manuală este greu sau imposibil de abordat.

Dezvoltatorii nu pot anticipa toate problemele platformei, iar testerii nu le pot prinde înainte de lansare. Din această cauză, găsim în producție o problemă ocazională a interfeței cu utilizatorul.

Poate că cineva și-a redus dimensiunea browserului, provocând ca câmpurile de text importante să fie acoperite de o etichetă de pagină. Poate că un anumit cod conceput pentru a gestiona redimensionarea dinamică a paginilor întrerupe selectorul de date modale și nu este niciodată observat de un test normal construit pe WebDriver. Există prea multe opțiuni de afișare pentru a construi teste și prea puțin timp.

Să aruncăm o privire laexemplu realistpentru a ilustra problema.

Pagini dinamice, cum ar fi sliderurile publicitare și conținutul transmis de la utilizatori cu dimensiuni diferite de pagină, sunt un element esențial al multor produse software. Adăugați la acest fapt faptul că nu putem prezice modul în care va fi afișată pagina și că multe eforturi de automatizare încep cu eșecul.

Văd două soluții populare pentru această problemă - utilizarea unui set de date standardizat sau de bază și reîmprospătarea că de fiecare dată când se rulează suita de testare și luarea lucrurilor un mediu sau o platformă la un moment dat.

Datele standard asigură conținutul paginii va arăta la fel de fiecare dată când încărcăm mediul de testare. Această strategie combinată cu ceva de genul Sauce Labs care oferă oamenilor acces la mai multe platforme și ajungi destul de departe.

Această abordare necesită timp și resurse. Veți avea nevoie de timp de la cineva cu acces la baza de date, de obicei un DBA, pentru a crea și actualiza exporturile bazei de date. Și, cineva trebuie să creeze scripturi de configurare și dezmembrare pentru a menține mediul de testare. După tot acest efort, s-ar putea să ajungeți la tipul de mediu igienizat pe care bug-urile iubesc să le ascundă.

Alternativ, puteți utiliza tehnologia de testare vizuală pentru a ajuta la automatizarea testelor pe paginile web care variază în aspect și conținut. Folosind aceste instrumente, puteți crea teste fără modificări ale mediului de testare și fără a necesita seturi de abilități de la persoane din afara grupului de testare.

Să vedem un exemplu.

Luați în considerare aplicația mobilă Twitter.

Acest produs este o combinație de conținut de utilizator și publicitate în continuă schimbare. Există, de asemenea, câteva părți de bază ale interfeței cu utilizatorul, cum ar fi fluxul de știri și notificări, în antet.

Folosind un instrument de testare vizuală, puteți începe prin realizarea unei capturi de ecran a întregii pagini defilabile, nu doar a zonei vizibile. Puteți alege o opțiune de comparație care să ignore conținutul textului, dar să se concentreze pe elementele de pe pagină.

De exemplu, ați putut vedea că câmpurile pentru tweets există, că fiecare tweet are un element de nume și un element de dată / oră, fără să vă faceți griji cu privire la ceea ce este în elemente.

Căutarea elementelor pe pagini întregi scade, de asemenea, sarcina de întreținere și complexitate pe care o vedem în multe teste automate. În loc să manipulați datele dintr-o pagină, să salvați, să derulați și apoi să verificați, obțineți totul dintr-o singură fotografie. Aceasta înseamnă mai puțin cod de scris, mai puțin cod de întreținut și mai puține pozitive false în testele de noapte.

Testare receptivă pentru proiectare receptivă:

care nu este unul dintre tipurile de articole testate în timpul testării sistemului?

Proiectarea receptivă a adăugat problema combinatorie la fiecare platformă disponibilă. Întrebarea este; din toate aceste platforme și dimensiuni de ecran posibile, pe care le selectăm pentru cea mai bună acoperire a testului.

Reducerea numărului de medii pe care le acoperim doar la cele mai populare simplifică sarcina tehnică, ignorând totodată problema de acoperire.

Creșterea numărului de medii numai cu un cadru de automatizare creează un coșmar de întreținere și potențial adaugă o problemă de testare de nerezolvat.

Combinația de instrumente de testare vizuale bune cu un cadru flexibil de automatizare a interfeței de utilizare, cum ar fi driverul web, poate face ca aspectele tehnice ale acestei probleme să nu fie doar mai ușor de tratat, dar rezolvabile.

Ținta este o acoperire bună a interfeței de utilizator cu o sarcină rezonabilă de întreținere. Testarea vizuală este singura dvs. opțiune robustă și scalabilă.

Sfaturi pentru testarea web Responsive

# 1) În timp ce testați un RW, ar trebui să țineți cont de consistența proiectării, cum ar fi alinierea imaginilor, textelor, căptușeala în jurul marginilor etc. pe toate browserele și sistemele de operare.

#Două) În timpul testării unui RW, testerul ar trebui să știe ce să testeze și cum să testeze pe mai multe dispozitive la diferite puncte de întrerupere. În caz contrar, ar putea fi destul de exhaustiv și dezorientant.

# 3) Pentru testarea amănunțită a unui site web receptiv, testarea și coordonarea dezvoltatorilor sunt obligatorii. Dezvoltatorul ar trebui să ajute testerii să creeze condițiile menționate în condițiile prealabile ale cazurilor de testare.

# 4) Verificați dacă paginile web sunt lizibile la toate rezoluțiile, adică conținutul ar trebui să fie lizibil chiar dacă redimensionăm browserul la dimensiunea ecranului mobil.

# 5) Conținutul important al RW ar trebui să fie vizibil pentru toate punctele de întrerupere, adică dacă schimbăm dimensiunea browserului de pe ecranul desktop pe ecranul mobil, atunci imaginile principale, textul principal, meniul etc. ar trebui să rămână aceleași.

# 6) Dacă browserul este redimensionat pentru testare, orice zonă de clic (cum ar fi butoane, meniuri, sub-linkuri etc.) din RW ar trebui să fie potrivită pentru clic.

# 7) Redimensionarea browserului și testarea site-ului web receptiv pot identifica doar câteva probleme majore, în timp ce pot exista câteva alte probleme legate de glisarea degetelor, atingerea, etc. pe dispozitivele mobile. Testarea acestor caracteristici particulare pe dispozitivele reale poate duce la o mai bună identificare și eliminare a defectelor.

Concluzie

Când testăm, proiectarea Responsive va avea multe provocări. Ar trebui să gândiți într-un mod eficient pentru a depăși provocările.

Testarea unui site web Responsive este foarte importantă pentru un viitor de succes pentru mulți aplicatii mobile. Utilizatorii de telefoane mobile vor crește doar, iar așteptările lor sunt foarte variate față de cea a utilizatorilor de desktop. Implementarea și testarea amănunțită a RWD este o modalitate excelentă de a vă configura site-ul pentru a satisface așteptările.

Implementarea și testarea amănunțită a RWD este o modalitate excelentă de a vă configura site-ul pentru a satisface așteptările.

Sperăm că informațiile, sfaturile și scenariile de testare discutate în acest articol vă vor ajuta cu siguranță nevoile de testare a site-ului web receptiv.

Despre autor: Acesta este un post de invitat de Laxmi. Are peste 7 ani de experiență în testarea software-ului și lucrează în prezent ca inginer senior în testarea software-ului.

Încercați toate exemplele furnizate în acest articol și spuneți-ne dacă aveți întrebări / comentarii cu privire la același lucru.

Lectură recomandată

• Testarea alfa și testarea beta (un ghid complet)
• Ghid complet de testare a verificării de construcție (testare BVT)
• Testarea funcțională Vs testarea non-funcțională
• Tipuri de testare software: diferite tipuri de testare cu detalii
• Cele mai bune instrumente de testare software 2021 (Instrumente de automatizare a testelor de calitate)
• Tutorial de testare a depozitului de date ETL (ghid complet)
• Ghid de testare a securității aplicațiilor web
• Cele mai bune servicii de testare software QA de la SoftwareTestingHelp