La prueba del navegador es la pesadilla de nuestra existencia. Bueno, eso es un poco exagerado, pero no por mucho. Las múltiples versiones del navegador y la fragmentación del navegador pueden dificultar la obtención de una buena cobertura de prueba para sus sitios, especialmente cuando se toman en cuenta los diferentes sistemas operativos que los desarrolladores utilizan para construir..
A lo largo de los años, hemos confiado en una variedad de herramientas para ayudarnos a enfrentar este desafío, que incluyen máquinas virtuales, herramientas que simulan navegadores e incluso tener varios dispositivos a mano para trabajar. Sería fantástico si hubiera una manera de tener una ventana gráfica que nos permitiera probar fácilmente en cualquier navegador principal y sus versiones individuales sin saltar por los aros..
BrowserStack.com tiene como objetivo ofrecer esto a través de su servicio de virtualización basado en navegador y en este artículo cubriremos el servicio y cómo ayuda a abordar el problema de las pruebas en varios navegadores..
Mencioné que BrowserStack ofrece un servicio de virtualización. Lo que la mayoría de los desarrolladores piensan cuando escuchan eso es "máquinas virtuales" y no de una manera agradable. Las máquinas virtuales, aunque son ciertamente útiles, requieren espacio y recursos valiosos en el disco para ser útiles y la mayoría de los desarrolladores detestan tener que ejecutarlas debido a eso. BrowserStack adopta un enfoque diferente al aprovechar Adobe Flash para proporcionar un navegador virtualizado dentro de su propio navegador. No es necesario que instales nada y obtienes acceso a navegadores virtuales reales en la nube.
Para darle un ejemplo, usando el servicio, abrí la página principal de Nettuts + a través de Safari 5.1 en OSX Lion mientras utilizaba Internet Explorer 11.
Esa es una funcionalidad bastante poderosa y la clave es que todo está hecho dentro de su navegador. Y, por supuesto, no está limitado en la elección del sistema operativo ni en las versiones del navegador. BrowserStack ofrece virtulización para:
Así es, ofrecen virtualización de navegador móvil. Estamos en un mundo móvil, así que no esperaría nada menos..
Dependiendo del sistema operativo que elija, BrowserStack ofrece una serie de navegadores compatibles para el sistema operativo específico, incluidos betas y nightlies en algunos casos.
Sí, incluso el temido IE6 está disponible. No puede morir lo suficientemente pronto.
Además de las opciones de sistema operativo y navegador, también puede elegir la resolución de pantalla que le gustaría probar, lo que es especialmente útil para verificar sus diseños sensibles. Solo sepa que BrowserStack también tiene un servicio complementario para abordar diseños sensibles que generan capturas de pantalla para diferentes dispositivos y tamaños..
El punto principal es que hay una amplia cobertura de prueba aquí sin la necesidad de instalar nada para usarlo.
Lo primero que debe hacer es registrarse para el servicio. BrowserStack es un servicio de pago y creo que el precio es muy razonable para la funcionalidad que está obteniendo y sí, hay muchas más funciones.
Una vez que se haya registrado y haya iniciado sesión, estará en el panel que ofrece un cuadro de diálogo de inicio rápido.
Esto le permite ingresar fácilmente la URL que desea probar y mediante los menús desplegables, el sistema operativo de destino y la versión del navegador. Puede ajustar las cosas a través del panel izquierdo, que ofrece opciones de resolución de pantalla y simulación de velocidad de representación de página.
Al hacer clic en Inicio, se inicia el proceso de establecer la conexión a través de Flash al servidor remoto y renderizar el navegador virtualizado:
Lo que me gustaría enfatizar aquí es que esto no es un capturador de capturas de pantalla o alguna sesión falsa. Tiene acceso completo a la funcionalidad de la página web, incluidos los menús, los botones, etc. Esto también incluye las herramientas de desarrollo que vienen con los navegadores. Sí, has leído bien. Usted tiene acceso a herramientas como las herramientas para desarrolladores web de Firefox, las herramientas IE F12 y las herramientas para desarrolladores Chrome. En esta captura de pantalla, estoy en una sesión ejecutando Firefox en Mountain Lion y usando las herramientas de desarrollo web de Firefox.
Así que no solo puede ver cómo se mostrarán sus páginas en los navegadores, sino que también puede usar las herramientas existentes para depurar problemas comunes. Muy genial!
Definitivamente, es increíble poder revisar tus páginas una vez que están disponibles públicamente, pero en la mayoría de los casos, vas a estar desarrollando localmente y querrás revisar tus páginas antes de poner tu código en producción..
BrowserStack ha abordado esto al proporcionar una capacidad de túnel que le permite probar sus páginas locales de forma remota. Utiliza un applet de Java para actuar como un proxy entre su directorio o servidor web y el servicio basado en la nube. Sí, esto significa que necesitarás instalar Java y, aunque tiendo a recomendar la instalación de los complementos del navegador Java, en este caso es una necesidad y vale la pena. Sin embargo, BrowserStack no está instalando un complemento. Está sirviendo un applet que aprovecha el complemento de navegador de applet de Java. Solo asegúrate de desactivar los complementos del navegador después de que hayas terminado de probar. Una cosa a tener en cuenta es que durante mis pruebas en Windows 8.1, tuve que usar la versión de 32 bits del JRE de Java, ya que el de 64 bits no parecía funcionar ni instalaría los complementos del navegador en Firefox o Chrome. Para obtener la versión de 32 bits, vaya a la página de descarga de manuales de Oracle. También tenga en cuenta que Firefox no habilitará el complemento de forma predeterminada, por lo que deberá ingresar y activarlo..
Mirando el panel izquierdo en el panel de BrowserStack, debería ver una sección titulada "Pruebas locales" con dos botones etiquetados "Tunel web"y"Línea de comando".
La opción "Túnel web" aprovecha el applet de Java para establecer el túnel entre su computadora y el servicio remoto. Esto podría hacerse en el nivel del sistema de archivos donde seleccionaría un directorio específico con sus páginas o una URL del servidor local (ejemplo: localhost). Para ilustrar esto, instalé WAMP en mi PC para tener un servidor web local para usar con BrowserStack. WAMP por defecto también instala phpMyAdmin, al que se puede acceder a través de:
http: // localhost: 81 / phpmyadmin /
Estoy usando el puerto 81 para no entrar en conflicto con otro proceso que estoy ejecutando. Haciendo clic en "Tunel webLa opción "abre el siguiente cuadro de diálogo que le permite saber que el applet se está cargando:
Debido a que Oracle ha trabajado para proteger Java, especialmente sus complementos de navegador, se le debe solicitar que ejecute el applet. Mi consejo es que nunca permita que ningún applet sin firma de un sitio web se ejecute en su PC, así que siempre establezco la configuración de seguridad de Java en "Alto". También hay una opción llamada"Muy alto"pero su uso evitará que el applet BrowserStack se conecte de forma remota.
Una vez que se ejecuta el applet, aparecerá un cuadro de diálogo que le solicitará la dirección o carpeta de su servidor local.
Como puede ver, ingresé mi URL local y detecté el número de puerto. También puede utilizar SSL si lo necesita. Desde allí, inicio la conexión y puedo ver mi copia local de phpMyAdmin en el servidor remoto de BrowserStack.
Ahora, si no desea utilizar el applet de Java en el navegador o por alguna razón no funciona, puede usar la opción "Línea de comando" que requiere que descargue el .tarro
archivo que se llama a través de la línea de comando para establecer la conexión:
java -jar BrowserStackTunnel.jarlocalhost, 3000,0
los
sería una clave de acceso de BrowserStack que tendrías que ingresar. Una vez que se establece la conexión, regresa al panel de control para comenzar la prueba.
Personalmente, prefiero el enfoque de applet ya que es muy simple. Puede obtener muchos más detalles sobre las pruebas locales de BrowserStack en esta página.
Creo que estaría de acuerdo en que, desde la perspectiva de las pruebas del navegador, este es un servicio muy bueno que hace que sea mucho más fácil realizar pruebas entre navegadores, incluso a nivel local. Y, sin duda, es una alternativa viable a las máquinas virtuales para aquellos que se quedan sin recursos del sistema..
Pero BrowserStack ofrece mucho más, incluyendo pruebas funcionales automatizadas, captura de captura de pantalla del navegador y un servicio de prueba de diseño que le permite ver cómo se verá su sitio en múltiples dispositivos (no solo en los navegadores).
Es uno de esos servicios que, como desarrollador profesional, sin duda vale la pena la inversión..