Tu trabajo no termina cuando te aseguras de que el sitio funcione perfectamente en Chrome y Android. Aunque Device Mode puede simular otros dispositivos diferentes, como iPhone, te recomendamos ver otras soluciones de navegadores para emulación.
Resumen
- Cuando no tienes un dispositivo determinado 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 una variedad de dispositivos desde tu estación de trabajo.
- Los emuladores basados en la nube te permiten automatizar pruebas de unidades para tu sitio en diferentes plataformas.
Emuladores de navegadores
Los emuladores de navegadores son muy útiles para probar la adaptabilidad de un sitio, pero no emulan diferencias en API, compatibilidad con CSS y algunos 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 tenga el comportamiento deseado.
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 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.
Como 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 emuladores y simuladores de dispositivos simulan no solo el entorno del navegador, sino también todo el dispositivo. Son útiles para probar comportamientos que requieren la integración del SO (por ejemplo, la entrada de un 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 abarcaremos posteriormente en esta guía. Chromium Content Shell usa el mismo motor de renderización 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 desde aquí. Luego, sigue las instrucciones para configurar un dispositivo virtual y iniciar el emulador.
Una vez iniciado 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 en Android Emulator
Para instalar Chromium Content Shell para Android, deja el emulador en segundo plano 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 en Chromium Content Shell.
Firefox para 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 versiones diferentes de IE en tu computadora mediante VirtualBox (o VMWare). Elige una máquina virtual en la página de descarga.
Emuladores y simuladores basados en la nube
Si no puedes usar los emuladores y no tienes acceso a dispositivos reales, la mejor opción son los emuladores basados en la nube. Una gran ventaja de los emuladores basados en la nube, en comparación con los dispositivos reales y emuladores locales, es que puedes automatizar pruebas de unidades para el sitio en diferentes plataformas.
- BrowserStack (comercial) es el más fácil de usar para las pruebas manuales. Debes seleccionar un sistema operativo, la versión de tu navegador, el tipo de dispositivo y una URL para navegar. Este emulador generará una máquina virtual alojada con la que podrás interactuar. También puedes iniciar varios emuladores en la misma pantalla, lo que te permitirá 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 generar una secuencia de comandos del flujo por el sitio y ver el video de esto después en varios dispositivos. También puedes realizar la prueba manual del sitio.
- Device Anywhere (comercial) no usa emuladores, sino dispositivos reales que puedes controlar de manera 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 en varios 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 hasta compartirlos a través de integraciones como MS Teams, Slack y muchas más. Los usuarios pueden acelerar sus pruebas ejecutando pruebas en paralelo.