Share
Il test del browser è la rovina della nostra esistenza. Beh, è un po 'esagerato, ma non di molto. Più versioni del browser e la frammentazione del browser possono rendere difficile ottenere una buona copertura di test per i tuoi siti, specialmente quando pensi ai diversi sistemi operativi che gli sviluppatori usano per costruire con.
Nel corso degli anni, ci siamo affidati a una varietà di strumenti per aiutarci con questa sfida tra cui macchine virtuali, strumenti che simulano i browser e persino con più dispositivi a disposizione con cui lavorare. Sarebbe bello se ci fosse un modo per avere una viewport che ci permettesse di testare facilmente su tutti i principali browser e le loro versioni individuali senza saltare attraverso i cerchi.
BrowserStack.com si propone di offrire questo tramite il suo servizio di virtualizzazione basato su browser e in questo articolo tratteremo il servizio e come aiuterà a risolvere il problema dei test cross-browser.
Ho menzionato che BrowserStack offre un servizio di virtualizzazione. Ciò che la maggior parte degli sviluppatori pensa quando sentono che sono "macchine virtuali" e non in modo affettuoso. Le macchine virtuali, anche se certamente utili, richiedono spazio e risorse su disco di valore per essere utili e la maggior parte degli sviluppatori detesta la necessità di eseguirli a causa di ciò. BrowserStack adotta un approccio diverso sfruttando Adobe Flash per fornire un browser virtualizzato all'interno del tuo browser. Non è necessario installare nulla e hai accesso ai veri browser virtuali nel cloud.
Per fare un esempio, utilizzando il servizio ho estratto la pagina principale di Nettuts + tramite Safari 5.1 su OSX Lion durante l'utilizzo di Internet Explorer 11.
È una funzionalità piuttosto potente e la cosa fondamentale è che è tutto fatto nel tuo browser. E naturalmente non sei limitato nella scelta del sistema operativo o nelle versioni del browser. BrowserStack offre la virtualizzazione per:
Esatto, offrono la virtualizzazione del browser mobile. Siamo in un mondo mobile, quindi non mi aspetterei niente di meno.
A seconda del sistema operativo scelto, BrowserStack offre un certo numero di browser supportati per il sistema operativo specifico, inclusi beta e nightly in alcuni casi.
Sì, anche il temuto IE6 è disponibile. Non può morire abbastanza presto.
Oltre alle opzioni del sistema operativo e del browser, puoi anche scegliere la risoluzione dello schermo che desideri testare con la quale è particolarmente utile per verificare i tuoi layout reattivi. Sappi solo che BrowserStack ha anche un servizio complementare per affrontare progetti reattivi che generano screenshot per diversi dispositivi e dimensioni.
Il punto principale è che qui c'è un'ampia copertura di test senza la necessità di installare nulla per usarlo.
La prima cosa che devi fare è registrarti per il servizio. BrowserStack è un servizio for-pay e penso che il prezzo sia molto ragionevole per la funzionalità che stai ricevendo e sì, ci sono molte altre funzionalità.
Dopo esserti registrato e aver effettuato l'accesso, sarai nella dashboard che offre una finestra di dialogo di avvio rapido.
Ciò ti consente di inserire facilmente l'URL che desideri testare e tramite i menu a discesa, il sistema operativo di destinazione e la versione del browser. È possibile mettere a punto le cose tramite il pannello di sinistra che offre le scelte di risoluzione dello schermo e la simulazione della velocità di rendering della pagina.
Facendo clic su start si avvia il processo di stabilire la connessione tramite Flash al server remoto e il rendering del browser virtualizzato:
Quello che vorrei sottolineare qui è che questo non è uno screenshot dello screenshot o una sessione falsa. Hai pieno accesso alle funzionalità della pagina web inclusi menu, pulsanti e così via. Ciò include anche gli strumenti di sviluppo forniti con i browser. Sì, hai letto correttamente. Hai accesso a strumenti come Firefox Web Developer Tools, IE F12 Tools e Chrome Developer Tools. In questa schermata, sono in una sessione con Firefox su Mountain Lion e utilizzando gli Strumenti di sviluppo Web di Firefox.
Quindi, non solo puoi vedere come le tue pagine verranno visualizzate nei vari browser, ma puoi anche utilizzare gli strumenti esistenti per eseguire il debug di problemi comuni. Molto bello!
È davvero fantastico essere in grado di controllare le tue pagine una volta che sono disponibili pubblicamente, ma nella maggior parte dei casi, stai per essere sviluppato localmente e vorrai controllare le tue pagine in modo corretto prima di inserire il tuo codice in produzione.
BrowserStack ha affrontato questo problema fornendo una funzionalità di tunneling che consente di testare le pagine locali in remoto. Utilizza un'applet Java per fungere da proxy tra la directory o il server Web e il servizio basato su cloud. Sì, questo significa che dovrai installare Java e mentre io tendo a non consigliare l'installazione dei plugin del browser Java, in questo caso è una necessità e ne vale la pena. BrowserStack però non installa un plugin. Sta servendo un'applet che sfrutta il plug-in del browser dell'applet Java. Assicurati di disabilitare i plug-in del browser dopo aver completato i test. Una cosa da notare è che durante i miei test su Windows 8.1, avevo bisogno di usare la versione a 32 bit di Java JRE in quanto il 64-bit non sembrava funzionare né installava i plugin del browser in Firefox o Chrome. Per ottenere la versione a 32 bit, vai alla pagina di download manuale di Oracle. Tieni presente che Firefox non abiliterà il plug-in per impostazione predefinita, quindi dovrai attivarlo e attivarlo.
Guardando il pannello di sinistra sul dashboard di BrowserStack, dovresti vedere una sezione intitolata "Test locali" con due pulsanti etichettati "Tunnel Web" e "Riga di comando".
L'opzione "Web Tunnel" sfrutta l'applet Java per stabilire il tunnel tra il computer e il servizio remoto. Questo può essere fatto a livello di file system in cui si seleziona una directory specifica con le proprie pagine o un URL di un server locale (esempio: localhost). Per illustrare questo, ho installato WAMP sul mio PC per avere un server web locale da utilizzare con BrowserStack. WAMP di default installa anche phpMyAdmin, accessibile tramite:
http: // localhost: 81 / phpmyadmin /
Sto usando la porta 81 per non entrare in conflitto con un altro processo che sto utilizzando. Cliccando su "Tunnel Web"l'opzione apre la seguente finestra di dialogo per informarti che l'applet sta caricando:
Poiché Oracle ha lavorato per proteggere Java, in particolare i relativi plug-in del browser, è necessario visualizzare l'applet. Il mio consiglio è di non consentire mai l'esecuzione di applet non firmate da un sito Web sul PC, quindi imposto sempre le mie impostazioni di sicurezza Java su "alto"C'è anche un'opzione chiamata"Molto alto"ma l'utilizzo di questo impedirà l'accesso dell'applet BrowserStack da remoto.
Una volta che l'applet è in esecuzione, ti verrà presentata una finestra di dialogo che richiede l'indirizzo o la cartella del tuo server locale.
Come puoi vedere, ho inserito il mio URL locale e ho rilevato il numero di porta. Puoi anche usare SSL se necessario. Da lì, prendo la connessione e sono in grado di vedere la mia copia locale di phpMyAdmin sul server remoto di BrowserStack.
Ora, se non si desidera utilizzare l'applet Java nel browser o per qualche motivo che non funziona, è possibile utilizzare l'opzione "Riga di comando" che richiede il download del .vaso file che viene chiamato tramite la riga di comando per stabilire la connessione:
java-jar BrowserStackTunnel.jarlocalhost, 3000,0
Il
Personalmente, preferisco l'approccio dell'applet dal momento che è semplice. Puoi avere maggiori dettagli sui test locali di BrowserStack su questa pagina.
Penso che tu sia d'accordo che dal punto di vista del test del browser, questo è un servizio molto interessante che rende sostanzialmente più facile eseguire test cross-browser, anche a livello locale. Ed è sicuramente un'alternativa valida alle macchine virtuali per coloro che stanno esaurendo le risorse di sistema.
Ma BrowserStack offre molto di più tra cui test funzionali automatizzati, acquisizione screenshot del browser e un servizio di test di progettazione reattivo che ti consente di vedere come apparirà il tuo sito su più dispositivi (non solo i browser).
È uno di quei servizi che come sviluppatore professionista vale sicuramente l'investimento.
Accentsconagua