Cum să faceți testarea între browsere mai eficientă cu LambdaTest

Acest articol a fost susținut cu amabilitate de dragii noștri prieteni de la LambdaTest, un instrument de testare a compatibilității între browsere care vă permite să efectuați teste gratuite automate și interactive live pe browsere și dispozitive reale. Mulțumesc!

Înainte ca consumatorii să stea în fața dispozitivelor mobile ore întregi în fiecare zi, au existat numeroase browsere și sisteme de operare cu care designerii web trebuiau să se confrunte. Deci, nu este ca și cum conceptul de testare între browsere este nou.

Deoarece browserele web nu redau întotdeauna site-urile web în același mod sau procesează datele în modul inițial, testarea între browsere a fost mult timp o parte importantă a designului și dezvoltării web. Este singura modalitate de a vă asigura că ceea ce este construit în culise este implementat corespunzător pe front-end-ul unui site web.

Dar poate deveni rapid o întreprindere plictisitoare dacă încercați să examinați singur fiecare browser, sistem de operare și dispozitiv.

Din fericire, trăim într-o eră în care automatizarea este rege și acum avem o modalitate mai bună de a efectua teste între browsere (și mai frecvent, de asemenea). Deci, haideți să vorbim despre motivul pentru care trebuie să automatizați acest proces și despre cum să faceți acest lucru cu ajutorul LambdaTest.

O modalitate îmbunătățită de a gestiona testarea între browsere

Când vă propuneți să construiți un site web pentru utilizatorii dvs., țineți cont de cine sunt aceștia, de ce au nevoie și la ce vor răspunde de-a lungul călătoriei lor. Dar cum și când abordezi diferitele rezultate pe care le-ar putea experimenta utilizatorii tăi datorită alegerii browserului lor?

Design-ul responsive poate ajuta la atenuarea unora dintre aceste diferențe, dar nu este un remediu pentru problemele inerente de afișare între browsere și dispozitive.

Pentru a vă asigura pe deplin că codul și alegerile de design pe care le-ați făcut pentru un site web nu vor avea un impact negativ asupra utilizatorilor, testarea între browsere pe tot parcursul procesului de design web este esențială.

„

Și dacă doriți să vă asigurați că testarea extensivă între browsere nu are un impact negativ asupra profitului dvs. , atunci automatizarea este calea de urmat.

Iată câteva sfaturi pentru a vă ajuta să integrați testarea automată în procesul dvs.:

Familiarizați-vă cu diferențele de asistență pentru browser

Aceasta este o prezentare de la Statista a celor mai bune browsere web după cota de piață:

Acum, problema aici nu este neapărat că fiecare browser prelucrează datele site-ului dvs. în mod diferit. Ceea ce îngrădește cu adevărat lucrurile este motorul care alimentează browserul în culise.

De exemplu, acestea sunt motoarele folosite de principalele browsere web:

• Chrome folosește Blink + V8;
• Edge folosește Blink;
• Firefox folosește Quantum/Gecko + SpiderMonkey;
• Safari folosește WebKit + Nitro;
• Internet Explorer folosește Trident + Chakra.

Multe dintre aceste motoare redă aceeași bucată de cod diferit. De exemplu, uitați-vă la acest experiment creat de LambdaTest:

Eticheta HTML de dată este una dintre cele mai utilizate etichete și, totuși, Chrome, Firefox și Opera sunt singurele care o acceptă pe deplin - așa cum este indicat în bara albastră de sus deasupra zonei de testare. Chiar și atunci, aceste browsere oferă experiențe de utilizator foarte diferite.

De exemplu, imaginea de mai sus vă arată cum arată eticheta de dată în Chrome. Iată cum se afișează același cod în Edge:

Nu numai că stilul și dimensiunea fontului diferă ușor, dar și modul în care apare lista derulantă de selecție a datei este foarte diferit.

Așadar, înainte de a începe să vă gândiți la testarea între browsere și la rezolvarea problemelor dintre aceste browsere și motoare, familiarizați-vă cu diferențele cheie.

Un instrument pe care îl puteți folosi ca referință este Can I use….

Puteți căuta discrepanțe în cele mai frecvent utilizate componente și tehnologii. Luați, de exemplu, aspectul grilei CSS:

Majoritatea browserelor de vârf (și unele nu atât de importante) acceptă aspectul grilă CSS (cele în verde). Internet Explorer (în albastru) oferă suport parțial, iar Opera Mini (în violet) nu oferă deloc.

Sau să presupunem că încercați să utilizați mai multe imagini WebP în design-ul dvs., deoarece acestea sunt mult mai bune pentru performanță și rezoluție. Iată ce pot folosi... ne spune despre compatibilitatea browserului pentru formatul de imagine:

Cele mai recente versiuni de Internet Explorer și Safari (web și mobil) nu oferă suport pentru acestea. Deci, dacă intenționați să proiectați cu imagini WebP, va trebui să creați o soluție pentru aceste browsere.

