Introducción a las pruebas visuales en 5 minutos

Introducción

Hay muchas herramientas que te ayudan a garantizar que tu aplicación funcione perfectamente, pero ¿cómo detectar errores que son puramente visuales?

En el ejemplo anterior, el botón aún funciona y el texto sigue estando allí, pero el enlace de alguna manera cambió para tener el mismo color que el botón.

Podrías escribir pruebas de regresión para asegurarte de que el texto siempre esté en blanco y el botón siempre en verde, pero en cientos de páginas y estados, eso se vuelve descontrolable muy rápido. Por lo tanto, en lugar de (o además de) escribir pruebas de regresión línea tras línea, podrías verificar manualmente todas esas páginas antes de implementar. Pero todos sabemos lo lento e imperfecto que puede ser el control de calidad manual.

Ahí es donde entran en juego las pruebas visuales.

Las pruebas visuales son una nueva forma de confiar en la interfaz de usuario. En lugar de verificar manualmente la interfaz de usuario o probar el código subyacente, las pruebas visuales detectan automáticamente los cambios píxel por píxel en cada confirmación. Las pruebas visuales pueden ahorrarle tiempo al revisar el código y garantizar que no haya errores visuales que lleguen a producción.

En este tutorial, repasaremos cómo integrar el servicio de pruebas visuales de Percy con una aplicación de ejemplo, revisaremos los cambios visuales y ejecutaremos revisiones visuales como parte de su flujo de trabajo diario.

Paso 1: Integración de Percy

Si aún no lo ha hecho, regístrese para obtener una cuenta Percy, nombre su organización y cree su primer proyecto.

Nota: Al registrarse para obtener una cuenta Percy, se iniciará una prueba de 14 días, pero una vez que expire, se lo transferirá a un plan gratuito que incluye 5000 instantáneas gratuitas cada mes.

Los proyectos de Percy corresponden a las aplicaciones, los sitios o las bibliotecas de componentes que desea probar. Los SDK de Percy pueden agregar pruebas visuales a casi cualquier cosa que se muestre en un navegador.

Algunos ejemplos populares son:

• Cypress.io
• Titiritero
• Libro de cuentos para React
• Aplicaciones web de Ember
• Capybara para aplicaciones Ruby

Los SDK funcionan importando y llamando a comandos de instantáneas de Percy dondequiera que desee cobertura visual.

Para este tutorial, utilizaremos PercyScript, que ofrece una forma rápida y sencilla de comenzar a realizar pruebas visuales con solo un par de líneas de JavaScript. PercyScript puede interactuar completamente con los elementos haciendo clic, escribiendo y esperando, y también se puede utilizar para probar URL activas. Lea más en la documentación oficial de PercyScript.

Para este tutorial, vamos a utilizar una aplicación TodoMVC de ejemplo. Puedes adaptar el PercyScript que aparece a continuación para que funcione en tu propia aplicación.

Primero, configuremos la aplicación de ejemplo. Para ello, será necesario npmtener instalado Node.js. Para obtener más información sobre la instalación de Node, consulte Cómo instalar Node.js en Ubuntu 18.04:

git clone https://github.com/percy/example-todomvc.git
cd example-todomvc/
npm install
npm run start

Ahora puedes visitar http://localhost:8000y jugar con la aplicación todos tú mismo.

A continuación, instalaremos PercyScript y escribiremos nuestras primeras pruebas visuales para esta aplicación.

Mantenga el servidor en funcionamiento, abra una nueva terminal y ejecute:

npm install -D @percy/script

Esto se agregará @percy/scripta su package.jsonarchivo.

A continuación, crea un archivo llamado snapshots.jsy agrega tu primer PercyScript:

// snapshots.jsconst PercyScript = require('@percy/script');// A script to navigate our app and take snapshots with Percy.PercyScript.run(async (page, percySnapshot) = {  await page.goto('http://localhost:8000');  await percySnapshot('TodoMVC home page');  // Enter a new to-do.  await page.type('.new-todo', 'A really important todo');  await page.keyboard.press('Enter');  await percySnapshot('TodoMVC with a new todo', { widths: [768, 992, 1200] });});

El siguiente paso es comenzar a ejecutar este PercyScript y ver cambios visuales.

Paso 2: Ejecución de pruebas visuales

Para ejecutar PercyScript localmente, copie PERCY_TOKENdesde la pantalla del nuevo proyecto y luego ejecute:

export PERCY_TOKEN=your_token_here
npx percy exec -- node snapshots.js

Nota: Asegúrese de reemplazarlo your_token_herecon el archivo .exe específico de su proyecto PERCY_TOKEN.

