Hooks

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 ![]()![]()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.