No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Hooks

10/23
Recursos

¿Cómo optimizar nuestro código con hooks en nuestras pruebas?

La programación efectiva es un arte en el que cada línea de código cuenta. En el dinámico mundo del desarrollo de software, uno de los principios más esenciales es "Don't Repeat Yourself" (No te repitas a ti mismo). En este contexto, optimizar el código, especialmente en las pruebas, es fundamental. En esta guía aprenderás a utilizar "hooks", mecanismos de control que permiten ejecutar ciertas acciones antes o después de acciones clave, como las pruebas ejecutadas en un ambiente automatizado.

¿Qué son los hooks y cómo pueden mejorar nuestras pruebas?

Los hooks, que en inglés significa literalmente "ganchos", son bloques de código que se ejecutan en puntos específicos de tu suite de pruebas. Estos se dividen principalmente en before, beforeEach, after, y afterEach. Estos hooks permiten ejecutar acciones sin que se repitan innecesariamente en cada prueba, optimizando así el flujo y rendimiento del código.

Implementación básica de hooks

  • before: Se ejecuta antes de todas las pruebas en una suite. Es útil para configurar el entorno necesario para que todas las pruebas comiencen en un estado conocido. Por ejemplo, abrir una página web antes de realizar cualquier test.
before(() => {
  // acción a ejecutar antes de toda la suite de pruebas
  cy.visit('http://mi-pagina-web.com');
});
  • beforeEach: Corre antes de cada prueba individual en tu suite. Ideal para realizar configuraciones que deben asegurarse de estar listas antes de cada test, como iniciar sesión en la aplicación.
beforeEach(() => {
  // acción ejecutada antes de cada prueba
  cy.log('Comenzando un nuevo test');
});
  • after: Se ejecuta una vez que todas las pruebas de la suite han concluido. Esto puede usarse para tareas de limpieza o para devolver el entorno a su estado inicial.
after(() => {
  // acción a ejecutar después de toda la suite de pruebas
  cy.log('Todas las pruebas han terminado');
});
  • afterEach: Corre después de cada prueba individual, útil para tareas de limpieza como cerrar sesiones o restaurar configuraciones.
afterEach(() => {
  // acción ejecutada después de cada prueba
  cy.log('Test finalizado');
});

¿Cómo utilizar los hooks dentro y fuera de 'describe'?

La flexibilidad de los hooks permite usarlos tanto dentro como fuera de los bloques describe. Esto ayuda a que el código sea más modular y fácil de gestionar.

  • Dentro de describe: Al usarlos aquí, los hooks se aplicarán a todos los tests escritos dentro del mismo bloque describe.
describe('Grupo de pruebas', () => {
  before(() => {
    cy.visit('http://otra-pagina.com');
  });

  it('Prueba 1', () => {
    cy.log('Ejecutando Prueba 1');
  });

  it('Prueba 2', () => {
    cy.log('Ejecutando Prueba 2');
  });
});
  • Fuera de describe: Permite configurar un ambiente global para varias suites de pruebas.
before(() => {
  cy.log('Configurando ambiente global');
});

describe('Grupo de pruebas 1', () => {
  it('Prueba de grupo 1', () => {
    cy.log('Prueba dentro del grupo 1');
  });
});

describe('Grupo de pruebas 2', () => {
  it('Prueba de grupo 2', () => {
    cy.log('Prueba dentro del grupo 2');
  });
});

¿Cuándo y por qué deberías usar hooks?

Los hooks no solo facilitan la escritura de pruebas más concisas, sino que también promueven el mantenimiento del código y la reutilización de configuraciones comunes. Al definir configuraciones globales y específicas para cada prueba, se maximiza la eficiencia de las pruebas automatizadas.

  • Reducción de Repetición de Código: Evita escribir las mismas configuraciones en cada prueba.
  • Claridad y Modularidad: Hace que las pruebas sean más fáciles de leer y entender.
  • Eficiencia y Rendimiento: Al ejecutarse solo cuando es necesario, mejora el rendimiento global de las pruebas.

En resumen, los hooks son una herramienta poderosa en el arsenal de cualquier desarrollador para optimizar las pruebas automatizadas. Experimenta con estas recomendaciones y adapta los hooks a tus necesidades específicas, y verás cómo tu suite de pruebas se vuelve más eficiente y manejable. ¡Sigue aprendiendo y perfeccionando tus habilidades para convertirte en un mejor desarrollador cada día!

Aportes 5

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Hooks

📚 Documentación
Como lo indica la documentación de Cypress, los hooks son proveedores que permiten, mediante condicionales, realizar operaciones antes before / después after de un conjunto de pruebas o antes de beforeEach/ después afterEach prueba.
.
La versatilidad de su uso es, como bien lo indica el instructor, para encapsular bloques operativos como pipelines o flujos de trabajo.
.
Recordemos que Cypress es un framework que opera en diferentes capas, unitarias / integración E2E, que se puede complementar con librerías como Testing Library / Jest, por lo que dependiendo de su intención, podríamos atacar con mayor certeza casos de uso o requerimientos.

before(() => {
  // root-level hook
  // runs once before all tests
})

beforeEach(() => {
  // root-level hook
  // runs before every test block
})

afterEach(() => {
  // runs after each test block
})

