Come rendere più efficienti i test cross-browser con LambdaTest
Pubblicato: 2022-03-10Questo articolo è stato gentilmente supportato dai nostri cari amici di LambdaTest, uno strumento di test di compatibilità cross-browser che consente di eseguire test cross-browser interattivi gratuiti e automatici su browser e dispositivi reali. Grazie!
Prima che i consumatori si sedessero davanti ai dispositivi mobili per ore ogni giorno, c'erano numerosi browser e sistemi operativi con cui i web designer dovevano fare i conti. Quindi, non è che il concetto di test cross-browser sia nuovo.
Poiché i browser Web non eseguono sempre il rendering dei siti Web allo stesso modo o elaborano i dati nel modo originariamente previsto, i test cross-browser sono stati a lungo una parte importante della progettazione e dello sviluppo Web. È l'unico modo per garantire che ciò che è costruito dietro le quinte sia implementato correttamente sul frontend di un sito web.
Ma può diventare rapidamente un'impresa noiosa se tenti di rivedere ogni browser, sistema operativo e dispositivo da solo.
Fortunatamente, stiamo vivendo in un'era in cui l'automazione è il re e ora abbiamo un modo migliore per condurre test cross-browser (e anche più frequentemente). Quindi, parliamo del perché è necessario automatizzare questo processo e come farlo con l'aiuto di LambdaTest.
Un modo migliorato per gestire i test cross-browser
Quando decidi di creare un sito Web per i tuoi utenti, rendi conto di chi sono, di cosa hanno bisogno e a cosa risponderanno durante il loro viaggio. Ma come e quando affronti i diversi risultati che i tuoi utenti potrebbero sperimentare grazie alla scelta del loro browser?
Il design reattivo può aiutare a mitigare alcune di queste differenze, ma non è un toccasana per i problemi di visualizzazione intrinseci tra browser e dispositivi.
Per garantire che il codice e le scelte di progettazione che hai fatto per un sito Web non abbiano un impatto negativo sugli utenti, è essenziale eseguire test cross-browser durante tutto il processo di progettazione web.
“
E se vuoi assicurarti che test approfonditi su più browser non abbiano un impatto negativo sui tuoi profitti, l'automazione è la strada da percorrere.
Ecco alcuni suggerimenti per aiutarti a creare test automatizzati nel tuo processo:
Familiarizzare con le differenze di supporto del browser
Questa è una carrellata di Statista dei migliori browser Web per quota di mercato:
Ora, il problema qui non è necessariamente che ogni browser elabora i dati del tuo sito Web in modo diverso. Ciò che sta davvero rovinando le cose è il motore che alimenta il browser dietro le quinte.
Ad esempio, questi sono i motori utilizzati dai principali browser Web:
- Chrome utilizza Blink + V8;
- Edge usa Blink;
- Firefox utilizza Quantum/Gecko + SpiderMonkey;
- Safari utilizza WebKit + Nitro;
- Internet Explorer utilizza Tridente + Chakra.
Molti di questi motori rendono lo stesso pezzo di codice in modo diverso. Ad esempio, guarda questo esperimento creato da LambdaTest:
Il tag HTML della data è uno dei tag più utilizzati e, tuttavia, Chrome, Firefox e Opera sono gli unici a supportarlo completamente, come indicato nella barra blu in alto sopra l'area di test. Anche in questo caso, questi browser offrono esperienze utente molto diverse.
Ad esempio, l'immagine sopra mostra come appare il tag della data in Chrome. Ecco come viene visualizzato lo stesso codice in Edge:
Non solo lo stile e le dimensioni dei caratteri sono leggermente diversi, ma anche il modo in cui appare il menu a discesa per la selezione della data è molto diverso.
Quindi, prima di iniziare a pensare ai test cross-browser e ad eliminare i nodi tra questi browser e motori, familiarizza con le differenze principali.
Uno strumento che puoi usare come riferimento è Posso usare….
È possibile cercare discrepanze nei componenti e nelle tecnologie più comunemente utilizzati. Prendi, ad esempio, il layout della griglia CSS:
La maggior parte dei browser principali (e alcuni meno importanti) supportano il layout della griglia CSS (quelli in verde). Internet Explorer (in blu) fornisce un supporto parziale e Opera Mini (in viola) non ne fornisce affatto.
Oppure supponiamo che tu stia cercando di utilizzare più immagini WebP nei tuoi progetti poiché sono molto migliori per prestazioni e risoluzione. Ecco cosa posso usare... ci dice sul supporto del browser per il formato immagine:
Le versioni più recenti di Internet Explorer e Safari (web e mobile) non ne forniscono il supporto. Quindi, se intendi progettare con immagini WebP, dovrai creare una soluzione alternativa per questi browser.
In conclusione: prenditi del tempo ora per capire che tipo di contenuto o codice è supportato, in modo da poter creare un sito Web in modo più efficace dall'inizio.
Suggerimento per professionisti: crea una matrice del browser come riferimento
Puoi capire perché è così importante capire le differenze tra i rendering del browser e il supporto. Più ti familiarizzi con loro, meno rimescoli dovrai fare quando viene scoperta una nuova discrepanza.
Per semplificarti la vita, sarebbe una buona idea creare ora una matrice del browser per tutte queste differenze.
Eccone uno semplice che LambdaTest ha progettato:
Ti consiglio di crearne uno tuo. Puoi sfruttare i dati di Can I use... oltre a documentare i problemi di supporto che hai riscontrato nei tuoi progetti.
Questo ti aiuterà anche a stabilire le priorità durante la progettazione. Ad esempio, puoi decidere quali funzionalità non supportate vale la pena utilizzare in base al tipo di impatto che hanno sugli obiettivi del tuo sito web.
Sarebbe anche utile avere questo foglio di calcolo a portata di mano una volta che un sito è stato pubblicato. Utilizzando i dati di Google Analytics, puoi iniziare a dare priorità alle scelte di progettazione in base ai browser Web utilizzati principalmente dai tuoi utenti.
Procurati uno strumento di test cross-browser che fa tutto
Non importa la dimensione dei siti Web che crei. Tutti i siti rivolti al pubblico trarrebbero vantaggio da uno strumento di test incrociato automatizzato.
La cosa particolarmente interessante dell'automazione con LambdaTest è che offre opzioni ai suoi utenti. Dai test completamente automatizzati che controllano l'impatto del tuo codice sul frontend alle attività semiautomatiche che semplificano il lavoro nella gestione di aggiornamenti e bug, ci sono tanti modi per automatizzare e ottimizzare il tuo processo.
Ecco alcuni dei punti salienti delle funzionalità che dovresti conoscere:
Test in tempo reale: il migliore per il monitoraggio dei bug
Il test in tempo reale è utile quando c'è qualcosa di mirato che devi esaminare con i tuoi occhi. Ad esempio, se hai inviato un design al cliente per la revisione e questi insistono che qualcosa non sembra giusto dalla loro parte, puoi rivedere il sito Web utilizzando la loro configurazione esatta. Sarebbe anche utile per confermare i bug e scoprire quali browser sono interessati.
Dal pannello dei test in tempo reale , inserirai l'URL del tuo sito e quindi sceglierai le specifiche di visualizzazione.
Ti consente di essere super specifico, scegliendo tra:
- Mac vs Android,
- Tipo di dispositivo,
- Versione del dispositivo,
- Sistema operativo,
- Programma di navigazione in rete.
Una volta iniziato il test, questo è ciò che vedrai (a seconda del tipo di dispositivo che scegli, ovviamente):
Sopra, puoi vedere la prima opzione nella barra laterale che ti consente di cambiare rapidamente la visualizzazione del dispositivo. In questo modo, se hai un paio di visualizzazioni del browser su cui stai cercando di confrontare o controllare gli errori, non devi tornare indietro.
Per quanto riguarda le altre opzioni di test in tempo reale, la maggior parte di esse è utile per identificare e segnalare problemi nel contesto in cui si sono effettivamente verificati.
Nello strumento di monitoraggio dei bug sopra, puoi individuare un punto della pagina in cui si è verificato un errore. Puoi quindi contrassegnarlo utilizzando una serie di strumenti nella barra laterale.
Gli utenti possono anche utilizzare le opzioni di screenshot e video per acquisire errori più grandi, in particolare quelli che si verificano quando ci si sposta o si interagisce con il sito.
Screenshot Test: Ideale per velocizzare i test manuali
Non c'è motivo per cui tu o il tuo QA non possiate ancora rivedere il vostro sito web da soli. Detto questo, perché il processo richiede più tempo del necessario? Puoi lasciare che gli strumenti di test dell'interfaccia utente visiva di LambdaTest accelerino il processo.
Lo strumento Screenshot, ad esempio, ti consente di selezionare tutti i dispositivi e i browser che desideri confrontare contemporaneamente:
Al termine del test, avrai tutti gli screenshot richiesti in un unico posto:
Puoi visualizzarli qui, scaricarli sul tuo computer o condividerli con altri.
Puoi anche organizzare i tuoi screenshot per progetto e versione/round. In questo modo, se stai lavorando su più cicli di revisioni e vuoi fare riferimento a una versione precedente, tutte le copie dell'iterazione precedente esistono qui. (Puoi anche usare schermate nei test di regressione che spiegherò a breve.)
Test reattivi: ideali per confermare un'esperienza mobile first
Se hai bisogno di vedere più di un semplice screenshot statico, i test reattivi ti hanno coperto. Tutto quello che devi fare è selezionare il sistema operativo e i dispositivi che desideri confrontare e lo strumento popolerà le versioni funzionanti complete del sito nel browser mobile:
Puoi rivedere il design e l'interattività del tuo sito web non solo in tutti i possibili browser, ma puoi anche cambiare l'orientamento del sito (nel caso in cui si verifichino problemi quando diventa orizzontale).
La cosa bella di questo strumento di test è che, se qualcosa sembra traballante, puoi contrassegnare il bug nel momento in cui lo rilevi. C'è un pulsante per farlo direttamente sopra il browser mobile interattivo. Ciò consentirà di segnalare e risolvere più rapidamente quei costosi errori mobili.
Test intelligenti: il migliore per i test di regressione
L'occhio può rilevare solo così tanto, specialmente quando guardi la stessa sezione di una pagina web per settimane.
Pertanto, quando inizi a implementare le modifiche sul tuo sito, durante lo sviluppo, appena prima del lancio e anche dopo, i test di regressione saranno cruciali per rilevare quei problemi potenzialmente difficili da individuare.
Questo dovrebbe avvenire ogni volta che qualcosa cambia:
- Aggiorna manualmente parte del design.
- Il codice è stato ottimizzato sul backend.
- Qualcuno segnala un bug e la correzione viene implementata.
- Il software è aggiornato.
- Un'API viene riconnessa.
Se sai quale pagina e quale parte di quella pagina sono direttamente interessate, i test intelligenti possono semplificare il lavoro per confermare che tutto è a posto.
Basta caricare lo screenshot originale della pagina interessata e quindi aggiungere un'immagine di confronto una volta apportata la modifica. (È qui che lo strumento Screenshot è davvero utile.)
Nota: ovviamente non c'è niente di sbagliato nel sito web di Smashing Magazine. Ma quello che ho fatto nell'esempio sopra è usare i rendering per diverse versioni di iPhone. Ovviamente, non è così che funzionano i test di regressione, ma volevo mostrarti come appare questa funzione di confronto quando qualcosa non va.
Ora, per quanto riguarda il motivo per cui questa funzione è così fantastica, ecco come funziona:
Questo singolo screenshot ti consente di vedere dove le due versioni della tua pagina non sono più allineate. Quindi, se gli screenshot provenivano originariamente dalla stessa visualizzazione del browser, questo potrebbe essere un problema se non avessi pianificato di riallineare tutti gli elementi.
Puoi anche utilizzare i test di confronto affiancati per verificare la stessa cosa:
Anche in questo caso, il test intelligente ha lo scopo di aiutarti a individuare e segnalare rapidamente i problemi durante i test di regressione. Trova il metodo che funziona meglio per te, in modo da poter risolvere questi problemi il più rapidamente possibile d'ora in poi.
Test automatizzati: ideali per rilevare problemi su scala più ampia
Tecnicamente, tutto ciò che abbiamo esaminato finora ha una qualche forma di automazione integrata, sia che si tratti di elaborare 20 diversi screenshot del browser contemporaneamente o di visualizzare immediatamente le interfacce di test mobili per tutti i dispositivi iOS e Android contemporaneamente.
Detto questo, la piattaforma LambdaTest include anche uno strumento chiamato "Automazione". E ciò che fa è consentire di eseguire test del selenio nel cloud su oltre 2.000 browser. Una funzionalità più recente, "Lambda Tunnel", può essere utilizzata anche per eseguire test del selenio sul tuo localhost. In questo modo, puoi vedere come vengono visualizzate le modifiche al codice anche prima che vengano pubblicate.
La combinazione di LambdaTest con il test del selenio offre numerosi vantaggi:
- È un modo altamente efficiente per condurre grandi quantità di test cross-browser, aumentando così la copertura del browser (cosa impossibile da fare manualmente).
- Con i test paralleli tra browser, ridurrai il tempo impiegato per l'esecuzione dei test di automazione nel suo complesso.
- Poiché il test del selenio inizia identificando il tuo linguaggio di codifica preferito, può rilevare in modo più intelligente gli errori che appariranno nei browser.
Naturalmente, il più grande vantaggio dell'utilizzo di LambdaTest Selenium Automation Grid è che LambdaTest ti aiuterà a valutare se i tuoi test hanno superato o meno.
Devi ancora rivedere i risultati per confermare che tutti gli errori sono veri fallimenti e viceversa, ma ti farà risparmiare molto tempo e grattacapi se LambdaTest fa il lavoro iniziale per te.
Avvolgendo
Il test cross-browser non serve solo a garantire che i siti Web siano reattivi per dispositivi mobili. Quello che in definitiva stiamo cercando di fare qui è eliminare le congetture dal web design. Potrebbero esserci più di una dozzina di browser possibili e centinaia di configurazioni di browser/dispositivo, ma i test automatici su più browser possono rendere molto più semplice il controllo di tutte queste possibilità e l'individuazione degli errori.