Tu trabajo no termina cuando te aseguras de que el sitio funcione bien en Chrome y Android. Si bien Device Mode puede simular diferentes dispositivos, como iPhones, te recomendamos que consultes otras soluciones de navegadores para emulación.
Resumen
- Cuando no tienes un dispositivo en particular o deseas realizar una verificación al azar, la mejor opción es emular el dispositivo dentro del navegador.
- Los emuladores y simuladores de dispositivos te permiten imitar el sitio de desarrollo en diferentes dispositivos desde tu estación de trabajo.
- Los emuladores basados en la nube te permiten automatizar las pruebas de unidades para el sitio en diferentes plataformas.
Emuladores de navegadores
Los emuladores de navegadores son ideales para probar la capacidad de respuesta de un sitio, pero no emulan diferencias en API, compatibilidad con CSS y ciertos comportamientos que verías en un navegador para dispositivos móviles. Prueba tu sitio en navegadores que se ejecuten en dispositivos reales para asegurarte de que todo se comporte como se espera.
Vista de diseño responsivo de Firefox
Firefox tiene una vista de diseño responsivo que te alienta a dejar de pensar en términos de dispositivos específicos y, en su lugar, explorar cómo cambia tu diseño en tamaños de pantalla comunes o en tu propio tamaño arrastrando los bordes.
Emulación con F12 de Edge
Para emular los teléfonos Windows Phone, usa la emulación integrada de Microsoft Edge.
Dado que Edge no incluye compatibilidad con versiones heredadas, usa la emulación de IE 11 para simular cómo se vería tu página en versiones anteriores de Internet Explorer.
Emuladores y simuladores de dispositivos
Los simuladores y emuladores de dispositivos simulan no solo el entorno del navegador, sino todo el dispositivo. Son útiles para probar elementos que requieren integración en el SO, como la entrada de formulario con teclados virtuales.
Android Emulator
Navegador Stock en Android Emulator
Por el momento, no se puede instalar Chrome en un emulador de Android. Sin embargo, puedes usar el navegador de Android, Chromium Content Shell y Firefox para Android, que analizaremos más adelante en esta guía. Chromium Content Shell usa el mismo motor de procesamiento de Chrome, pero no incluye ninguna de las funciones específicas del navegador.
El emulador de Android incluye el SDK de Android que debes descargar aquí. Luego, sigue las instrucciones para configurar un dispositivo virtual y, luego, iniciar el emulador.
Una vez que se inicie el emulador, haz clic en el ícono del navegador para poder probar el sitio en la versión anterior de Stock Browser for Android.
Chromium Content Shell en Android
Content Shell de Android Emulator
Si quieres instalar Chromium Content Shell para Android, deja el emulador en ejecución y ejecuta los siguientes comandos en un símbolo del sistema:
git clone https://github.com/PaulKinlan/chromium-android-installer.git
chmod u+x ./chromium-android-installer/\*.sh
./chromium-android-installer/install-chromeandroid.sh
Ahora puedes probar tu sitio con Chromium Content Shell.
Firefox en Android
Ícono de Firefox en Android Emulator
Al igual que con Chromium Content Shell, puedes obtener un APK para instalar Firefox en el emulador.
Descarga el archivo .apk correcto desde https://ftp.mozilla.org/pub/mozilla.org/mobile/releases/latest/.
Desde aquí, puedes instalar el archivo en un emulador abierto o dispositivo Android conectado con el siguiente comando:
adb install <path to APK>/fennec-XX.X.XX.android-arm.apk
Simulador de iOS
El simulador de iOS para Mac OS X incluye Xcode, que puedes instalar desde App Store.
Cuando termines, obtén más información para trabajar con el simulador en la documentación de Apple.
Modern.IE
VM de Modern IE
Las máquinas virtuales de Modern.IE te permiten acceder a diferentes versiones de IE en tu computadora a través de VirtualBox (o VMWare). Elige una máquina virtual en la página de descargas aquí.
Emuladores y simuladores basados en la nube
Si no puedes usar los emuladores y no tienes acceso a dispositivos reales, los emuladores basados en la nube son la segunda mejor opción. Una gran ventaja de los emuladores basados en la nube, en comparación con los dispositivos reales y los emuladores locales, es que puedes automatizar las pruebas de unidades para el sitio en diferentes plataformas.
- BrowserStack (comercial) es el más fácil de usar para las pruebas manuales. Seleccionas un sistema operativo, la versión del navegador y el tipo de dispositivo, una URL para explorar y este inicia una máquina virtual alojada con la que puedes interactuar. También puedes activar varios emuladores en la misma pantalla, lo que te permite probar el aspecto de tu app en varios dispositivos al mismo tiempo.
- SauceLabs (comercial) te permite ejecutar pruebas de unidades dentro de un emulador, lo que puede ser muy útil para crear secuencias de comandos de un flujo en tu sitio y mirar posteriormente el video de esto en varios dispositivos. También puedes realizar pruebas manuales con tu sitio.
- Device Anywhere (comercial) no usa emuladores, sino dispositivos reales que puedes controlar de forma remota. Esto es muy útil cuando necesitas reproducir un problema en un dispositivo específico y no puedes ver el error en ninguna de las opciones de las guías anteriores.
- LambdaTest (comercial) te ayudará a realizar pruebas manuales entre navegadores en una combinación de más de 2,000 navegadores y sistemas operativos. Los usuarios podrán grabar videos de errores complejos y compartirlos a través de integraciones como MS Teams, Slack y más. Los usuarios pueden acelerar sus pruebas ejecutando pruebas en paralelo.