Utilizarea BrowserStack pentru testarea prin Cross-Browser

Testarea browser-ului este răzbunarea existenței noastre. Ei bine, asta e un pic de exagerare, dar nu de mult. Versiunile multiple ale browserului și fragmentarea browserului pot face dificilă obținerea unei bune acoperire a testelor pentru site-urile dvs., mai ales atunci când luați în calcul diferitele sisteme de operare pe care dezvoltatorii le folosesc pentru a le crea.

De-a lungul anilor, ne-am bazat pe o varietate de instrumente care să ne ajute cu această provocare, inclusiv mașini virtuale, instrumente care simulează browserele și chiar au mai multe dispozitive la îndemână pentru a lucra cu. Ar fi grozav dacă ar fi existat o modalitate de a avea o fereastră de vizualizare care să ne permită să testați cu ușurință pe orice browser major și versiunile individuale ale acestora, fără a sări prin cercuri.

BrowserStack.com își propune să ofere acest lucru prin intermediul serviciului de virtualizare bazat pe browser și în acest articol vom acoperi serviciul și modul în care acesta ajută la rezolvarea problemei de testare încrucișată a browserului.


Browsere în browser

Am menționat că BrowserStack oferă un serviciu de virtualizare. Ceea ce majoritatea dezvoltatorilor cred că au auzit că este vorba despre "mașini virtuale" și nu într-un mod amuzant. Mașinile virtuale, cu siguranță utile, necesită un spațiu pe disc și resurse valoroase pentru a fi utile și majoritatea dezvoltatorilor nu trebuie să le execute din cauza asta. BrowserStack are o abordare diferită prin folosirea Adobe Flash pentru a oferi un browser virtualizat în propriul browser. Nu vi se cere să instalați nimic și obțineți acces la browsere virtuale reale din cloud.

Pentru a vă da un exemplu, utilizând serviciul, am scos pagina principală Nettuts + prin Safari 5.1 pe OSX Lion în timp ce folosesc Internet Explorer 11.


Aceasta este o funcționalitate destul de puternică, iar cheia este că totul este făcut în browserul dvs. Și, bineînțeles, nu sunteți limitat la alegerea OS sau la versiunile de browser. BrowserStack oferă virtulization pentru:

  • Windows XP, 7 și 8
  • OSX Leopard de zăpadă, leu și leu de munte
  • iOS
  • Android
  • Opera Mobile

Corect, ele oferă virtualizarea browserului mobil. Suntem într-o lume a telefoanelor mobile, așa că nu mă aștept la nimic mai puțin.

În funcție de sistemul de operare pe care îl alegeți, BrowserStack oferă în anumite cazuri un număr de browsere acceptate pentru sistemul de operare specific, inclusiv betas și nightlies.


Da, chiar și IE6 temut este disponibil. Nu poate muri repede.

În afară de opțiunile pentru sistemul de operare și browser, puteți alege și rezoluția ecranului pe care doriți să îl testați, cu ajutorul căruia este utilă în special verificarea aspectului dvs. receptiv. Doar știu că BrowserStack are, de asemenea, un serviciu complementar pentru a aborda modele receptive care generează capturi de ecran pentru diferite dispozitive și dimensiuni.

Punctul principal este că există o acoperire extensivă de testare aici, fără a fi nevoie să instalați nimic pentru al utiliza.


Cum functioneazã?

Primul lucru pe care trebuie să-l faceți este să vă înregistrați pentru serviciu. BrowserStack este un serviciu for-pay și cred că prețul este foarte rezonabil pentru funcționalitatea pe care o obțineți și da există o mulțime de caracteristici mai multe.

Odată ce v-ați înregistrat și vă conectați, veți fi la tabloul de bord care oferă un dialog rapid de pornire.


Acest lucru vă permite să introduceți cu ușurință adresa URL pe care doriți să o testați și prin meniurile derulante, OS-ul țintă și versiunea browserului. Puteți regla lucrurile prin panoul din stânga, care oferă opțiuni de rezoluție a ecranului și simulare a vitezei de redare a paginilor.

Dacă faceți clic pe Start, începeți procesul de stabilire a conexiunii prin Flash pe serverul la distanță și redarea browserului virtual:


Ceea ce aș vrea să subliniez aici este că acesta nu este un grabber de screenshot sau o sesiune falsă. Aveți acces complet la funcționalitatea paginii web, inclusiv meniuri, butoane și așa mai departe. Aceasta include, de asemenea, instrumentele de dezvoltare care vin cu browserele. Da, ați citit corect. Aveți acces la instrumente cum ar fi Firefox Web Developer Tools, IE F12 Tools și Tools Developer Chrome. În această captură de ecran, mă aflu într-o sesiune care rulează Firefox pe Mountain Lion și folosind Firefox Web Developer Tools.


