Lección 4: E2E

Testing End-to-End (E2E)

En esta ocasión vamos a centrarnos en E2E (End-to-End), testing desde en Front para el Front. Hablamos de la técnica testing de más alto nivel dentro del desarrollo Web. Ya no tocamos el código sino sus resultados en el navegador

El objetivo es emular la experiencia del visitante, generando un ratón y teclado virtual que navegue por cada rincón. Compruebar si son visibles algunas etiquetas HTML, si están presentes ciertas clases con ciertas acciones, si las animaciones se reproducen, si falla al forzar algunos momentos, si la velocidad del sitio es correcta, etc… Todo lo descrito se puede automatizar para tener una capa final donde escapamos del aspecto más interno para estar seguro que todas las piezas trabajen armónicamente de forma correcta. En caso de que algún paso no sea el esperado, se generará un informe para analizar lo ocurrido.

La gran majoría de los Frameworks Testing E2E trabajan sobre JavaScript como herramienta, ergo será sencillo de implementar si eres conocedor de las artes Front-End. Haremos uso de Cypress, quien destaca por su facilidad de uso.

Otra herramienta popular es Selenium, un sistema de automatización para controlar ciertos navegadores web. No vamos a utilizarlo por uso su dificultad de instalación ya que requiere un driver nativo y algunos pasos extra, además de la integración de una capa testing ya que no fue desarrollado para estos menesteres.

Tutorial de Cypress

Instalar

Empezamos instalando el cliente de Cypress. Solo deberás realizarla una sola vez en tu proyecto.

Nos situamos en la carpeta donde trabajamos.

cd [ruta de mi proyecto]

Instalamos el cliente de Cypress.

npm install cypress --save-dev

A continuación abrimos el entorno visual.

./node_modules/cypress/bin/cypress open

Aparecerá una ventana con todos los controles.

Nuestro primer testing

Para atisbar ligeramente sus posibilidades vamos a marcarnos unos objetivos sencillos:

1. Ir a la página oficial de Emacs.
2. Comprobar si existe el título con el texto ‘GNU Emacs’.
3. Pulsar en el botón de Features (características).
4. Contar que existan 6 características.

Si todo se ajusta a lo descrito, tendremos un bonito cartel verde. Es caso de estar caído o no encontrara el texto que buscamos, nos alertaría de diferentes formas (casi todas en rojo). Entre ellas vereoms un texto, una captura de pantalla y un vídeo. ¡Lo cual es impresionante! Y con plugins podemos enviar mensajes a Slack u otras plataformas para informar al equipo. ¿Tienes ganas de probarlo? ¡Vamos!

Dentro de la carpeta cypress/integration crea un archivo llamado inicio.js con el siguiente contenido. (a la misma altura que examples).

describe('General', function() {
      it('Inicio', function() {
          cy.visit('https://www.gnu.org/software/emacs/');
          cy.get('h1').contains('GNU Emacs')
          cy.get('.main a[href$="#features"]').click()
          cy.get('.features li').should('have.length', 6)
      })
})

Guardamos.

Dentro de la ventana Cypress, en la pestaña de Tests, observarás que al final de la lista ha aparecido nuestro archivo.

Pulsamos sobre él. Automáticamente se abrirá un Chrome/Chromium embebido que hará todas nuestras instrucciones a velocidad del rayo.

Si todo esta verde estaremos de celebración: ¡El sitio ha superado nuestro test!

Y con esto ya puedes manipularlo para cualquier sitio o web que quieras.

Otras comprobaciones interesantes

Buscar un texto dentro de una etiqueta.

Si tuvieramos por ejemplo.

<h1 class="titulo">Bienvenido</h1>

Con Cypress podríamos buscar como si fuera un selector de CSS.

cy.get('h1.titulo').contains('Bienvenido')

Contar elementos

Contamos si existen 12 etiquetas li.

cy.get('li').should('have.length', 12)

Rellena un formulario y lo envia

cy.get('section#contact #input-name').type('Julio Testing el probador')
cy.get('section#contact #input-email').type('testing@prueba.com')
cy.get('section#contact #input-company').type('Testing de cypress')
cy.get('section#contact #input-message').type('Se cree ampliamente que la historia de Lorem Ipsum se origina con Cicerón en el siglo I aC y su texto De Finibus bonorum et malorum. Esta obra filosófica, también conocida como En los extremos del bien y del mal, se dividió en cinco libros.')
cy.get('section#contact .disclaimer [type="checkbox"]').click({force: true})
cy.get('section#contact input[type="submit"]').click()

Pulsa un botón, espera 5 segundos y luego comprueba si tiene la clase ‘success’

cy.get('section#contact button[type="button"]').click().wait(5000).should('have.class', 'btn__success')

4-1 4-2

¿Me ayudas?

No te sientas obligado a realizar una donación, pero cada aportación mantiene el sitio en activo logrando que continúe existiendo y sea accesible para otras personas. Además me motiva a crear nuevo contenido.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Publicar ¡Publicado! ¡Ups! Algo ha fallado, ¿Reintentamos? Enviando...

Escribe el primer comentario