Angular Academy · Lezione

Panoramica dei test E2E

Comprendere il ruolo dei test end-to-end

Panoramica dei test E2E è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

Che cosa significa test end-to-end

I test end-to-end (E2E) esercitano l'applicazione come farebbe un utente reale: avviano l'app in un browser reale, navigano tra le pagine, fanno clic sui pulsanti, compilano i moduli e verificano ciò che è visibile. Verificano che l'intero stack funzioni insieme, non soltanto una singola unità.

La piramide dei test

Una suite equilibrata contiene molti e rapidi test unitari, un numero inferiore di test di integrazione e un piccolo insieme di test E2E lenti ma di grande valore. Gli E2E si trovano al vertice: offrono la maggiore copertura per test, ma sono anche i più costosi da eseguire e mantenere.

Unità: una funzione/un componente isolato
Integrazione: più unità insieme
E2E: l'applicazione in esecuzione dall'inizio alla fine

Che cosa rilevano gli E2E e non i test unitari

I test E2E rilevano problemi visibili solo quando componenti reali si collegano tra loro: errori di routing, integrazioni API non funzionanti, DOM mancante dopo un deploy, CSS che nasconde un pulsante o un ciclo di reindirizzamento dell'autenticazione. I test unitari con dipendenze simulate possono superare il test mentre l'app reale non funziona.

Angular e la storia degli E2E

Le versioni precedenti di Angular includevano Protractor per gli E2E. Protractor è stato dichiarato obsoleto e rimosso dai nuovi progetti. Oggi Angular CLI consente di scegliere un runner E2E di terze parti; Playwright e Cypress sono le opzioni più diffuse.

Perché Playwright

Playwright è un moderno e veloce framework E2E di Microsoft. Controlla Chromium, Firefox e WebKit, attende automaticamente gli elementi, isola i test con nuovi contesti del browser e offre ottimi strumenti di debug. Questo corso usa Playwright.

Aggiungere Playwright ad Angular

Potete configurare Playwright con il relativo installer. Vengono creati un playwright.config.ts e una cartella contenente un test di esempio.

npm init playwright@latest
# creates playwright.config.ts and tests/ with example specs

Anatomia di un test E2E

Un test E2E avvia l'app, esegue azioni dell'utente e verifica la pagina. Il flusso è: arrange (navigare), act (interagire), assert (verificare il risultato visibile).

import { test, expect } from '@playwright/test';

test('home shows title', async ({ page }) => {
  await page.goto('/');
  await expect(page.getByRole('heading')).toHaveText('Welcome');
});

Gli E2E vengono eseguiti su un server reale

Per gli E2E l'app Angular deve essere effettivamente in esecuzione. In genere la configurazione avvia ng serve (oppure distribuisce una build di produzione) e indirizza i test verso quell'URL tramite baseURL e una voce webServer.

// playwright.config.ts
export default {
  use: { baseURL: 'http://localhost:4200' },
  webServer: { command: 'ng serve', url: 'http://localhost:4200', reuseExistingServer: true },
};

Mantenere le suite E2E piccole e mirate

Poiché i test E2E sono lenti e possono essere instabili, coprite solo i percorsi utente critici: accesso, checkout e il percorso principale senza errori. Spostate i casi limite dettagliati nei test unitari e di integrazione, dove vengono eseguiti più rapidamente e in modo più affidabile.

Instabilità e determinismo

La difficoltà principale degli E2E è l'instabilità: test che falliscono in modo intermittente. Evitate ritardi fissi con sleep; affidatevi alle asserzioni con attesa automatica di Playwright. Controllate i dati di test affinché ogni esecuzione inizi da uno stato noto.

E2E e test dei componenti

I test dei componenti Angular (TestBed) verificano un componente in un ambiente sintetico. Gli E2E verificano l'app distribuita in un browser reale. Sono complementari: usate TestBed per controlli rapidi della logica e del DOM, e gli E2E per avere la certezza che l'intero prodotto funzioni.

Verifica rapida

Che cosa distingue gli E2E dai test unitari?

Riepilogo

I test E2E eseguono l'intera app in un browser reale per rilevare problemi di integrazione e routing che i test unitari non individuano. Si trovano al vertice della piramide dei test: pochi, lenti e di grande valore. I progetti Angular usano oggi runner come Playwright, che avviano il server e automatizzano i percorsi utente critici.

Domande Frequenti

La lezione «Panoramica dei test E2E» è gratuita?

Sì — il testo completo di «Panoramica dei test E2E» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «Panoramica dei test E2E»?

Comprendere il ruolo dei test end-to-end Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Panoramica dei test E2E»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Angular Academy?

Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Angular Academy