Saltar al contenido principal

Recursos Adicionales

📚 Documentación Oficial​

Cypress Core​

Guías Específicas​

🎓 Tutoriales y Cursos​

Cursos Gratuitos​

Tutoriales Escritos​

🔌 Plugins Esenciales​

Testing Library Integration​

npm install --save-dev @testing-library/cypress

Uso: Queries semánticas basadas en accesibilidad

cy.findByRole('button', { name: /submit/i });
cy.findByLabelText('Email');
cy.findByText('Welcome');

Accessibility Testing​

npm install --save-dev cypress-axe axe-core

Uso: Auditorías automáticas de accesibilidad

cy.injectAxe();
cy.checkA11y();

File Upload​

npm install --save-dev cypress-file-upload

Uso: Upload de archivos en tests

cy.get('input[type="file"]').attachFile('example.json');

Visual Regression​

npm install --save-dev cypress-image-snapshot

Uso: Comparación visual de screenshots

cy.matchImageSnapshot('homepage');

Code Coverage​

npm install --save-dev @cypress/code-coverage

Uso: Medir cobertura de tests E2E

IFrame Testing​

npm install --save-dev cypress-iframe

Uso: Trabajar con iframes fácilmente

cy.frameLoaded();
cy.iframe().find('button').click();

🛠️ Herramientas y Servicios​

Cypress Dashboard​

Cypress Dashboard

  • Grabación de tests en cloud
  • Analytics y reportes
  • Paralelización de tests
  • Integración con GitHub/GitLab
  • Screenshots y videos automáticos

Planes: Gratis hasta 500 tests/mes, luego pago

Percy (Visual Testing)​

Percy.io

  • Visual regression testing
  • Comparación de screenshots
  • Integración con Cypress
  • Detección automática de cambios visuales
npm install --save-dev @percy/cypress
cy.percySnapshot('Homepage');

Sorry Cypress (Open Source Dashboard)​

Sorry Cypress

  • Dashboard open source
  • Auto-hospedado (Docker)
  • Alternativa gratis a Cypress Dashboard
  • Paralelización
  • Reportes y analytics

Cypress Studio​

Built-in en Cypress 6+

  • Grabación visual de tests
  • Genera código automáticamente
  • Ideal para prototipar tests rápido
// cypress.config.ts
export default defineConfig({
  e2e: {
    experimentalStudio: true,
  },
});

📖 Libros y Recursos Avanzados​

Libros​

  • "End-to-End Web Testing with Cypress" por Wawrzyniec Jasinski
  • "Cypress End-to-End Testing" por Marcos Mendes
  • "Testing JavaScript Applications" por Lucas da Costa (incluye Cypress)

Blogs y Newsletters​

Comunidad​

🎥 Videos y Conferencias​

Canales de YouTube​

Conferencias Destacadas​

  • AssertJS - Conferencia anual de Cypress
  • TestJS Summit - Testing en JavaScript
  • Cypress Component Testing - Webinars oficiales

🔍 Recursos por Tema​

CI/CD Integration​

Component Testing​

API Testing​

Performance Testing​

Security Testing​

🚀 Ejemplos de Proyectos Reales​

Open Source Apps con Cypress​

  1. Cypress RealWorld App

    • App bancaria completa (React + Express)
    • Tests E2E exhaustivos
    • Mejor recurso para aprender

  2. Conduit (RealWorld)

    • Clone de Medium
    • Múltiples implementaciones con Cypress

  3. TodoMVC

    • Clásico TodoMVC con tests Cypress

  4. Kitchen Sink

    • Showcase de todos los comandos de Cypress

Templates de Proyectos​

📊 Comparativas y Alternativas​

Cypress vs Otras Herramientas​

🆘 Debugging y Troubleshooting​

Recursos de Debugging​

Tools de Debugging​

// Pause test
cy.pause();

// Debug command
cy.get('[data-testid="user"]').debug();

// Log custom message
cy.log('✅ User logged in');

// Inspect variable
cy.get('[data-testid="price"]').then(($el) => {
  debugger; // Chrome DevTools breakpoint
  console.log($el.text());
});

🎯 Próxima Sesión​

Sesión 4: Seguridad y Desarrollo Seguro​

En la próxima sesión aprenderás:

  • 🔐 OWASP Top 10 - Vulnerabilidades más críticas
  • 🛡️ XSS, CSRF, SQL Injection - Ataques comunes y prevención
  • 🔒 Helmet.js - Headers de seguridad en Express
  • 🔑 JWT Security - Mejores prácticas de autenticación
  • 🔍 npm audit - Auditoría de dependencias
  • 🧪 Security Testing - Testing de seguridad automatizado

Recursos preparatorios:

✅ Checklist de Dominio​

Antes de avanzar, asegúrate de poder:

  • Instalar y configurar Cypress desde cero
  • Escribir tests E2E básicos con assertions
  • Usar selectores estables (data-testid)
  • Navegar el DOM con comandos de traversal
  • Interceptar y mockear requests HTTP
  • Crear custom commands reutilizables
  • Aplicar best practices de testing E2E
  • Debuggear tests con time-travel y screenshots
  • Configurar Cypress para CI/CD
  • Organizar suites de tests escalables

¡Felicidades! 🎉 Has completado el módulo de Testing E2E con Cypress. Ahora tienes las habilidades para crear tests robustos que validan el comportamiento completo de tus aplicaciones desde la perspectiva del usuario.

Continúa practicando con el ejercicio integrador y explora los recursos adicionales para profundizar tus conocimientos.

Siguiente Paso

Avanza a la Sesión 4: Seguridad para aprender sobre desarrollo seguro y protección contra vulnerabilidades comunes.