Emula e testa altri browser

Il tuo compito non termina con la garanzia che il tuo sito funzioni perfettamente su Chrome e Android. Anche se la Modalità dispositivo può simulare una serie di altri dispositivi come gli iPhone, ti invitiamo a dare un'occhiata alle soluzioni di altri browser per l'emulazione.

Riepilogo

  • Se non hai un dispositivo in particolare o vuoi fare un controllo casuale su qualcosa, la soluzione migliore è emulare il dispositivo direttamente nel browser.
  • Gli emulatori e i simulatori di dispositivi ti consentono di simulare il tuo sito di sviluppo su una vasta gamma di dispositivi dalla tua workstation.
  • Gli emulatori basati su cloud ti consentono di automatizzare i test delle unità per il tuo sito su diverse piattaforme.

Emulatori di browser

Gli emulatori di browser sono ottimi per testare la reattività di un sito, ma non emulano le differenze in termini di API, supporto CSS e determinati comportamenti che vedresti su un browser mobile. Testa il tuo sito su browser in esecuzione su dispositivi reali per assicurarti che tutto funzioni come previsto.

Visualizzazione Responsive Design di Firefox

Firefox dispone di una visualizzazione adattabile che ti incoraggia a smettere di pensare in termini di dispositivi specifici e scopri invece come cambia il tuo design su schermi di dimensioni comuni o nelle tue dimensioni trascinando i bordi.

Emulazione F12 di Edge

Per emulare i Windows Phone, utilizza l'emulazione integrata di Microsoft Edge.

Poiché Edge non include la compatibilità precedente, utilizza l'emulazione di IE 11 per simulare l'aspetto della pagina nelle versioni precedenti di Internet Explorer.

Emulatori e simulatori di dispositivi

Gli emulatori e i simulatori di dispositivi simulano non solo l'ambiente del browser, ma l'intero dispositivo. Sono utili per testare elementi che richiedono l'integrazione del sistema operativo, ad esempio l'inserimento di moduli con tastiere virtuali.

emulatore Android

Browser stock dell'emulatore di Android

Browser stock nell'emulatore Android

Al momento non è possibile installare Chrome su un emulatore Android. Tuttavia, puoi utilizzare il browser Android, Chromium Content Shell e Firefox per Android, di cui parleremo più avanti in questa guida. Chromium Content Shell utilizza lo stesso motore di rendering di Chrome, ma è privo delle funzionalità specifiche del browser.

L'emulatore Android viene fornito con l'SDK Android che devi scaricare da qui. Dopodiché segui le istruzioni per configurare un dispositivo virtuale e avviare l'emulatore.

Una volta avviato l'emulatore, fai clic sull'icona del browser e potrai testare il tuo sito sul vecchio browser Stock per Android.

Chromium Content Shell su Android

shell contenuto emulatore Android

shell contenuto emulatore Android

Per installare Chromium Content Shell per Android, lascia in esecuzione l'emulatore ed esegui questi comandi al prompt dei comandi:

git clone https://github.com/PaulKinlan/chromium-android-installer.git
chmod u+x ./chromium-android-installer/\*.sh
./chromium-android-installer/install-chromeandroid.sh

Ora puoi testare il tuo sito con la shell di contenuti di Chromium.

Firefox su Android

Icona di Firefox sull'emulatore di Android

Icona di Firefox sull'emulatore di Android

Analogamente a Content Shell di Chromium, puoi scaricare un APK per installare Firefox nell'emulatore.

Scarica il file .apk corretto da https://ftp.mozilla.org/pub/mozilla.org/mobile/releases/latest/.

Da qui, puoi installare il file su un emulatore aperto o su un dispositivo Android connesso utilizzando il seguente comando:

adb install <path to APK>/fennec-XX.X.XX.android-arm.apk

Simulatore iOS

Il simulatore iOS per Mac OS X è dotato di Xcode, che puoi installare dall'App Store.

Al termine, scopri come lavorare con il simulatore consultando la documentazione di Apple.

Modern.IE

VM IE moderna

VM IE moderna

Le macchine virtuali Modern.IE consentono di accedere a diverse versioni di IE sul computer tramite VirtualBox (o VMWare). Scegli una macchina virtuale nella pagina di download qui.

Emulatori e simulatori basati su cloud

Se non puoi usare gli emulatori e non hai accesso a dispositivi reali, allora gli emulatori basati su cloud sono la soluzione migliore. Un grande vantaggio degli emulatori basati su cloud rispetto a dispositivi reali ed emulatori locali è che puoi automatizzare i test delle unità per il tuo sito su diverse piattaforme.

  • BrowserStack (commerciale) è il più facile da utilizzare per i test manuali. Dopo aver selezionato un sistema operativo, selezionare la versione del browser e il tipo di dispositivo, selezionare un URL da sfogliare. Verrà avviata una macchina virtuale ospitata con cui puoi interagire. Puoi anche attivare più emulatori nella stessa schermata per testare l'aspetto e il design della tua app su più dispositivi contemporaneamente.
  • SauceLabs (commerciale) ti consente di eseguire test delle unità all'interno di un emulatore, che può essere davvero utile per creare uno script di un flusso attraverso il tuo sito e guardare in seguito la registrazione video di questo su vari dispositivi. Puoi anche eseguire test manuali con il tuo sito.
  • Device Anywhere (commercial) non usa emulatori, ma dispositivi reali che puoi controllare da remoto. Questo è molto utile nei casi in cui sia necessario riprodurre un problema su un dispositivo specifico e non sia possibile individuare il bug in nessuna delle opzioni delle guide precedenti.
  • LambdaTest (commerciale) ti consente di eseguire test manuali tra browser su una combinazione di oltre 2000 browser e sistemi operativi. Gli utenti potranno registrare video di bug complessi e condividerli tramite integrazioni come MS Teams, Slack e altri ancora. Gli utenti possono velocizzare i test eseguendo test in parallelo.