Deberías ver un resultado como el siguiente:

Output[percy] created build #1: https://percy.io/test/example-todomvc/builds/1738842[percy] percy has started.[percy] snapshot taken: 'TodoMVC home page'[percy] snapshot taken: 'TodoMVC with a new todo'[percy] stopping percy...[percy] waiting for 2 snapshots to complete...[percy] done.[percy] finalized build #1: https://percy.io/test/example-todomvc/builds/1738842

Se ha ejecutado PercyScript, enviando instantáneas a Percy para su renderización y procesamiento:

Verás que, dado que esta es la primera compilación, no hay nada con qué compararla. También se ha aprobado automáticamente porque la confirmación se realizó en la versión maestra y Percy asume que las compilaciones maestras están listas para producción.

Percy funciona capturando la instantánea del DOM en todos los lugares donde se llama al comando Percy snapshot. Luego, la página o el componente se renderizan en un entorno de renderizado personalizado. Las nuevas instantáneas se comparan con las instantáneas de referencia para determinar qué píxeles han cambiado.

Ahora que ha integrado su proyecto y ha enviado su primera compilación para establecer su línea base, hagamos un cambio y revisemos las diferencias.

Paso 3: Revisión de los cambios visuales

Creemos una nueva rama de características e introduzcamos un cambio visual.

Utilice su editor de texto para editar index.htmly hacer que el h1texto de la línea 11 sea de color morado:

h1

Ahora ejecute las instantáneas nuevamente:

npx percy exec -- node snapshots.js

Abra el enlace resultante y ahora podrá ver los cambios visuales resaltados.

Comparación lado a lado

Las áreas rojas en el panel derecho representan píxeles que han cambiado: esos píxeles cambiados se denominan diferencias visuales.

Al hacer clic en esa área (o presionar d) alternará entre la instantánea subyacente y la diferencia superpuesta para que pueda ver exactamente qué ha cambiado.

Nota: haga clic en el cuadro de expansión de flecha para obtener una vista de pantalla completa. Desplace las instantáneas antiguas, nuevas y diferentes con las teclas izquierda y derecha, y navegue entre instantáneas con las teclas arriba y abajo.

Diferencias responsivas

Notarás que aquí se muestran los anchos con los que se han renderizado tus instantáneas. En este ejemplo, renderizamos instantáneas para dispositivos móviles y computadoras de escritorio.

Seleccione los distintos anchos para ver qué ha cambiado en cada ancho.

Pruebas visuales entre navegadores

De forma predeterminada, Percy procesa todas las instantáneas tanto con Chrome como con Firefox.

Las instantáneas entre navegadores le ayudan a detectar diferencias sutiles causadas por la representación del navegador.

Si está conforme con los cambios, haga clic en Aprobar todo . Ha completado su primera revisión visual.

Paso 4: Integración de pruebas visuales con flujos de trabajo de código

Para aprovechar al máximo las pruebas visuales automatizadas, puede tener sentido agregar revisiones visuales a sus flujos de trabajo de prueba e integración continua.

Para configurar Percy con su servicio de CI de modo que se ejecuten pruebas visuales cada vez que se inicia una compilación de CI, debe agregar sus PERCY_TOKENvariables de entorno de CI. Para obtener instrucciones más detalladas y ver todos los servicios de CI compatibles, consulte la documentación oficial de configuración de CI de Percy.

También puedes agregar Percy a tus solicitudes de extracción/combinación para recibir una notificación cuando se detecten cambios visuales y cuando esos cambios se aprueben y estén listos para fusionarse.

Dirígete a la configuración de tu organización para darle a Percy acceso a GitHub o GitLab. Una vez que le hayas dado acceso, conecta tu proyecto en Percy al repositorio de origen de tu proyecto. Luego, la próxima vez que realices una confirmación, Percy aparecerá en las verificaciones de tus solicitudes de incorporación/combinación:

Al hacer clic en Detalles, accederá directamente a la interfaz de usuario de Percy, donde podrá revisar los cambios visuales. Una vez que se aprueben las instantáneas, el estado de confirmación cambiará a verde y podrá fusionar la solicitud de incorporación de cambios:

En este punto ya estás listo para fusionar.

Conclusión

En este tutorial, hemos revisado un flujo de trabajo de prueba visual utilizando la plataforma de revisión visual de Percy. Para seguir aprendiendo sobre cómo funciona Percy, eche un vistazo a más documentación oficial:

• Introducción a Percy
• Fundamentos de la plataforma Percy
• Conceptos básicos de pruebas visuales
• Kits de desarrollo de software de Percy