Prin urmare, nu numai că puteți vedea cum vor fi afișate paginile dvs. în cadrul browserelor, dar puteți utiliza instrumentele existente pentru depanarea problemelor frecvente. Foarte tare!


Mergând la Local

Este absolut minunat să puteți verifica paginile dvs. odată ce acestea sunt disponibile publicului, dar în majoritatea cazurilor, veți fi în curs de dezvoltare la nivel local și veți dori să vă verificați paginile înainte de a vă împinge codul la producție.

BrowserStack a abordat acest lucru oferind o capacitate de tunel care vă permite să vă testați paginile locale de la distanță. Utilizează un applet Java pentru a acționa ca proxy între directorul dvs. sau serverul web și serviciul bazat pe cloud. Da, aceasta înseamnă că va trebui să instalați Java și în timp ce nu am recomandat instalarea plugin-urilor de browser Java, în acest caz este o necesitate și merită. BrowserStack nu instalează un plugin, deși. Servește un applet care folosește pluginul browserului Java pentru aplicații. Asigurați-vă că dezactivați pluginurile browserului după ce ați terminat testarea. Un lucru de remarcat este că în timpul testelor mele pe Windows 8.1, trebuia să folosesc versiunea pe 32 de biți a Java JRE, deoarece 64-bitul nu pare să funcționeze și nu ar instala pluginurile browser-ului în Firefox sau Chrome. Pentru a obține versiunea pe 32 de biți, accesați pagina de descărcare manuală a Oracle. De asemenea, rețineți că Firefox nu va permite pluginul în mod prestabilit, astfel că va trebui să intrați și să-l activați.

Privind la panoul din stânga al tabloului de bord BrowserStack, ar trebui să vedeți o secțiune intitulată "Testarea locală" cu două butoane etichetate cu "Web tunel" și "Linie de comanda".


Opțiunea "Web Tunnel" folosește aplicația Java pentru a stabili tunelul dintre computer și serviciul de la distanță. Acest lucru s-ar putea face la nivelul sistemului de fișiere în cazul în care ați selecta un director specific cu paginile dvs. sau cu un URL de server local (exemplu: localhost). Pentru a ilustra acest lucru, am instalat WAMP pe PC-ul meu pentru a avea un server web local pe care să îl utilizeze cu BrowserStack. De asemenea, WAMP instalează phpMyAdmin accesibil prin:

http: // localhost: 81 / phpMyAdmin /

Folosesc portul 81 pentru a nu intra în conflict cu un alt proces pe care îl conduc. Dând clic pe butonul "Web Tunnel"deschide următorul dialog care vă anunță că se încarcă:


Deoarece Oracle a lucrat pentru a asigura securitatea Java, în special a pluginurilor de browser, ar trebui să vi se solicite să rulați applet-ul. Sfatul meu este să nu permiteți niciodată ca un applet nesemnat de pe un site să ruleze pe computerul dvs., astfel că întotdeauna mi-am setat setarea de securitate Java la "Înalt"Există, de asemenea, o opțiune numită"Foarte inalt"dar folosind acest lucru va împiedica applet-ul BrowserStack să se conecteze de la distanță.


Odată ce apletul rulează, vi se va afișa un dialog care vă va solicita adresa serverului sau folderul local.


După cum puteți vedea, am introdus adresa URL locală și a detectat numărul portului. De asemenea, puteți utiliza SSL dacă doriți. De acolo, am lansat conexiunea și pot vedea copia mea locală de phpMyAdmin pe serverul la distanță BrowserStack.


Acum, dacă nu doriți să utilizați aplicația Java în browser sau, din anumite motive, nu funcționează, puteți utiliza opțiunea "Linie de comandă" care necesită descărcarea .borcan fișier care este apelat prin linia de comandă pentru a stabili conexiunea:

java -jar BrowserStackTunnel.jar  localhost, 3000,0

ar fi o cheie de acces BrowserStack pe care ar trebui să o introduceți. Odată ce conexiunea este stabilită, reveniți apoi la tabloul de bord pentru a începe testarea.

Personal, prefer modul de abordare de tip applet, deoarece este simplu simplu. Puteți obține mai multe detalii despre testarea locală a BrowserStack pe această pagină.


Un întreg mai mult

Cred că ați fi de acord că dintr-o perspectivă a testelor browser-ului, acesta este un serviciu foarte interesant, care face în mod substanțial mai ușoară efectuarea testelor cross-browser, chiar și la nivel local. Și este cu siguranță o alternativă viabilă la mașinile virtuale pentru cei care nu reușesc să utilizeze resursele sistemului.

Dar BrowserStack oferă multe altele, inclusiv testarea funcțională automată, captura de ecran a browserului și un serviciu de testare a designului receptiv care vă permite să vedeți cum va arăta site-ul dvs. pe mai multe dispozitive (nu doar pe browsere).

Este unul dintre serviciile pe care, ca dezvoltator profesionist, merită cu siguranță investiția.

Cod