Il tuo compito non finisce con l'assicurarti 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 provare altre soluzioni per browser per l'emulazione.
Riepilogo
- Se non hai un determinato dispositivo o vuoi eseguire un controllo a campione, 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 serie di dispositivi dalla tua workstation.
- Gli emulatori basati su cloud ti consentono di automatizzare i test di unità per il tuo sito su piattaforme diverse.
Emulatori di browser
Gli emulatori di browser sono ideali per testare la reattività di un sito, ma non simulano 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 del design adattabile di Firefox
Firefox ha una visualizzazione del design adattabile che ti incoraggia a smettere di pensare in termini di dispositivi specifici e, invece, a esplorare come cambia il tuo design in base alle dimensioni dello schermo comuni o alle tue dimensioni trascinando i bordi.
Emulazione F12 di Edge
Per emulare i Windows Phone, utilizza l'emulazione integrata di Microsoft Edge.
Poiché Edge non è compatibile con le versioni precedenti, utilizza l'emulazione di IE 11 per simulare l'aspetto della pagina nelle versioni precedenti di Internet Explorer.
Emulatori e simulatori di dispositivi
I simulatori e gli emulatori 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 predefinito 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, che verranno trattati più avanti in questa guida. Chromium Content Shell utilizza lo stesso motore di rendering di Chrome, ma non include le funzionalità specifiche del browser.
L'emulatore Android è fornito con l'SDK Android, che devi scaricare da qui. Quindi, segui le istruzioni per configurare un dispositivo virtuale e avviare l'emulatore.
Una volta avviato l'emulatore, fai clic sull'icona del browser per testare il tuo sito sull'ex browser Stock per Android.
Chromium Content Shell su Android
Android Emulator Content Shell
Per installare Chromium Content Shell per Android, lascia in esecuzione l'emulatore ed esegui i seguenti comandi in un 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 Chromium Content Shell.
Firefox su Android
Icona di Firefox nell'emulatore Android
Analogamente a Content Shell di Chromium, puoi ottenere un APK per installare Firefox sull'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 con il seguente comando:
adb install <path to APK>/fennec-XX.X.XX.android-arm.apk
Simulatore iOS
Il simulatore iOS per Mac OS X è incluso in Xcode, che puoi installare dall'App Store.
Al termine, scopri come utilizzare il simulatore consultando la documentazione di Apple.
Modern.IE
VM IE moderna
Le macchine virtuali Modern.IE ti consentono di accedere a diverse versioni di IE sul tuo computer tramite VirtualBox (o VMWare). Scegli una macchina virtuale nella pagina di download qui.
Emulatori e simulatori basati su cloud
Se non puoi utilizzare gli emulatori e non hai accesso a dispositivi reali, la soluzione migliore è rappresentata dagli emulatori basati su cloud. Un grande vantaggio degli emulatori basati su cloud rispetto ai dispositivi reali e agli emulatori locali è che puoi automatizzare i test di unità per il tuo sito su piattaforme diverse.
- BrowserStack (commerciale) è la soluzione più semplice da utilizzare per i test manuali. Seleziona un sistema operativo, la versione del browser e il tipo di dispositivo, seleziona un URL da visitare e viene avviata una macchina virtuale ospitata con cui puoi interagire. Puoi anche avviare più emulatori nella stessa schermata, in modo da testare l'aspetto e il funzionamento della tua app su più dispositivi contemporaneamente.
- SauceLabs (commerciale) ti consente di eseguire test di unità all'interno di un emulatore, il che può essere molto utile per creare script per un flusso sul tuo sito e guardare la registrazione video di questo flusso in un secondo momento su vari dispositivi. Puoi anche eseguire test manuali sul tuo sito.
- Device Anywhere (commerciale) non utilizza emulatori, ma dispositivi reali che puoi controllare da remoto. Questa operazione è molto utile se devi riprodurre un problema su un dispositivo specifico e non riesci a vedere il bug in nessuna delle opzioni delle guide precedenti.
- LambdaTest (commerciale) ti aiuterà a eseguire test manuali su più browser su una combinazione di oltre 2000 browser e sistemi operativi. Gli utenti potranno registrare video di bug complessi e persino condividerli tramite integrazioni come MS Teams, Slack e altre ancora. Gli utenti possono velocizzare i test eseguendoli in parallelo.