Integrazione con la CI
Eseguire i test E2E nell'integrazione continua
Integrazione con la CI è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 4 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.
Perché eseguire i test E2E in CI
I test E2E sono più utili quando vengono eseguiti automaticamente a ogni push o pull request. La Continuous Integration (CI) rileva le regressioni prima del merge, evitando che un flusso di accesso non funzionante raggiunga la produzione senza essere rilevato.
Cosa serve alla CI per eseguire i test E2E
Il job CI deve: installare le dipendenze, installare i browser di Playwright, compilare o avviare l'app Angular, quindi eseguire i test in modalità headless. Le macchine CI non hanno un display, quindi per impostazione predefinita i test vengono eseguiti in modalità headless.
Installazione dei browser in CI
I browser non vengono inclusi nel repository. Li installi nella pipeline con l'installer di Playwright, comprese le dipendenze del sistema operativo.
npm ci
npx playwright install --with-depsAvvio dell'app da parte di Playwright
La configurazione webServer indica a Playwright di avviare l'app prima dei test e di arrestarla al termine. In CI imposti reuseExistingServer: false per assicurarti che venga sempre avviato un server nuovo.
// playwright.config.ts
export default {
webServer: {
command: 'ng serve --configuration production',
url: 'http://localhost:4200',
reuseExistingServer: !process.env.CI,
},
};Un workflow di GitHub Actions
Un workflow tipico estrae il codice, configura Node, installa le dipendenze e i browser, quindi esegue la suite.
# .github/workflows/e2e.yml
name: e2e
on: [push, pull_request]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with: { node-version: 20 }
- run: npm ci
- run: npx playwright install --with-deps
- run: npx playwright testFlag headless e CI
Playwright rileva automaticamente la CI tramite la variabile d'ambiente CI e adatta il proprio comportamento: ripete i test falliti, vieta test.only e utilizza più worker con cautela. È anche possibile impostare esplicitamente i tentativi.
export default {
retries: process.env.CI ? 2 : 0,
forbidOnly: !!process.env.CI,
};Pubblicazione del report HTML
Playwright genera un report HTML. Lo carichi come artefatto CI, così gli errori possono essere analizzati dopo l'esecuzione, incluse tracce e screenshot.
- uses: actions/upload-artifact@v4
if: always()
with:
name: playwright-report
path: playwright-report/Acquisizione delle tracce in caso di errore
Configuri le tracce in modo che vengano registrate solo al primo tentativo. In questo modo le esecuzioni rimangono rapide, fornendo al contempo una riproduzione completa di ogni errore per il debug.
export default {
use: { trace: 'on-first-retry', screenshot: 'only-on-failure' },
};Partizionamento per maggiore velocità
Le suite più grandi possono essere suddivise tra macchine parallele con --shard. Ogni job CI esegue una porzione, riducendo il tempo totale trascorso.
npx playwright test --shard=1/3
npx playwright test --shard=2/3
npx playwright test --shard=3/3Caching per velocizzare la CI
Memorizzi nella cache node_modules e i binari dei browser di Playwright tra un'esecuzione e l'altra, così le installazioni non occupano la maggior parte del tempo di compilazione. La maggior parte dei provider CI offre un'azione di caching basata sul lockfile.
Fallimento corretto della build
Playwright termina con un codice diverso da zero quando un test fallisce; in questo modo la CI contrassegna il job in rosso e blocca il merge. Non ignori il codice di uscita con || true, altrimenti i test non funzionanti passeranno senza segnalazioni.
Verifica rapida
Che cosa installa i browser in CI?
Riepilogo
Esegua i test E2E a ogni push installando le dipendenze e i browser (playwright install --with-deps), lasciando che webServer avvii l'app ed eseguendo i test in modalità headless con tentativi adattati alla CI. Carichi il report HTML e le tracce come artefatti, utilizzi il partizionamento per aumentare la velocità e lasci che il codice di uscita diverso da zero blocchi i merge errati.
Domande Frequenti
La lezione «Integrazione con la CI» è gratuita?
Sì — il testo completo di «Integrazione con la CI» è 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 «Integrazione con la CI»?
Eseguire i test E2E nell'integrazione continua 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 4 di 4.
Quanto tempo richiede la lezione «Integrazione con la CI»?
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
- Panoramica dei test E2E
- Scrivere test con Playwright
- Selector e asserzioni
- Integrazione con la CI