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

Proves de punta a punta amb Cypress

Següent ►
►

Introducció

Les proves de punta a punta (E2E) són essencials per assegurar que l'aplicació funcioni correctament des de la perspectiva de l'usuari final. Cypress és una eina popular per a les proves E2E en aplicacions web, ja que proporciona una experiència de prova ràpida, fiable i fàcil d'utilitzar.

Objectius

En aquesta secció, aprendràs a:

  1. Configurar Cypress en un projecte React.
  2. Escriure i executar proves E2E bàsiques.
  3. Utilitzar les funcionalitats avançades de Cypress per millorar les teves proves.

Configuració de Cypress

Instal·lació

Per començar, necessitem instal·lar Cypress en el nostre projecte. Executa la següent comanda en el terminal dins del directori del teu projecte:

npm install cypress --save-dev

Inicialització

Després d'instal·lar Cypress, inicialitzem-lo executant:

npx cypress open

Aquesta comanda crearà una estructura de directoris per a Cypress i obrirà la interfície d'usuari de Cypress.

Estructura de directoris

Després d'inicialitzar Cypress, veuràs una estructura de directoris similar a aquesta:

cypress/
  ├── fixtures/
  ├── integration/
  ├── plugins/
  └── support/
cypress.json
  • fixtures/: Conté dades de prova que es poden utilitzar en les proves.
  • integration/: Conté els fitxers de prova E2E.
  • plugins/: Conté fitxers per a plugins personalitzats.
  • support/: Conté fitxers de suport globals per a les proves.

Escriure la primera prova E2E

Exemple de prova

Creem un fitxer de prova dins del directori integration/ anomenat example.spec.js:

describe('My First Test', () => {
  it('Visits the React App', () => {
    cy.visit('http://localhost:3000');
    cy.contains('Hello, World!');
  });
});

Explicació del codi

  • describe: Defineix un conjunt de proves.
  • it: Defineix una prova individual.
  • cy.visit: Navega a l'URL especificada.
  • cy.contains: Verifica que el text especificat estigui present a la pàgina.

Executar la prova

Per executar la prova, obre la interfície d'usuari de Cypress amb:

npx cypress open

A la interfície d'usuari, selecciona el fitxer example.spec.js per executar la prova.

Funcionalitats avançades de Cypress

Interacció amb elements

Cypress permet interactuar amb elements de la pàgina, com ara fer clic, escriure text, etc.

describe('Interacting with elements', () => {
  it('Fills and submits a form', () => {
    cy.visit('http://localhost:3000');
    cy.get('input[name="username"]').type('testuser');
    cy.get('input[name="password"]').type('password');
    cy.get('button[type="submit"]').click();
    cy.contains('Welcome, testuser!');
  });
});

Utilitzar fixtures

Les fixtures són dades de prova que es poden carregar i utilitzar en les proves.

describe('Using fixtures', () => {
  beforeEach(() => {
    cy.fixture('user').as('userData');
  });

  it('Logs in with fixture data', function() {
    cy.visit('http://localhost:3000');
    cy.get('input[name="username"]').type(this.userData.username);
    cy.get('input[name="password"]').type(this.userData.password);
    cy.get('button[type="submit"]').click();
    cy.contains(`Welcome, ${this.userData.username}!`);
  });
});

Proves de navegació

Cypress també permet verificar la navegació entre pàgines.

describe('Navigation', () => {
  it('Navigates to another page', () => {
    cy.visit('http://localhost:3000');
    cy.get('a[href="/about"]').click();
    cy.url().should('include', '/about');
    cy.contains('About Us');
  });
});

Exercicis pràctics

Exercici 1: Prova de formulari de registre

  1. Crea un formulari de registre en la teva aplicació React amb camps per a nom d'usuari, correu electrònic i contrasenya.
  2. Escriu una prova E2E amb Cypress que ompli el formulari i verifiqui que es mostri un missatge de confirmació després de l'enviament.

Solució

describe('Registration Form', () => {
  it('Registers a new user', () => {
    cy.visit('http://localhost:3000/register');
    cy.get('input[name="username"]').type('newuser');
    cy.get('input[name="email"]').type('[email protected]');
    cy.get('input[name="password"]').type('password');
    cy.get('button[type="submit"]').click();
    cy.contains('Registration successful!');
  });
});

Exercici 2: Prova de llista de tasques

  1. Crea una llista de tasques en la teva aplicació React amb la funcionalitat per afegir i eliminar tasques.
  2. Escriu una prova E2E amb Cypress que afegeixi una nova tasca i després l'elimini, verificant que la tasca s'hagi afegit i eliminat correctament.

Solució

describe('Todo List', () => {
  it('Adds and removes a task', () => {
    cy.visit('http://localhost:3000/todos');
    cy.get('input[name="new-task"]').type('Learn Cypress');
    cy.get('button[type="submit"]').click();
    cy.contains('Learn Cypress');
    cy.get('button.delete-task').click();
    cy.contains('Learn Cypress').should('not.exist');
  });
});

Conclusió

En aquesta secció, hem après a configurar Cypress per a proves E2E en un projecte React, escriure proves bàsiques i utilitzar funcionalitats avançades per millorar les nostres proves. Les proves E2E són una part crucial del procés de desenvolupament, ja que asseguren que l'aplicació funcioni correctament des de la perspectiva de l'usuari final. Amb Cypress, podem escriure proves fiables i fàcils de mantenir per garantir la qualitat del nostre codi.

◄ Anterior
◄
Següent ►
►

Curs de React

Mòdul 1: Introducció a React

Mòdul 2: Components de React

Mòdul 3: Treballar amb esdeveniments

Mòdul 4: Conceptes avançats de components

Mòdul 5: Hooks de React

Mòdul 6: Enrutament en React

Mòdul 7: Gestió de l'estat

Mòdul 8: Optimització del rendiment

Mòdul 9: Proves en React

Mòdul 10: Temes avançats

Mòdul 11: Projecte: Construir una aplicació completa

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