El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Pruebas de Extremo a Extremo

Siguiente ►
►

Las pruebas de extremo a extremo (E2E) son un tipo de prueba que simula el comportamiento del usuario en una aplicación para asegurarse de que todas las partes del sistema funcionen correctamente juntas. En Angular, Protractor es una herramienta popular para realizar pruebas E2E.

¿Qué es Protractor?

Protractor es un framework de pruebas E2E para aplicaciones Angular y AngularJS. Protractor se ejecuta sobre Selenium WebDriver, lo que le permite interactuar con la aplicación de la misma manera que lo haría un usuario real.

Características de Protractor:

  • Automatización de Navegadores: Protractor puede controlar navegadores como Chrome, Firefox, y más.
  • Sincronización Automática: Protractor se sincroniza automáticamente con la aplicación Angular, lo que facilita la escritura de pruebas.
  • Soporte para Jasmine: Protractor utiliza Jasmine, un framework de pruebas de JavaScript, para definir y estructurar las pruebas.

Configuración de Protractor

Paso 1: Instalación de Protractor

Primero, necesitas instalar Protractor y WebDriver Manager. Puedes hacerlo usando npm:

npm install -g protractor
npm install -g webdriver-manager

Paso 2: Actualización de WebDriver Manager

Después de instalar Protractor, necesitas actualizar WebDriver Manager para descargar los binarios necesarios:

webdriver-manager update

Paso 3: Configuración del Archivo de Configuración de Protractor

Crea un archivo de configuración protractor.conf.js en la raíz de tu proyecto:

exports.config = {
  directConnect: true,
  framework: 'jasmine',
  specs: ['e2e/**/*.e2e-spec.js'],
  capabilities: {
    'browserName': 'chrome'
  },
  onPrepare: function() {
    browser.ignoreSynchronization = false;
  }
};

Paso 4: Estructura de Archivos de Pruebas

Crea una carpeta e2e en la raíz de tu proyecto y dentro de ella, crea un archivo de prueba, por ejemplo, app.e2e-spec.js:

describe('Pruebas de Extremo a Extremo', function() {
  it('debería tener un título', function() {
    browser.get('http://localhost:4200');
    expect(browser.getTitle()).toEqual('Mi Aplicación Angular');
  });
});

Ejecución de Pruebas E2E

Para ejecutar las pruebas E2E, primero asegúrate de que tu aplicación Angular esté en ejecución:

ng serve

Luego, en otra terminal, ejecuta Protractor:

protractor protractor.conf.js

Ejemplo Práctico

Vamos a crear una prueba E2E que verifique que un usuario puede navegar a una página de detalles de un producto.

Paso 1: Crear la Aplicación Angular

Supongamos que ya tienes una aplicación Angular con una lista de productos y una página de detalles de producto.

Paso 2: Crear la Prueba E2E

En el archivo e2e/app.e2e-spec.js, agrega la siguiente prueba:

describe('Pruebas de Extremo a Extremo', function() {
  it('debería navegar a la página de detalles del producto', function() {
    browser.get('http://localhost:4200/products');
    
    // Encuentra el primer producto en la lista y haz clic en él
    element(by.css('.product-item:first-child .details-link')).click();
    
    // Verifica que la URL cambió a la página de detalles del producto
    expect(browser.getCurrentUrl()).toContain('/products/1');
    
    // Verifica que el título de la página de detalles es correcto
    let productTitle = element(by.css('.product-title')).getText();
    expect(productTitle).toEqual('Producto 1');
  });
});

Explicación del Código

  • browser.get('http://localhost:4200/products'): Navega a la página de productos.
  • element(by.css('.product-item:first-child .details-link')).click(): Encuentra el primer producto en la lista y haz clic en el enlace de detalles.
  • expect(browser.getCurrentUrl()).toContain('/products/1'): Verifica que la URL cambió a la página de detalles del producto.
  • let productTitle = element(by.css('.product-title')).getText(): Obtiene el texto del título del producto.
  • expect(productTitle).toEqual('Producto 1'): Verifica que el título del producto es correcto.

Errores Comunes y Consejos

Errores Comunes

  1. Problemas de Sincronización: Asegúrate de que browser.ignoreSynchronization esté configurado correctamente.
  2. Elementos No Encontrados: Verifica que los selectores CSS sean correctos y que los elementos existan en el DOM.

Consejos

  • Usa browser.sleep() con Moderación: Evita usar browser.sleep() para esperar a que los elementos se carguen. En su lugar, usa browser.wait() con condiciones explícitas.
  • Organiza tus Pruebas: Mantén tus pruebas organizadas en diferentes archivos y carpetas según las funcionalidades que estás probando.

Conclusión

Las pruebas de extremo a extremo son esenciales para garantizar que tu aplicación Angular funcione correctamente desde la perspectiva del usuario. Protractor es una herramienta poderosa que facilita la escritura y ejecución de estas pruebas. Con la configuración adecuada y buenas prácticas, puedes asegurarte de que tu aplicación sea robusta y libre de errores.

En el siguiente módulo, exploraremos temas avanzados en Angular, como Angular Universal y la optimización del rendimiento. ¡Sigue adelante y sigue aprendiendo!

◄ Anterior
◄
Siguiente ►
►

Curso de Angular 2+

Módulo 1: Introducción a Angular

Módulo 2: Conceptos Básicos de TypeScript

Módulo 3: Componentes y Plantillas

Módulo 4: Directivas y Pipes

Módulo 5: Servicios e Inyección de Dependencias

Módulo 6: Enrutamiento y Navegación

Módulo 7: Formularios en Angular

Módulo 8: Cliente HTTP y Observables

Módulo 9: Gestión de Estado

Módulo 10: Pruebas en Angular

Módulo 11: Temas Avanzados

Módulo 12: Despliegue y Mejores Prácticas

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados