¡No tengas miedo de Chrome sin cabeza! Aprenda por qué y cómo usarlo para las pruebas de Ember

Última actualización 1/9/17, Ember CLI 2.15. ¡Un agradecimiento especial a Scott Newcomer y Ben Demboski por ayudarme a depurar, a Karl Becker por la edición y a Tobias Bieniek por algunos consejos de CLI!

Después de algunas horas depurando mi suite de pruebas EmberJS que se negaba a ejecutarse desde la línea de comandos, abandoné PhantomJS y cambié a Headless Chrome. Analicemos lo que significa, cómo lo hice y cuáles son los impactos.

¿Qué es incluso Chrome sin cabeza?

Los desarrolladores de Ember tienen opciones para los navegadores que utilizan para ejecutar su conjunto de pruebas, y Headless Chrome es uno de ellos. ¿Pero, qué es esto? El blog de Google dice:

Es una forma de ejecutar el navegador Chrome en un entorno sin cabeza. ¡Esencialmente, ejecutar Chrome sin Chrome!
(Alt: qué es esto, ni siquiera ...)

Correcto. Aquí hay una mejor definición de Wikipedia:

Un navegador sin cabeza es un navegador web sin una interfaz gráfica de usuario. Los navegadores sin cabeza proporcionan un control automatizado de una página web en un entorno similar a los navegadores web populares, pero se ejecutan a través de una interfaz de línea de comandos o mediante comunicación de red.

A partir de Ember CLI 2.15, Chrome sin cabeza es el valor predeterminado para realizar pruebas en EmberJS. Si está trabajando con una aplicación Ember anterior, tengo buenas noticias: no necesita actualizar su aplicación para probar Chrome sin cabeza. De hecho, puede usar la última versión de CLI con casi cualquier versión anterior de la aplicación Ember.

¿Por qué se necesita un ambiente "sin cabeza"?

Al igual que un navegador normal, un navegador sin cabeza entiende HTML y CSS. Puede ejecutar JavaScript como solicitudes AJAX. Piense en las pruebas de aceptación en Ember. Si una prueba intenta hacer clic en un botón que está oculto, no se debe poder hacer clic en ella y la prueba debe fallar. ¿Pero cómo se sabe eso? Porque el navegador hace el trabajo pesado de combinar todo el HTML, CSS y JavaScript en algo útil. Y, dado que no hay imágenes para mostrar, las pruebas son más rápidas en un entorno sin cabeza. Hay muchos tipos diferentes de navegadores sin cabeza. Chrome y PhantomJS son solo dos ejemplos.

Entonces, ¿por qué no ejecutar las pruebas directamente en un navegador Chrome normal? Si tiene una aplicación Ember, ejecute ember serve y visite http: // localhost: 4200 / tests, puede ver cómo se ejecutan sus pruebas en tiempo real, o pausarlas y ver el estado de la aplicación visualmente. Sin embargo, cuando los navegadores sin cabeza realmente brillan es cuando se utilizan para las pruebas de integración continua, comúnmente conocidas como CI. En las aplicaciones de producción, es común usar un servicio que ejecuta automáticamente su conjunto de pruebas a medida que se confirma el código. Y en su mayor parte, esas pruebas se ejecutan en un servidor, no en navegadores "normales". Por ejemplo, revise las Solicitudes de extracción abiertas para parte del sitio web de Ember, especialmente cualquiera con una x roja al lado. Cada vez que se abre una solicitud de extracción en GitHub, puede ver si pasa las pruebas.

Esta no es mi solicitud de extracción. Lo juro. (Alt: imagen que muestra múltiples fallas de prueba en una solicitud de extracción de GitHub)

¿Por qué no usar PhantomJS?

PhantomJS es otro ejemplo de un navegador sin cabeza. Crearlo y mantenerlo fue una tarea hercúlea, y su éxito es la razón por la que tenemos cosas buenas. Crear aplicaciones es difícil ... ¿te imaginas construir un navegador completo? Pero parece que está saliendo. Un mantenedor renunció en abril de 2017 y dijo:

Chrome sin cabeza se acerca. Creo que la gente lo cambiará eventualmente. Chrome es más rápido y más estable que PhantomJS. Y no come recuerdos como locos. No veo ningún futuro en el desarrollo de PhantomJS.

