¿Qué son las pruebas End to End y como llevarlas a cabo?

¿Qué es Testing?

Testing es un proceso, un método de trabajo y una herramienta que tiene como fin identificar defectos en el software, con el objetivo final de ayudar a alcanzar un grado aceptable de madurez y estabilidad de una aplicación.

Según la Pirámide de testing, existen varios niveles:

Unit Test o Pruebas Unitarias: permiten probar los elementos más fundamentales del software como objetos, funciones, eventos, etc.

Component Tests o Pruebas de Componentes: permiten identificar fallas en componentes que incluyen varias funciones o elementos internos.

Integration Tests o Pruebas de Integración: permiten probar el comportamiento y posibles fallas en la interacción entre los componentes entre sí, y demás elementos del software.

GUI Test o End-to-end Tests: nos permiten identificar fallas en la interfaz de usuario. Es el testing más elaborado que existe, porque depende de los demás niveles.

¿Qué es End to End testing?

Es una metodología de pruebas de software que consiste en probar una aplicación desde el punto de vista del usuario final. En este tipo de pruebas se prueban los flujos y procesos, por ejemplo: registro de usuario, login, agregar articulo al carrito, generar factura, etc.

¿Por qué utilizar End to End testing?

Aunque end to end testing no sustituye ninguna otra de las pruebas, como unit, components ó integration testing, esta metodología ofrece el punto de vista del usuario final.

Nos permite identificar errores en el interfaz del usuario.

¿Como hacer end to end testing?

Actualmente existen varias herramientas, como Selenium con Mocha y Chai, que nos pueden ayudar a este propósito. Sin embargo se recomienda utilizar Cypress ya que es un framework todo en uno que incluye todas las funcionalidades requeridas.

Prerrequisitos:

1. Conocimiento de javascript
2. Proyecto node

Antes de empezar con las pruebas end to end, necesitamos instalar Cypress en nuestro proyecto node con el siguiente comando:

npm install cypress --save-dev

Para que nos resulte más sencillo abrir la consola Cypress, agregamos el siguiente script a nuestro package.json:

"scripts": { "cypress-open": "cypress open --project ./tests"},

Donde “./tests” es la carpeta donde se guardaran las pruebas. Una vez ejecutemos el comando “npm run cypress-open” se abrirá la consola Cypress.

Si la primera vez que se ejecuta el comando, en la carpeta “tests”, se creará la carpeta “cypress” con varias pruebas de ejemplo en “tests/cypress/integration/examples”.

Nota: Para que las clases de Cypress sean reconocidas en los archivos js y tener intellisense es necesario crear el archivo “./tests/cypress/tsconfig.json” con el siguiente contenido:

{ "compilerOptions": { "allowJs": true, "baseUrl": "../node_modules", "types": [ "cypress" ] }, "include": [ "**/*.*" ]}

Para crear nuestras pruebas debemos de crear un archivo javascript en la carpeta “./tests/cypress/integration”.

Ejemplo básico

En esta publicación tratare de mostrar como hacer pruebas end to end básicas en www.google.com:

1. Primeramente configuramos el archivo el archivo “./tests/cypress.json” con el siguiente contenido:

{ "baseUrl": "http://www.google.com"}

2. Después creamos el archivo para las pruebas “./tests/cypress/integration/google.spec.js”.

3. Enseguida, lo que haremos será describir la prueba con el método describe:

describe('Pruebas básicas de google', () => {});

4. La primera prueba será una bastante sencilla, para ello utilizaremos el método it, visitaremos la pagina de www.google.com y validaremos que se haga correctamente:

describe('Pruebas básicas de google', () => { it('Visitar google.com', () => { cy.visit('/'); cy.wait(3000); cy.url().should('match', /www.google.com/i); }); });

El resultado es que se visita la url de www.google.com, se espera 3 segundos y se valida que la url.

5. La siguiente prueba será validar que el logotipo, campo de búsqueda y los botones de búsqueda sean visibles:

describe('Pruebas básicas de google', () => { it.skip('Visitar google.com', () => { cy.visit('/'); cy.wait(3000); cy.url().should('match', /www.google.com/i); }); it('Componentes visibles', () => { cy.visit('/'); cy.wait(3000); cy.get('#hplogo').should('be.visible'); cy.get('input.gLFyf').should('be.visible'); cy.get('.FPdoLc > center > .gNO89b').should('be.visible'); cy.get('.FPdoLc > center > .RNmpXc').should('be.visible'); });});

El resultado es que visita la url de www.google.com, obtiene el logotipo y valida que sea visible, obtiene el campo de búsqueda y valida que sea visible, obtiene los botones de búsqueda y validan que sean visibles.

6. La siguiente prueba será validar la búsqueda:

describe('Pruebas básicas de google', () => { it.skip('Visitar google.com', () => { cy.visit('/'); cy.wait(3000); cy.url().should('match', /www.google.com/i); }); it.skip('Componentes visibles', () => { cy.visit('/'); cy.wait(3000); cy.get('#hplogo').should('be.visible'); cy.get('input.gLFyf').should('be.visible'); cy.get('.FPdoLc > center > .gNO89b').should('be.visible'); cy.get('.FPdoLc > center > .RNmpXc').should('be.visible'); }); it('Búsqueda', () => { cy.visit('/'); cy.wait(3000); cy.get('input.gLFyf').type('Cypress'); cy.get('.aajZCb > .tfB0Bf > center > .gNO89b').click(); cy.wait(3000); cy.get('.g .rc').should('have.length.greaterThan', 1); cy.get('.csb').should('have.length.greaterThan', 1); });});

Puedes encontrar este ejemplo básico en el siguiente proyecto git: https://github.com/anayarojo/cypress-google-test

Para profundizar más sobre el tipo de pruebas end to end y cómo implementarlas con Cypress puedes encontrar mas información en: https://www.cypress.io/

Deja tu comentario