Apuntes del Curso de End to End Testing con Cypress

<h1>Curso de End to End Testing con Cypress</h1> <h3>Testing</h3>

Es un proceso, un método de trabajo, una herramienta, que se utiliza para identificar fallas en el software o producto con el fin de que este alcance un grado aceptable de madurez y estabilidad antes de ser lanzado.

<h3>Según la Pirámide de testing, existen varios niveles:</h3>

• 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 en este nivel de pruebas en el que nos enfocaremos en este curso. Es el testing más elaborado que existe, porque depende de los demás niveles.

<h3>Cypress</h3>

Herramienta o framework, que nos permite simular esa interacción. Ha sido producto de una evolución a partir de conceptos y frameworks anteriores como: Selenium, PhantomJS, Nightwatch y Puppeteer.

Comandos para controlar el browser
cy.visit(): para cargar una URL
cy.reload(): para recargar la URL actual
cy.go(‘back’): para ir hacia atrás o adelante en la navegación
Comandos para selección de elementos
cy.get(’.selector’): para seleccionar según un selector html / css
cy.contains(‘text): para seleccionar de acuerdo al contenido
cy.contains(’.selector’, ‘texto’): para seleccionar según el selector y el contenido
Comandos para interactuar con los elementos
cy.get(’.selector’).click(): para hacer click sobre un elemento
cy.get(’.selector’).dblclick(): para hacer dblclick sobre un elemento
cy.get(‘input’).type(): para escribir un texto
cy.get(‘input’).clear(): para limpiar un texto
cy.get(‘checkbox’).check(): para marcar check
cy.get(‘checkbox’).uncheck(): para quitar el check
cy.get(‘select’).select(‘item’): para seleccionar un item en una lista desplegable

<h3>Aserciones</h3>

Una aserción es lo que nos permite comprobar si el test está bien o no. Mientras no se hayan definido aserciones para nuestros tests, todos van a pasar como válidos.

//chaiJS: web de aserciones qué podemos usar el cypress

###Hooks
Los Hooks son funciones o métodos que se ejecutan en determinados momentos del flujo de ejecución de los tests.
Los que usaremos en nuestro proyecto son:

• before(): es una función que se ejecuta una vez antes de la ejecución de todos los tests del mismo grupo.
• beforeEach(): es una función que se ejecuta antes de cada test individual.
• afterEach(): es una función que se ejecuta después de cada test individual.
• after(): es una función que se ejecuta una vez, al finalizar la ejecución de todos los tests del mismo grupo.

Variables, Fixtures y Alias
Los fixtures son estructuras u objetos JSON definidos en archivos individuales que se pueden reutilizar en cualquier momento de la secuencia de ejecución de los tests. Para poder hacer referencia a ellos posteriormente es necesario asignarles un alias.
La forma de incorporar un fixture en cada uno de los tests, sería incorporándolo en el Hook beforeEach() de la manera siguiente:
cy.fixture(<archivo.json>).as(<alias>)
y para poder hacer uso de éste, se le debe asignar un alias:
cy.get('@alias').then( ( var ) => { // ---- en este ámbito ya se puede usar como una variable más ... cy.get('input').type( var ) ... })
Al usar el símbolo “”@"" en el selector, se hace referencia a una variable (fixture) y no a un elemento de la interfaz.

<h3>Stubs, Spies y Clocks</h3>

• Stubs: proporciona una manera programática de simular, sustituir o tomar control del comportamiento esperado de funciones o eventos que suceden en la interfaz de nuestra aplicación.
• Spies: permiten intervenir en los llamados a funciones para determinar si fueron llamadas durante la ejecución del testing y qué parámetros recibieron en esa llamada.
• Clocks: proporciona una forma de alterar programáticamente la hora y fecha del entorno durante la ejecución del testing.

<h3>Depuración de tests</h3>

• debugger que detiene la ejecución del código y permite el acceso a la consola de inspección tanto en el código de los tests como de la aplicación que estamos probando.
• .debug() que es una función encadenable a cualquier otra función de Cypress, y que al igual que debugger, permite la depuración del código durante la ejecución de un flujo de pruebas.

<h3>Testing condicional</h3>

Es aquel en el que las pruebas están sujetas a valores o condiciones de la interfaz que no son inmutables, textos o contenidos de elementos del DOM, fecha y hora, entre otros. Es una práctica que se debe evitar en la mayoría de los casos, ya que puede conducir a resultados inconsistentes también conocidos como flaky tests en los que, para configuraciones y estados constantes, se obtienen resultados distintos e impredecibles.

//configurar intellisense = https://docs.cypress.io/guides/tooling/intelligent-code-completion.html