Como señaló el responsable de mantenimiento, PhantomJS tiene algunos problemas. Tenía una propia: ninguna de mis pruebas funcionaría. Todo estaba bien en una aplicación nueva, pero una parte desconocida de mi aplicación real no era compatible después de introducir algunas dependencias bien establecidas. Ejecuté la prueba de ascua, pero antes de que comenzara cualquier prueba, me saludaron con estos errores:

no está bien 1 PhantomJS 2.1 - Error global: SyntaxError: token inesperado ‘}’ en http: // localhost: 7357 / assets / vendor.js, línea 120177
no está bien 2 PhantomJS 2.1 - Error global: Error: No se pudo encontrar el módulo ember-metal requerido por: ember-testing / support en http: // localhost: 7357 / assets / test-support.js, línea 58
no está bien 3 PhantomJS 2.1 - Error global: Error de referencia: No se puede encontrar la variable: definir en http: // localhost: 7357 / assets / ember-bio-bright.js, línea 5
no está bien 4 PhantomJS 2.1 - Error global: Error de referencia: No se puede encontrar la variable: definir en http: // localhost: 7357 / assets / tests.js, línea 3
no está bien 5 PhantomJS 2.1 - Error global: Error de referencia: No se puede encontrar la variable: EmberENV en http: // localhost: 7357/4215 / tests / index.html? hidepassed, línea 38

Tiré todo a este error. Explotando módulos de nodos, eliminando todas las pruebas excepto la más simple, reinstalando EmberCLI, instalando / desinstalando PhantomJS, cavando en el paquete de proveedores, compartiendo GIFs de gatos enojados, encendiendo algo de incienso ... nada.

Después de un poco de preguntas y respuestas con otros desarrolladores, me sugirieron que probara Headless Chrome para ver si los errores se hacían más fáciles de depurar.

Los errores no se hicieron más fáciles de depurar.

Los errores simplemente desaparecieron.

Cómo hacer el cambio

Hay un archivo en las aplicaciones de Ember llamado testem.js, y ahí es donde configura qué herramientas de prueba usar cuando escribe ember test o ember test —-server. Aquí hay un enlace al contenido de testem.js que terminé usando, copiado y pegado del artículo de Ryan Toronto. Puede ver el archivo de testem enviado con EmberCLI en este enlace en EmberCLI GitHub.

¿Qué es Testem?

Testem es un corredor de prueba, lo que significa que carga y ejecuta las pruebas de su aplicación, utilizando la configuración que especificó en testem.js. También obtiene una interfaz amigable para ver los resultados de sus pruebas desde la línea de comandos. Me sorprendió saber que Testem no es exclusivo de Ember. Funciona con muchos marcos JavaScript, herramientas de prueba (como QUnit, Mocha y Jasmine) y entornos de navegador.

¿Mira esto? Eso es Testem en acción, como resultado de `ember test - server`. Como puede ver, mi último trabajo en ember-api-docs se está haciendo GENIAL. Todo estará bien y definitivamente sé lo que estoy haciendo. No. (Alt: ventana de terminal donde el corredor de testem muestra 175 fallas de prueba)

¿Qué impactos negativos podría tener Headless Chrome?

Bueno, para empezar, Headless Chrome no es de código abierto como PhantomJS. Los pros y los contras de eso podrían ser su propio artículo.

También es nuevo. Fue enviado con Chrome 59, pero los desarrolladores han tenido formas de usar Chrome antes de eso. La gran pregunta es, si ya está haciendo pruebas de CI, ¿qué tan bien lo respalda su proveedor? Muchos de los grandes jugadores han sido rápidos en implementarlo, pero es posible que tengas algunos problemas.

Finalmente, es posible que tengas algunas pruebas que pasen en PhantomJS y fallen en Headless Chrome, lo que significa que es hora de hacer un poco de depuración. Por supuesto, experimenté lo contrario, donde todos mis problemas desaparecieron mágicamente cuando cambié de navegador sin cabeza, pero los problemas no son infrecuentes. Este es un punto de dolor similar a las cosas que se ven geniales en Chrome, pero explotan en Firefox. Por esta razón y para hacer sus pruebas más robustas, algunas organizaciones ejecutan sus pruebas en múltiples herramientas sin cabeza.

Cuando cambiar

Si te sientes atrapado, o simplemente quieres saber cómo es la última y mejor experiencia para las pruebas de Ember, ¡pruébalo!

¡Feliz prueba sin cabeza!

Ilustraciones de IrenHorrors, compartidas bajo la Licencia Creative Commons Reconocimiento-No comercial-Sin obras derivadas 3.0