Concluzie: fă-ți timp acum pentru a înțelege ce fel de conținut sau cod este acceptat, astfel încât să poți construi mai eficient un site web de la început.

Sfat profesionist: creați o matrice de browser pentru referință

Puteți vedea de ce este atât de important să înțelegeți diferențele dintre randările browserului și suport. Cu cât vă familiarizați mai mult cu ele, cu atât va trebui să faceți mai puține lupte atunci când se descoperă o nouă discrepanță.

Pentru a vă face mai ușor, ar fi o idee bună să creați acum o matrice de browser pentru toate aceste diferențe.

Iată unul simplu pe care LambdaTest l-a proiectat:

Vă recomand să vă creați unul. Puteți utiliza datele din Can I use... precum și documentarea problemelor de asistență pe care le-ați întâlnit în propriile proiecte.

Acest lucru vă va ajuta, de asemenea, să stabiliți priorități atunci când proiectați. De exemplu, puteți decide ce funcții neacceptate merită utilizate în funcție de tipul de impact pe care acestea îl au asupra obiectivelor site-ului dvs.

De asemenea, ar fi util să aveți această foaie de calcul la îndemână odată ce site-ul a fost lansat. Folosind datele din Google Analytics, puteți începe să prioritizați alegerile de design în funcție de browserele web pe care utilizatorii dvs. le folosesc în principal.

Obțineți un instrument de testare între browsere care face totul

Nu contează dimensiunea site-urilor web pe care le construiești. Toate site-urile publice ar beneficia de un instrument automat de testare între browsere.

Ceea ce este deosebit de frumos despre automatizarea cu LambdaTest este că oferă utilizatorilor săi opțiuni. De la teste complet automatizate care verifică modul în care codul dvs. afectează frontend-ul până la sarcini semi-automatizate care ușurează munca în gestionarea actualizărilor și erorilor, există atât de multe moduri de a automatiza și optimiza procesul.

Iată câteva dintre caracteristicile pe care ar trebui să le cunoașteți:

Testare în timp real: cel mai bun pentru urmărirea erorilor

Testarea în timp real este utilă atunci când există ceva țintit pe care trebuie să îl examinați cu cei doi ochi. De exemplu, dacă ați expediat un design clientului pentru revizuire și acesta insistă că ceva nu arată în regulă, puteți revizui site-ul folosind configurația exactă. De asemenea, ar fi util pentru confirmarea erorilor și pentru a afla ce browsere sunt afectate.

Din panoul Testare în timp real , veți introduce adresa URL a site-ului și apoi veți alege specificațiile de vizualizare.

Vă permite să fiți foarte specific, alegând dintre:

• Mac vs. Android,
• Tip de dispozitiv,
• Versiunea dispozitivului,
• Sistem de operare,
• Browser web.

Odată ce începe testul, iată ce veți vedea (în funcție de tipul de dispozitiv pe care îl alegeți, desigur):

Mai sus, puteți vedea prima opțiune în bara laterală, care vă permite să comutați rapid vizualizarea dispozitivului. În acest fel, dacă aveți câteva vizualizări de browser pe care încercați să comparați sau să verificați erorile, nu trebuie să vă întoarceți.

În ceea ce privește celelalte opțiuni de testare în timp real, cele mai multe dintre ele sunt utile pentru identificarea și raportarea problemelor în contextul în care s-au întâmplat efectiv.

În instrumentul de urmărire a erorilor de mai sus, puteți identifica un loc pe pagină în care a apărut o eroare. Apoi îl puteți marca folosind o serie de instrumente din bara laterală.

Utilizatorii pot folosi, de asemenea, opțiunile de captură de ecran și video pentru a capta erori mai mari - în special cele care apar atunci când vă deplasați sau interacționați cu site-ul.

Testarea capturii de ecran: Cel mai bun pentru accelerarea testării manuale

Nu există niciun motiv pentru care dvs. sau QA nu vă puteți revizui site-ul pe cont propriu. Acestea fiind spuse, de ce procesul durează mai mult decât este necesar? Puteți lăsa instrumentele de testare a interfeței vizuale ale LambdaTest să accelereze procesul.

Instrumentul Captură de ecran, de exemplu, vă permite să selectați simultan toate dispozitivele și browserele pe care doriți să le comparați:

După finalizarea testului, veți avea toate capturile de ecran solicitate într-un singur loc:

Le puteți vizualiza aici, le puteți descărca pe computer sau le puteți partaja altora.

De asemenea, puteți organiza capturile de ecran după proiect și versiune/rundă. În acest fel, dacă lucrați la mai multe runde de revizuiri și doriți să vă referiți la o versiune anterioară, toate copiile iterației anterioare există aici. (Puteți folosi și capturi de ecran în testarea regresiei, pe care le voi explica în scurt timp.)

Testare responsive: cel mai bun pentru a confirma o experiență pe mobil mai întâi

Dacă aveți nevoie să vedeți mai mult decât o simplă captură de ecran statică, testele de răspuns vă au acoperit. Tot ce trebuie să faceți este să selectați ce sistem de operare și dispozitive doriți să comparați, iar instrumentul va popula versiunile complete de funcționare ale site-ului în browserul mobil:

Puteți revizui designul și interactivitatea site-ului dvs. web nu doar în toate browserele posibile, dar puteți modifica și orientarea site-ului (în cazul în care apar probleme atunci când acesta este peisaj).

Ceea ce este frumos la acest instrument de testare este că, dacă ceva pare neplăcut, puteți marca bug-ul în momentul în care îl detectați. Există un buton pentru a face asta direct deasupra browserului mobil interactiv. Astfel, aceste erori costisitoare pe mobil vor fi raportate și rezolvate mai rapid.

Testare inteligentă: Cel mai bun pentru testarea regresiei

Ochiul poate detecta doar atât de multe, mai ales când te uiți la aceeași secțiune a unei pagini web de săptămâni.

Așadar, atunci când începeți să implementați modificări pe site-ul dvs. - în timpul dezvoltării, chiar înainte de lansare și chiar după - testarea regresiei va fi crucială pentru identificarea acelor probleme potențial greu de identificat.

Acest lucru ar trebui să aibă loc de fiecare dată când ceva se schimbă:

• Actualizați manual o parte a designului.
• Codul este modificat pe backend.
• Cineva raportează o eroare și remedierea este implementată.
• Software-ul este actualizat.
• Un API este reconectat.

Dacă știți ce pagină și ce parte a acelei pagini sunt direct afectate, testarea inteligentă poate face ușoară verificarea faptului că totul este în regulă.

Doar încărcați captura de ecran originală a paginii afectate și apoi adăugați o imagine de comparație când modificarea a fost făcută. (Aici este locul în care instrumentul Captură de ecran este cu adevărat util.)

Notă: în mod evident, nu este nimic în neregulă cu site-ul Smashing Magazine. Dar ceea ce am făcut în exemplul de mai sus a fost să folosesc randări pentru diferite versiuni ale iPhone. Evident, nu așa funcționează testele de regresie, dar am vrut să vă arăt cum arată această caracteristică de comparație atunci când ceva nu este în regulă.

Acum, de ce această caracteristică este atât de minunată, iată cum funcționează:

Această singură captură de ecran vă permite să vedeți unde cele două versiuni ale paginii dvs. nu se mai aliniază. Deci, dacă inițial capturile de ecran ar fi fost din aceeași vizualizare a browserului, aceasta ar putea fi o problemă dacă nu ați fi plănuit să realiniați toate elementele.

De asemenea, puteți utiliza testele de comparare alăturate pentru a verifica același lucru:

Din nou, testarea inteligentă este menită să vă ajute să localizați și să raportați rapid problemele în timpul testării de regresie. Găsiți metoda care funcționează cel mai bine pentru dvs., astfel încât să puteți rezolva aceste probleme cât mai repede posibil de acum înainte.

Testare automată: Cel mai bun pentru detectarea problemelor la scară mai mare

Din punct de vedere tehnic, tot ceea ce ne-am uitat până acum are o formă de automatizare încorporată, fie că procesează simultan 20 de capturi de ecran diferite de browser sau vă permite să vedeți instantaneu interfețele de testare mobile pentru toate dispozitivele iOS și Android simultan.

Acestea fiind spuse, platforma LambdaTest vine și cu un instrument numit „Automatizare”. Și ceea ce face acest lucru este să vă permită să testați Selenium în cloud pe peste 2.000 de browsere. O caracteristică mai nouă, „Lambda Tunnel”, poate fi utilizată pentru a face testarea seleniului și pe gazda locală. În acest fel, puteți vedea cum apar modificările codului dvs. chiar înainte de a intra în vigoare.

Există o mulțime de beneficii în combinarea LambdaTest cu testarea seleniului:

• Este o modalitate foarte eficientă de a efectua cantități mari de teste între browsere, crescând astfel acoperirea browserului (ceva care este imposibil de făcut manual).
• Cu testele paralele între browsere, veți reduce timpul petrecut cu executarea testelor de automatizare în ansamblu.
• Deoarece testarea Selenium începe prin identificarea limbajului de codare preferat, poate detecta mai inteligent erorile care vor apărea în browsere.

Desigur, cel mai mare beneficiu al utilizării grilei de automatizare LambdaTest Selenium este că LambdaTest vă va ajuta să evaluați dacă testele dvs. trec sau nu.

Încă trebuie să revizuiți rezultatele pentru a confirma că toate erorile sunt adevărate eșecuri și invers, dar vă va economisi mult timp și dureri de cap ca LambdaTest să facă munca inițială pentru dvs.

Încheierea

Testarea între browsere nu se referă doar la a vă asigura că site-urile web sunt receptive pentru dispozitive mobile. În cele din urmă, ceea ce căutăm să facem aici este să eliminăm presupunerile din designul web. Pot exista peste o duzină de browsere posibile și sute de configurații de browser/dispozitiv, dar testele automate între browsere pot face verificarea tuturor acestor posibilități și localizarea erorilor mult mai ușoară.