Configurar Cypress en Vue para Screenshots y Reportes

1. Instalar Cypress

npm install cypress --save-dev
# o
yarn add cypress --dev

Iniciar Cypress para generar la estructura inicial:

npx cypress open

---

2. Configuración básica (cypress.config.js)

const { defineConfig } = require('cypress');

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // Configuración de plugins
    },
    screenshotOnRunFailure: true, // Habilita screenshots en fallos
    videos: false, // Opcional: desactiva videos
  },
});

---

3. Generar Screenshots

• Automáticos: Se guardan en cypress/screenshots/ al fallar pruebas.
• Manuales: Usa en tus pruebas:

cy.screenshot('nombre-del-screenshot');

---

4. Generar Reportes

Opción A: Mochawesome (HTML interactivo)

npm install mochawesome mochawesome-merge mochawesome-report-generator --save-dev

Configuración en cypress.config.js:

module.exports = defineConfig({
  reporter: 'mochawesome',
  reporterOptions: {
    reportDir: 'cypress/reports',
    overwrite: false,
    html: true,
    json: true,
  },
});

Ejecutar pruebas:

npx cypress run --reporter mochawesome

Opción B: Cypress Dashboard (nube)

npx cypress run --record --key <tu-api-key>

---

5. Ejemplo de Prueba (cypress/e2e/example.cy.js)

describe('Mi App Vue', () => {
  it('Carga la página principal', () => {
    cy.visit('http://localhost:8080');
    cy.contains('Bienvenido');
    cy.screenshot('homepage');
  });
});

5.1 Ejemplo de Test Login (cypress/e2e/loginAsUser.cy.js)

describe('Login As User', () => {
    it('debería ingresar correctamente con credenciales válidas', () => {
      cy.visit('http://localhost:5173/login')
      cy.screenshot('01-pantalla-login-inicial')
      cy.get('input[name=email]').type('[email protected]')
      cy.get('input[name=password]').type('thalita123')
      cy.screenshot('02-credenciales-ingresadas')
      cy.get('button[type=submit]').click()
      cy.url().should('include', '/dashboard')
      cy.screenshot('03-redireccion-dashboard')
    })
  })
  

---

6. Comandos Útiles

Comando	Descripción
npx cypress open	Ejecuta pruebas en modo interactivo
npx cypress run	Ejecuta en modo headless (CI)
npx cypress run --reporter mochawesome	Genera reporte HTML

---

Estructura de Carpetas

cypress/
  ├── e2e/                # Pruebas
  ├── screenshots/        # Capturas
  ├── videos/             # Videos (opcional)
  ├── reports/            # Reportes Mochawesome