El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Proves de punta a punta

Següent ►
►

Les proves de punta a punta (E2E) són un tipus de prova que valida el funcionament complet d'una aplicació des del principi fins al final. Aquestes proves simulen el comportament real de l'usuari per assegurar-se que totes les parts del sistema funcionen correctament quan es combinen. En el context d'Angular, les proves E2E es realitzen habitualment amb Protractor, un framework de proves E2E per a aplicacions Angular.

Objectius del tema

  • Entendre què són les proves de punta a punta.
  • Configurar Protractor per a proves E2E en una aplicació Angular.
  • Escriure i executar proves E2E bàsiques.
  • Comprendre els conceptes clau de Protractor i Selenium WebDriver.

  1. Què són les proves de punta a punta?

Les proves de punta a punta tenen com a objectiu:

  • Verificar que totes les parts d'una aplicació funcionen correctament quan es combinen.
  • Simular el comportament real de l'usuari.
  • Detectar problemes d'integració entre diferents components del sistema.

  1. Configuració de Protractor

Instal·lació de Protractor

Per començar a utilitzar Protractor, primer cal instal·lar-lo. Pots fer-ho utilitzant npm:

npm install -g protractor

Després de la instal·lació, actualitza WebDriver:

webdriver-manager update

Configuració del fitxer protractor.conf.js

El fitxer de configuració de Protractor (protractor.conf.js) defineix com es realitzaran les proves. Aquí tens un exemple bàsic:

exports.config = {
  directConnect: true,
  framework: 'jasmine',
  specs: ['e2e/**/*.e2e-spec.ts'],
  capabilities: {
    'browserName': 'chrome'
  },
  onPrepare: () => {
    require('ts-node').register({
      project: 'e2e/tsconfig.e2e.json'
    });
  }
};

Configuració de tsconfig.e2e.json

Crea un fitxer tsconfig.e2e.json per configurar TypeScript per a les proves E2E:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/e2e",
    "module": "commonjs",
    "target": "es5",
    "types": ["jasmine", "node"]
  },
  "include": [
    "**/*.ts"
  ]
}

  1. Escriure i executar proves E2E bàsiques

Exemple de prova E2E

Crea un fitxer de prova E2E, per exemple e2e/app.e2e-spec.ts:

import { browser, by, element } from 'protractor';

describe('Prova E2E de l\'aplicació Angular', () => {
  it('hauria de mostrar el títol correcte', () => {
    browser.get('/');
    expect(element(by.css('app-root h1')).getText()).toEqual('Benvingut a la meva aplicació Angular!');
  });
});

Executar les proves E2E

Per executar les proves E2E, utilitza el següent comandament:

ng e2e

  1. Conceptes clau de Protractor i Selenium WebDriver

Protractor

Protractor és un framework de proves E2E per a aplicacions Angular i AngularJS. Està construït sobre Selenium WebDriver i proporciona funcionalitats addicionals per treballar amb aplicacions Angular.

Selenium WebDriver

Selenium WebDriver és una eina per automatitzar navegadors web. Proporciona una API per controlar el navegador i interactuar amb elements de la pàgina.

Elements clau de Protractor

  • browser: Objecte global que representa el navegador.
  • element: Funció per seleccionar elements de la pàgina.
  • by: Objecte que proporciona mètodes per localitzar elements (per exemple, by.css, by.id).

Exercici pràctic

Exercici

Crea una prova E2E que verifiqui que un botó amb el text "Enviar" està present a la pàgina principal de l'aplicació.

Solució

import { browser, by, element } from 'protractor';

describe('Prova E2E de l\'aplicació Angular', () => {
  it('hauria de mostrar un botó amb el text "Enviar"', () => {
    browser.get('/');
    expect(element(by.buttonText('Enviar')).isPresent()).toBe(true);
  });
});

Errors comuns i consells

  • Error: NoSuchElementError: Assegura't que l'element que estàs intentant seleccionar existeix a la pàgina i que el selector és correcte.
  • Error: TimeoutError: Pot ser causat per una espera insuficient. Utilitza browser.wait per esperar que un element estigui present o visible.

Conclusió

Les proves de punta a punta són essencials per assegurar-se que totes les parts d'una aplicació funcionen correctament quan es combinen. Protractor és una eina poderosa per realitzar aquestes proves en aplicacions Angular. Amb la configuració adequada i una comprensió dels conceptes clau, pots escriure i executar proves E2E efectives per garantir la qualitat de la teva aplicació.

◄ Anterior
◄
Següent ►
►

Curs d'Angular 2+

Mòdul 1: Introducció a Angular

Mòdul 2: Conceptes bàsics de TypeScript

Mòdul 3: Components i plantilles

Mòdul 4: Directives i pipes

Mòdul 5: Serveis i injecció de dependències

Mòdul 6: Enrutament i navegació

Mòdul 7: Formularis en Angular

Mòdul 8: Client HTTP i observables

Mòdul 9: Gestió d'estat

Mòdul 10: Proves en Angular

Mòdul 11: Temes avançats

Mòdul 12: Desplegament i millors pràctiques

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats