Share
Am scris destul de puțin despre soluțiile de testare a browserului, care încearcă să vă ajute să identificați tehnicile și instrumentele care ușurează dezvoltarea cross-browser-ului. Ultimul meu articol pe această temă conținea modul de utilizare a aplicației BrowserStack pentru a testa orice număr de browsere dintr-un singur instrument central; propriul browser.
Am fost pe un PC Windows atunci când testarea mai multor browsere a fost un pic mai ușoară și instrumentele de testare au fost în principal complementare activității mele. Acum că sunt pe OS X, nevoia de instrumente pentru a încheia strategiile mele de testare este și mai importantă, mai ales din cauza lipsei de Internet Explorer pe sistemul de operare.
Sunt un pic de ratat pentru ceea ce instalez pe computerele mele și prefer instrumentele online atunci când sunt disponibile. De asemenea, sunt mereu în căutarea unor noi instrumente care facilitează testele cross-browser și am decis să ofer un CrossBrowserTesting.com. Voi trece câteva din caracteristicile principale ale serviciului și cum să-l folosiți pentru a vă îmbunătăți capacitățile de testare.
În primul rând, să menționăm că, la fel ca orice serviciu fiabil în acest spațiu, CrossBrowserTesting.com percepe o taxă lunară. Nu sunt deloc surprins de acest lucru, deoarece linia de jos este că au o infrastructură care să-l susțină și care costă bani. Structura comisioanelor se bazează pe numărul de minute pe care doriți să le aveți la dispoziție lunar, dar cu o întorsătură unică prin faptul că vă permit să vă răsturnați un anumit număr de minute, de la o lună la alta. Deci, dacă nu utilizați toate minutele dvs., puteți să vă răsturnați pentru luna următoare.
Cu serviciul însuși. Există câteva lucruri care sunt importante pentru mine în aceste tipuri de servicii. Acestea sunt:
Toate acestea contează pentru că vă oferă cea mai largă suprafață de testare pe mai multe dispozitive. Dar, pentru a fi sincer, fără suport pentru instrumente de depanare (cum ar fi Chrome DevTools, IE F12 Instrumente, etc.), un serviciu de genul acesta ar fi convingător de utilizat și doar puțin mai bun decât un serviciu de screenshot. A fi capabil să testeze la nivel local este o necesitate evidentă pentru a vă permite să testați interactiv înainte de a vă deplasa la stadializare sau producție. Deci, acest criteriu este important de luat în considerare.
Primul lucru pe care l-am observat în legătură cu acest serviciu este lățimea uimitoare a browserului și a suportului pentru formatul dispozitivului. Fiecare sistem de operare major este acoperit (inclusiv Ubuntu) și fiecare versiune de sistem de operare are o listă destul de cuprinzătoare a versiunilor de browser acceptate pentru testare.
În plus, există suport extins pentru dispozitivele mobile și browserele care acoperă versiuni mai vechi și mai moderne de Android, iOS, Blackberry Bold și Windows Phone 8. Lucrul interesant (și cu adevărat benefic) este că, pentru versiuni specifice Android, testează browsere concurente cum ar fi Firefox Mobile, Maxthon și Opera.
Dacă ați folosit serviciul BrowserStack sau un serviciu similar, vă veți simți ca acasă la CrossBrowserTesting.com. Experiența utilizatorului se potrivește foarte îndeaproape cu ceea ce am văzut înainte și care a făcut să sărind în ea destul de banal. Sunteți inițial prezentați cu un tablou de bord care vă oferă acces la principalele caracteristici. Acestea includ:
Testarea browserului live este cea mai interesată. Pentru mine, trebuie să mă asigur că randarea este consecventă, astfel că primul lucru pe care l-am făcut a fost să fac un test de bază pentru a vedea dacă un site va afișa același lucru în browserul meu virtual așa cum se întâmplă în browser-ul meu local. Pentru a imita setările mele locale, am ales să încep sesiunea în Mavericks, care rulează sub cea mai recentă versiune stabilă de Chrome:
Un lucru de remarcat este că în formularul OS / browser de selecție, vi se prezintă numai opțiunile de browser disponibile pentru acea versiune de sistem, cum ar fi:
M-am dus cu site-ul GNC, pentru că sunt un pic de fitness buff și au și multe puncte interactive, cum ar fi meniurile de zbor bazate pe JavaScript și panourile cu caracteristici de ciclism. Mi-am dat seama că a fost un test bun pentru a vedea dacă serviciul ar putea gestiona toată interacțiunea.
Privind cele două capturi de ecran, puteți vedea că redarea pentru Chrome pe Mavericks pe ambele sisteme este exact aceeași. Acesta este un lucru bun, deși este puțin ciudat să vezi Chrome pe Mavericks în Chrome pe Mavericks. Inceput pe oricine?
Mașină locală
Remote browser de la distanță
Odată ce sesiunea dvs. este executată, aveți posibilitatea să modificați oricând sistemul de operare vizat și versiunea browserului, făcând clic pe Schimbați configurația butonul care afișează panoul cu opțiunile drop-down. Rețineți că schimbarea sistemului de operare sau a browserului vă va reîncărca sesiunea, dar cu siguranță va fi nevoită să declanșeze mai multe mașini virtuale, în special pentru revizuiri sumare ale paginilor.
Obținerea interfeței de bază a fost excelentă, dar un test mai important este de a vedea cum site-ul răspunde interacțiunii. Permiteți-mi să prefac acest lucru spunând că nu am găsit un serviciu ca acesta, care să ofere un răspuns instantaneu. Acolo va mereu fi un decalaj deoarece aceste browsere sunt virtualizate. Lucrul cheie pe care îl doriți este să vă asigurați că o interacțiune normală, cum ar fi trecerea peste un meniu sau controlul comenzilor UI (cum ar fi un panou derulant), se efectuează așa cum era de așteptat (deși puțin mai lent). De exemplu, site-ul GNC are un sistem de meniu derulant care se extinde când plasați cursorul peste o opțiune de meniu. Observați că mișcarea deasupra acestuia va extinde meniul și la fel de important îmi dați posibilitatea de a vă descurca.
Această interactivitate este ceea ce face ca aceste servicii să fie atât de valoroase. Zilele de a se baza pe serviciile de screenshot și o tonă de VM-uri pentru a vedea cum se redă site-ul pe o tonă de browsere au dispărut.
Buna intrebare. Instrumentele pentru dezvoltatori bazate pe browser au progresat cu adevărat frumos și depindem zilnic de ele. Din fericire, CrossBrowserTesting.com a inclus instrumentele implicite de depanare cu fiecare browser, oferindu-ne acces la Chrome DevTools, IE F12 Developer Tools și Firefox pentru dezvoltatorii web, precum și Firebug pentru versiunile mai vechi ale browserului. Observați aici că am lansat instrumentele IE F12 în IE11 pe Windows 7.
Instrumentele sunt complet funcționale, permițându-mi să inspectez marcajul și structura DOM a paginii, precum și setarea stilurilor și modificarea textului, la fel ca și pe PC-ul local. Puteți vedea aici cum pot actualiza JavaScript inline pe site:
Ceea ce se traduce este abilitatea de a pârghia debuggerii pentru a face lucrări avansate de depanare, cum ar fi depanarea script-urilor în orice browser și versiune de browser.
Un lucru care mi-a fost îngrijorat este dacă instrumentele ar arăta cu exactitate timpii de încărcare a paginilor prin intermediul panourilor de monitorizare a traficului de rețea și în testele mele, ele par a fi în concordanță cu ceea ce am văzut la nivel local. Acest lucru înseamnă că mă pot simți încrezător, într-o oarecare măsură, că timpul de încărcare va fi mai mult sau mai puțin pe par (având în vedere, desigur, problemele legate de rețea).
Singurul lucru pe care cred că ar fi foarte greu de măsurat, totuși, este performanța paginii prin noua suită de profiluri de performanță incluse în Chrome și Internet Explorer. Multe dintre aceste date sunt direct afectate de aspectele calculatorului dvs., mai ales când redarea este îmbunătățită prin GPU. Testarea acestui lucru pe browserele virtualizate sau pe mașinile virtuale nu este reală, așa că nu aș recomanda acest lucru. Dacă sunteți un dezvoltator interactiv (jocuri), atunci este mai bine să testați pe propriul dispozitiv pentru a înțelege mai bine performanța.
Pe măsură ce încep să mă concentrez din ce în ce mai mult pe mobil, necesitatea de a testa în mai multe sisteme mobile mobile și factori diferiți de forme devine o prioritate. Din păcate, lipsa unei moșteniri foarte mari, câștigarea lotului sau găsirea unui sponsor iubitor, construirea unui laborator cu dispozitive mobile cu funcții complete nu se află în carduri. Și la ritm lucrurile se întâmplă, lucrurile devin din ce în ce mai dure, deoarece producătorii continuă să împingă limitele browserelor mobile și dimensiunea dispozitivului.
CrossBrowserTesting.com oferă posibilitatea de a testa în majoritatea OS-urilor mobile care simulează majoritatea dispozitivelor mobile populare, cum ar fi iPad-urile, iPhones, Nexus 7 și altele. Aceasta nu este cu siguranță o listă cuprinzătoare de dispozitive mobile și presupun că este destinată abordării celor mai moderne sisteme și dispozitive disponibile.
Procesul de testare este exact același lucru cu ceea ce am făcut pentru browserele desktop, cu excepția faptului că redarea va fi în mărimea dispozitivului mobil specific pe care l-ați selectat:
Din nou, serviciul utilizează simulatoare pentru a vă permite să testați modul în care site-ul dvs. va afișa pe un dispozitiv mobil. Rețineți, însă, că în timp ce simulatoarele sunt bune, este întotdeauna mai bine să testați împotriva unui dispozitiv real, dacă este posibil.
Dispozitive noi apar mereu și nu m-aș aștepta la fiecare factor de formă să fie aici. Cred că o adăugare plăcută ar fi să permiteți unui utilizator al serviciului să definească mărimea ferestrei de vizualizare, spre deosebire de prezentarea exclusivă a rezoluțiilor implicite ale ecranului. Acest lucru ar oferi, de asemenea, o mai mare flexibilitate în testarea site-urilor care sunt receptive.
Înainte ca serviciile interactive cum ar fi CrossBrowserTesting.com să devină disponibile, serviciile de screenshot-uri au devenit cunoscute ca fiind una dintre cele mai rapide metode de a vedea cum site-ul dvs. a fost redat în mai multe browsere. În timp ce acestea sunt o passe acum, sunt încă utile și destul de interesant, văd că cele mai multe dintre aceste servicii de testare a browserului captează captura de ecran, ca parte a ofertelor lor. Se pare că această practică are un pic de renaștere, cel mai probabil determinată de numărul tot mai mare de versiuni de browser, de dispozitive și de factori de formă pe care trebuie să-i contabilizăm.
Utilizarea serviciului este simplă și la fel de ușoară ca introducerea unei adrese URL, selectarea browserelor de la care doriți capturi de ecran și faceți clic pe Faceți screenshot-uri buton:
Lucrul frumos este că vă permite să alegeți cât mai multe combinații de dispozitive / sisteme de operare / browser, pe măsură ce doriți, precum și să definiți rezoluția pe o bază pentru fiecare țintă. Aceasta generează o serie de instantanee pe care le puteți revizui:
Dând clic pe capturi de ecran individuale afișează o imagine mai mare, care vă permite să obțineți o vizualizare detaliată a redării.
Câteva lucruri pe care trebuie să le țineți minte: durează câteva momente pentru ca capturile de ecran să fie capturate și redate. Deci, cu cât mai multe browsere pe care le selectați, cu atât mai mult veți aștepta. Spre deosebire de alte servicii în care vă așteptați rândul într-o coadă, această așteptare pare să fie pur și simplu asociată cu timpul de procesare. Plătiți pentru acest serviciu, astfel încât nu-mi pot imagina existența unei coadă ca BrowserShots.org. De asemenea, rețineți că unele dintre aceste capturi de ecran sunt derivate invariabil din simulatoare și, așa cum am menționat mai înainte, simulatoarele nu sunt întotdeauna aceleași ca un browser real. În sfârșit, captura de ecran este pentru o anumită pagină, nu pentru întregul site.
Cu toate acestea, faptul că pot obține destul de repede o idee despre modul în care site-ul meu redă pe atât de multe dispozitive mă ajută să analizez anumite combinații de browsere care necesită o atenție deosebită.
Și acolo intră o caracteristică foarte curată. Serviciul oferă posibilitatea de a compara machetele una lângă alta, astfel încât să puteți vedea diferențele de redare între diferite browsere:
După cum puteți vedea în captura de ecran, acesta merge un pas mai departe, detaliind diferențele și creând o suprapunere galbenă transparentă pe fiecare panou pentru a evidenția diferențele reale. Sunt sigur că te poți referi la frustrarea pe care un dezvoltator a simțit-o de-a lungul timpului de a descoperi diferențe minuscule de aspect după fapt. Acest lucru vă ajută să faceți acest lucru înainte în timpul procesului de testare. Și puteți parcurge și compara mai multe scenarii făcând clic pe Anterior și Următor → butoane.
Valoarea reală a unui astfel de serviciu este de a vă facilita eforturile locale de depanare. Pur și simplu vă permite să testați site-uri disponibile în mod public oferă o astfel de valoare limitată în ceea ce privește strategia de testare globală. CrossBrowserTesting.com oferă posibilitatea de a testa fișierele locale împotriva serverelor lor la distanță, utilizând un applet de proxy bazat pe Java sau linia de comandă, utilizând din nou Java pentru a crea un proxy. Acest lucru este similar cu alte servicii și este necesar pentru a stabili legătura dintre PC-ul local și serverele la distanță, precum și pentru a vă permite să vă tunelați peste orice firewall-uri pe care le-ați putea avea în compania dvs. Odată ce conexiunea este setată, puteți testa ambele fișiere locale prin intermediul accesului direct sau prin intermediul adresei URL de pe serverul dvs. web local.
Echipa de la CrossBrowserTesting.com a creat un videoclip care vă oferă o bună explicație și o demonstrație a modului în care funcționează această parte a serviciului.
Ar fi cu adevărat minunat dacă nu aveam nevoie de aceste servicii. Asta ar însemna că fiecare browser a fost redat total așa cum era de așteptat în fiecare dispozitiv care le-a suportat. Din păcate, avem încă un pic de fragmentare a browser-ului și fiecare versiune de browser are tendința de a avea propriile ciudățenii de a lupta cu. Astfel, serviciile precum CrossBrowserTesting.com oferă o valoare reală în raționalizarea testelor cross-browser.
În ansamblu, cred că serviciul este foarte bun, deși nu fără niște ciudățenii. Au existat niște blocări intermitente pe care le-am experimentat în testele live, care pot fi atribuite Flash și în unele sesiuni, văzând o serie de pictograme de browser în docul OS, mi-am zgâriat capul de ce erau acolo când am ales o țintă specifică browser-ul. Aceste probleme nu ne-au împiedicat în mod necesar să fac ceea ce am vrut să fac (testarea), dar mi sa părut că lucrurile trebuiau să fie bine șterse.
Caracteristica de comparare a aspectului, totuși, a fost destul de fierbinte și ceva ce m-am putut vedea în mod regulat.
Ceea ce văd este că prețul ar putea fi un factor de succes mare pentru lățimea serviciilor pe care le oferă. CrossBrowserTesting.com pare să se fi poziționat la un punct de preț foarte competitiv, încorporând teste live, capturi de ecran și teste locale într-un cost lunar fix, spre deosebire de tarifarea separată pentru anumite servicii. Acest lucru este foarte atrăgător, în special pentru dezvoltatorii cu prețuri conștiente.
Factorul major, totuși, va fi cât timp aveți nevoie de testare. Din experiență, două ore și jumătate (cantitatea de timp alocată planului de bază) pare puțin limitată, mai ales atunci când se înregistrează latența redării. Din nou, kilometrajul dvs. poate varia, dar este cu siguranță ceva de luat în considerare.
Accentsconagua