after(() => {
  // runs once all tests are done
})

describe('Hooks', () => {
  before(() => {
    // runs once before all tests in the block
  })

  beforeEach(() => {
    // runs before each test in the block
  })

  afterEach(() => {
    // runs after each test in the block
  })

  after(() => {
    // runs once after all tests in the block
  })
})
my codigo ```js Cypress.on('uncaught:exception', (err, runnable) => { // Registrar el error en la consola console.error('Excepción no capturada', err); // Devolver false aquí previene que Cypress falle la prueba return false; }); // before(() => { // //solo si se quiere correr antes de los dos bloques // cy.visit('/automation-practice-form') // }) describe("Aserciones", () => { beforeEach(()=>{ //con beforeEach lo repite las veces que sea necesario cy.visit('/automation-practice-form') }) after(()=>{ cy.visit("/") }) it('Asercion', () => { //cy.visit('/automation-practice-form') cy.url().should("include", "demoqa.com") cy.get("#firstName").should("be.visible").and("have.attr", "placeholder", "First Name") }); it('Asercion 2', () => { //cy.visit('/automation-practice-form') cy.url().should("include", "demoqa.com") cy.get("#firstName").then((element)=>{ expect(element).to.be.visible expect(element).to.have.attr("placeholder", "First Name") }) }); it('Asercion 3', () => { //cy.visit('/automation-practice-form') cy.url().should("include", "demoqa.com") cy.get("#firstName").then((element)=>{ assert.equal(element.attr("placeholder"),"First Name") }) }) }); ```Cypress.on('uncaught:exception', (err, runnable) => {    // Registrar el error en la consola    console.error('Excepción no capturada', err);        // Devolver false aquí previene que Cypress falle la prueba    return false;  });   // before(() => {//  //solo si se quiere correr antes de los dos bloques//  cy.visit('/automation-practice-form')// }) describe("Aserciones", () => {    beforeEach(()=>{ //con beforeEach lo repite las veces que sea necesario        cy.visit('/automation-practice-form')    })     after(()=>{        cy.visit("/")    })     it('Asercion', () => {        //cy.visit('/automation-practice-form')        cy.url().should("include", "demoqa.com")        cy.get("#firstName").should("be.visible").and("have.attr", "placeholder", "First Name")    });     it('Asercion 2', () => {        //cy.visit('/automation-practice-form')        cy.url().should("include", "demoqa.com")        cy.get("#firstName").then((element)=>{            expect(element).to.be.visible            expect(element).to.have.attr("placeholder", "First Name")    })});     it('Asercion 3', () => {        //cy.visit('/automation-practice-form')        cy.url().should("include", "demoqa.com")        cy.get("#firstName").then((element)=>{            assert.equal(element.attr("placeholder"),"First Name")    })}) });
Probablemente al hacer lo que se comenta en la clase o incluso desde clases pasadas les ocurre lo siguiente![](file:///home/daniel/Downloads/2024-03-28_21-06.png) ![]()![](/home/daniel/Downloads/2024-03-28_21-06.png)![](file:///home/daniel/Downloads/2024-03-28_21-06.png)![]()Un mensaje en rojo que dice (uncaught exception)TypeError: c(...).setup is not a function Esto ocurre en demoqa, y pues, es un problema de la página, e interrumpe todas tus pruebas del curso, y más si usas el Before que recomienda el profe, si les ocurre, les recomiendo leer el error de abajo donde les da un link a lo siguiente <https://docs.cypress.io/guides/references/error-messages#Uncaught-exceptions-from-your-application> Y eso te lleva a esto <https://docs.cypress.io/api/cypress-api/catalog-of-events#Uncaught-Exceptions> Y luego a esto <https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests#Support-file> En resumen, luego de leer, vi que se puede agregar este código a `cypress/support/e2e.js` y con eso te quitas de problemas de estar manejando ese error ```js Cypress.on('uncaught:exception', (err, runnable) => { // we expect a 3rd party library error with message 'list not defined' // and don't want to fail the test so we return false if (err.message.includes('setup is not a function')) { return false } // we still want to ensure there are no other unexpected // errors, so we let them fail the test }) ```y de paso aprendes que se puede hacer eso.

Me genera el siguiente error en el 2do y 3er Assertion

/// <reference types="cypress" />

describe('Assertions', () => {
	before(() => {
		cy.visit('/automation-practice-form')
	})

	it('Assert 1', () => {
		// cy.visit('/automation-practice-form')
		cy.url().should('include', 'demoqa.com')
		cy.get('#firstName')
			.should('be.visible')
			.and('have.attr', 'placeholder', 'First Name')
	})

	it('Assert 2', () => {
		// cy.visit('/automation-practice-form')
		cy.url().should('include', 'demoqa.com')
		cy.get('#firstName').then((element) => {
			expect(element).to.be.visible
			expect(element).to.have.attr('placeholder', 'First Name')
		})
	})

	it('Assert 3', () => {
		// cy.visit('/automation-practice-form')
		cy.url().should('include', 'demoqa.com')
		cy.get('#firstName').then((element) => {
			assert(element.attr('placeholder', 'Firts Name'))
		})
	})
})

![](

Lo usé antes de comenzar el describe, dentro del describe y luego al salir del describe.