Share
Ho scritto un bel po 'sulle soluzioni di test del browser che cercano di aiutare a identificare le tecniche e gli strumenti che semplificano lo sviluppo di più browser. Il mio ultimo articolo sull'argomento riguardava come utilizzare BrowserStack per testare qualsiasi numero di browser da un unico strumento centrale; il tuo browser.
Ero su un PC Windows, quindi testare più browser era un po 'più semplice e gli strumenti di test erano principalmente complementari al mio lavoro. Ora che sono su OS X, la necessità di strumenti per completare le mie strategie di test è ancora più importante, in particolare a causa della mancanza di Internet Explorer sul SO.
Sono un po 'pignolo per ciò che installo sui miei computer e preferisco gli strumenti online quando disponibili. Sono anche sempre alla ricerca di nuovi strumenti che rendano più facili i test cross-browser e ho deciso di offrire a CrossBrowserTesting.com una corsa. Vedrò alcune delle caratteristiche chiave del servizio e come sfruttarlo per migliorare le capacità di test.
Innanzitutto, diciamo che, come ogni servizio affidabile in questo spazio, CrossBrowserTesting.com addebita una tariffa mensile. Non sono affatto sorpreso da questo perché la linea di fondo è che hanno un'infrastruttura per supportare e bene, che costa denaro. La loro struttura tariffaria si basa sul numero di minuti che vorresti avere a disposizione su base mensile, ma con una svolta unica in quanto ti consentono di effettuare il rollover su un determinato numero di minuti, mese per mese. Quindi, se non usi tutti i tuoi minuti, puoi eseguire il rollover per il mese successivo.
Sul servizio stesso. Ci sono un paio di cose che sono importanti per me in questi tipi di servizi. Questi sono:
Tutto ciò è importante perché ti offrono la più ampia superficie di test su più dispositivi. Ma per essere onesti, senza il supporto degli strumenti di debug (come Chrome DevTools, IE F12 Tools, ecc.), Un servizio come questo sarebbe interessante da usare e solo marginalmente migliore di un servizio di screenshot. Ed essere in grado di testare localmente è un ovvio must-have per permetterti di testare in modo interattivo prima di passare alla produzione o allo staging. Quindi questo criterio è importante da considerare.
La prima cosa che ho notato del servizio è l'incredibile larghezza del browser e del supporto del fattore di forma del dispositivo. Ogni sistema operativo principale è coperto (incluso Ubuntu) e ogni versione del sistema operativo ha un elenco abbastanza completo di versioni del browser supportate per il test.
Inoltre, c'è un ampio supporto per dispositivi mobili e browser che coprono versioni precedenti e più moderne di Android, iOS, Blackberry Bold e Windows Phone 8. La cosa interessante (e davvero vantaggiosa) è che per specifiche versioni di Android, ti permettono di prova contro i browser concorrenti come Firefox Mobile, Maxthon e Opera.
Se hai utilizzato BrowserStack o un servizio simile, ti sentirai a casa in CrossBrowserTesting.com. L'esperienza dell'utente si avvicina molto a ciò che ho visto prima, il che ha reso abbastanza banale il buttarci dentro. Inizialmente ti viene presentato un dashboard che ti consente di accedere alle funzioni principali. Questi includono:
Il test del browser live è quello che mi interessa di più. Per me, devo assicurarmi che il rendering sia coerente, quindi la prima cosa che ho fatto è stato fare un test di base per vedere se un sito avrebbe reso lo stesso nel mio browser virtuale come fa nel mio browser locale. Per simulare le mie impostazioni locali, ho scelto di avviare la sessione in Mavericks, eseguendo la versione stabile più recente di Chrome:
Una cosa da notare è che nel modulo di selezione del sistema operativo / browser, ti vengono presentate solo le opzioni del browser disponibili per quella specifica versione del sistema operativo come questa:
Sono andato con il sito web di GNC perché, beh, sono un po 'un appassionato di fitness e hanno anche molti punti interattivi, come i menu di fly-over basati su JavaScript e i pannelli delle funzionalità di ciclismo. Ho pensato che fosse un buon test per vedere se il servizio potesse gestire tutte le interazioni.
Guardando i due screenshot, puoi vedere che il rendering di Chrome su Mavericks su entrambi i sistemi è esattamente lo stesso. Questa è una buona cosa, anche se è un po 'divertente vedere Chrome on Mavericks su Chrome on Mavericks. Inception chiunque?
Macchina locale
Browser virtuale remoto
Una volta che la sessione è in corso, è possibile modificare il SO di destinazione e la versione del browser in qualsiasi momento facendo clic su Cambia configurazione pulsante che visualizza il pannello con le opzioni a discesa. Tieni presente che la modifica del SO o del browser ricaricherà la tua sessione, ma è certo che dovresti innescare più macchine virtuali, specialmente per le revisioni superficiali delle pagine.
Ottenere l'interfaccia utente di base è stato ottimo, ma un test più importante è vedere come il sito risponde all'interazione. Lasciatemi prefigurare questo dicendo che non ho trovato un servizio come questo che offra una risposta istantanea. Ci sarà sempre essere un ritardo perché questi browser sono virtualizzati. La cosa fondamentale che si desidera è assicurarsi che un'interazione normale, come passare il mouse su un menu o controllare i controlli dell'interfaccia utente (come un pannello di scorrimento) si comporti come previsto (anche se un po 'più lento). Ad esempio, il sito di GNC ha un sistema di menu a discesa che si espande quando si passa con il mouse su un'opzione di menu. Si noti che al passaggio del mouse si espande il menu e altrettanto importante mi dà la possibilità di eseguire il drill-down in esso.
Questa interattività è ciò che rende questi servizi così preziosi. I giorni di dover fare affidamento sui servizi di screenshot e su una tonnellata di macchine virtuali per vedere come sono andati i rendering del tuo sito su una tonnellata di browser.
Buona domanda. Gli strumenti di sviluppo basati su browser sono progrediti molto bene e dipendiamo quotidianamente da loro. Fortunatamente, CrossBrowserTesting.com ha incluso gli strumenti di debug predefiniti con ciascun browser che ci ha permesso di accedere a Chrome DevTools, agli strumenti di sviluppo di IE F12 e agli Strumenti per sviluppatori Web di Firefox e Firebug per le versioni precedenti del browser. Si noti qui che ho attivato gli strumenti IE F12 in IE11 su Windows 7.
Gli strumenti sono completamente funzionali permettendomi di ispezionare il markup e la struttura DOM della pagina così come impostare stili e modificare il testo, proprio come faresti sul tuo PC locale. Puoi vedere qui come sono in grado di aggiornare JavaScript inline sul sito:
Ciò a cui questo si traduce è la capacità di sfruttare i debugger per eseguire operazioni di debug avanzate come il debug degli script su qualsiasi versione di browser e browser.
Una cosa di cui mi preoccupavo è se gli strumenti mostrassero accuratamente i tempi di caricamento delle pagine attraverso i pannelli di monitoraggio del traffico di rete e nei miei test, sembrano essere coerenti con ciò che ho visto localmente. Ciò significa che posso sentirmi sicuro, in una certa misura, che i tempi di caricamento saranno più o meno alla pari (ovviamente tenendo conto dei problemi di rete).
L'unica cosa che penso sarebbe molto difficile da misurare, tuttavia, è rappresentata dalle prestazioni della pagina tramite la nuova suite di profiler per le prestazioni inclusa in Chrome e Internet Explorer. Molti di questi dati sono direttamente influenzati da aspetti del tuo computer, specialmente quando il rendering è potenziato con GPU. Provare questo su browser o macchine virtuali virtualizzati non è reale, quindi non lo consiglierei. Se sei uno sviluppatore interattivo (giochi), allora è meglio testare sul tuo dispositivo per ottenere una migliore comprensione delle prestazioni.
Quando comincio a concentrarmi sempre più sui dispositivi mobili, la necessità di testare su più sistemi operativi mobili e diversi fattori di forma diventa un'alta priorità. Sfortunatamente, a parte avere un'eredità molto grande, vincere il lotto o trovare uno sponsor amorevole, la creazione di un laboratorio per dispositivi mobili completo non è nelle carte. E al ritmo delle cose, le cose si fanno sempre più difficili man mano che i produttori continuano a spingere i limiti dei browser mobili e delle dimensioni del dispositivo.
CrossBrowserTesting.com offre la possibilità di testare i principali sistemi operativi mobili simulando la maggior parte dei popolari dispositivi mobili come iPad, iPhone, Nexus 7 e simili. Questo non è certamente un elenco onnicomprensivo di dispositivi mobili e presumo abbia lo scopo di affrontare i più moderni sistemi operativi e dispositivi disponibili.
Il processo di test è esattamente lo stesso di quello che abbiamo fatto per i browser desktop, ad eccezione del rendering che avrà le dimensioni del dispositivo mobile specifico che hai selezionato:
Anche in questo caso, il servizio utilizza simulatori per consentire di testare come il tuo sito eseguirà il rendering su un dispositivo mobile. Tieni presente, tuttavia, che mentre i simulatori sono buoni, è sempre meglio provare un dispositivo reale, se possibile.
I nuovi dispositivi escono continuamente e non mi aspetto che ogni fattore di forma sia presente qui. Penso che una buona aggiunta sarebbe quella di consentire a un utente del servizio di essere in grado di definire le dimensioni della finestra anziché le sole risoluzioni dello schermo predefinite. Ciò offrirebbe anche maggiore flessibilità nel testare i siti che rispondono.
Prima che i servizi interattivi come CrossBrowserTesting.com diventassero disponibili, i servizi di screenshot divennero noti come uno dei modi più rapidi di vedere il rendimento del tuo sito su più browser. Anche se sono una specie di passe ora, sono comunque utili e abbastanza interessanti, sto vedendo che la maggior parte di questi servizi di test del browser fanno girare l'acquisizione degli screenshot come parte delle loro offerte. Sembra quindi che questa pratica stia avendo un po 'di rinascita, molto probabilmente guidata dal numero crescente di versioni del browser, dispositivi e fattori di forma di cui dobbiamo rendere conto.
L'utilizzo del servizio è semplice e immediato come inserire un URL, selezionare i browser da cui desideri visualizzare gli screenshot e fare clic sul Prendere schermate pulsante:
La cosa bella di questo è che ti permette di scegliere quante combinazioni di dispositivi / OS / browser desideri e definire la risoluzione su una base per target. Questo genera una serie di istantanee che puoi esaminare:
Facendo clic su singoli screenshot viene visualizzata un'immagine più grande che consente di ottenere una visualizzazione dettagliata del rendering.
Un paio di cose da tenere a mente: ci vuole un po 'di tempo prima che gli screenshot siano catturati e resi. Quindi più browser selezioni, più a lungo attendi. A differenza di altri servizi in cui attendi il tuo turno in una coda, questa attesa sembra essere semplicemente associata al tempo di elaborazione. Stai pagando per il servizio quindi non posso immaginare che ci sia una coda come BrowserShots.org. Tieni anche presente che alcuni di questi screenshot derivano invariabilmente dai simulatori e, come ho detto prima, i simulatori non sempre hanno lo stesso aspetto di un browser reale. Infine, lo screenshot è per una pagina specifica, non per l'intero sito.
Tuttavia, il fatto che riesca a farmi un'idea abbastanza veloce di come il mio sito sta eseguendo il rendering su così tanti dispositivi mi aiuta a eseguire il drill-down in combinazioni specifiche del browser che richiedono un'attenzione speciale.
Ed è qui che entra in gioco una funzionalità davvero accurata. Il servizio offre la possibilità di confrontare i layout affiancati in modo da poter vedere le differenze di rendering tra i diversi browser:
Come puoi vedere nello screenshot, fa un ulteriore passo in avanti specificando anche le differenze e creando una sovrapposizione gialla trasparente su ciascun pannello per evidenziare le differenze reali. Sono sicuro che puoi relazionarti con la frustrazione che molti sviluppatori hanno provato a scoprire piccole differenze di layout dopo il fatto. Questo aiuta a portare avanti durante il processo di test. E puoi scorrere e confrontare più scenari facendo clic su prev e Il prossimo pulsanti.
Il vero valore di un servizio come questo è facilitare i tentativi di debugging locali. Il semplice fatto di testare siti disponibili pubblicamente offre un valore così limitato in termini di strategia di test complessiva. CrossBrowserTesting.com offre la possibilità di testare i file locali contro i loro server remoti utilizzando un'applet proxy basata su Java o la riga di comando, sfruttando nuovamente Java per creare un proxy. Questo è simile ad altri servizi ed è necessario per stabilire la connessione tra il PC locale e i server remoti oltre a consentire di essere in grado di scavalcare qualsiasi firewall che si possa avere nella propria azienda. Una volta impostata la connessione, puoi testare entrambi i file locali tramite accesso diretto o tramite URL dal tuo server web locale.
Il team di CrossBrowserTesting.com ha creato un video che ti offre una buona spiegazione e dimostrazione di come questa parte del servizio funziona.
Sarebbe davvero grandioso se non avessimo bisogno di questi servizi. Ciò significherebbe che ogni browser è stato reso completamente come previsto su tutti i dispositivi che li supportavano. Sfortunatamente, abbiamo ancora un po 'di frammentazione del browser e ogni versione del browser tende ad avere i propri capricci da affrontare. Quindi servizi come CrossBrowserTesting.com forniscono un valore reale nella semplificazione dei test cross-browser.
Nel complesso, penso che il servizio sia molto buono anche se non privo di qualche stranezza. Ci sono stati alcuni blocchi intermittenti che ho sperimentato nei test dal vivo che possono essere attribuiti a Flash e in alcune sessioni, vedendo una serie di icone del browser nel dock del sistema operativo, mi sono lasciato a grattarmi la testa sul perché erano lì quando ho scelto un obiettivo specifico browser. Questi problemi non mi impedivano necessariamente di fare ciò che volevo fare (test), ma sembrava che le cose dovessero essere riordinate un po '.
La funzione di confronto del layout, tuttavia, era piuttosto calda e qualcosa che potevo vedere usando regolarmente.
Quello che sto vedendo è che il prezzo potrebbe essere un grande fattore di successo per l'ampiezza dei servizi che stanno offrendo. Sembra che CrossBrowserTesting.com si sia fissato a un prezzo molto competitivo comprendendo test in tempo reale, schermate e test locali in un unico costo mensile fisso anziché prezzi separati per servizi specifici. Questo è molto attraente, soprattutto per gli sviluppatori attenti al prezzo.
Il fattore principale, tuttavia, sarà il tempo necessario per il test. Dall'esperienza, due ore e mezza (la quantità di tempo assegnata per il piano di base) sembra un po 'limitata soprattutto quando si tiene conto della latenza del rendering. Ancora una volta, il tuo chilometraggio può variare, ma è certamente qualcosa da considerare.
Accentsconagua