Tag: e2e, testing, playwright, cypress, automation, qa, integration

Livello: intermedio

TL;DR: Strategie, pattern e best practice per test end-to-end affidabili. Focus su isolamento dell'ambiente, gestione dell'asincronia e riduzione del flakiness.

Concetti chiave

Simula il comportamento reale dell'utente attraverso l'intera applicazione.

Verifica l'integrazione completa tra frontend, backend, database e servizi terzi.

Si posiziona al vertice della piramide dei test: costo alto, esecuzione lenta.

Richiede selettori robusti basati su accessibilità o attributi dedicati data-testid.

Necessita di database seeding e reset dello stato prima di ciascun test.

Gli assertion devono attendere esplicitamente il completamento degli eventi asincroni.

L'esecuzione parallela riduce i tempi di feedback nelle pipeline di CI/CD.

Tracing, screenshot e video al failure velocizzano il debug dei test falliti.

Domande tipiche e risposte pronte

Q: Come affronti il problema dei test flaky in una suite E2E?R: Elimino i timeout fissi usando auto-waiting su locator e network idle. Isolo i dati di test con fixture dedicate ed eseguo il retry solo in CI tracciando i log.

Q: Quale criterio usi per scegliere tra un test E2E e un test di integrazione?R: Riservo gli E2E ai flussi critici di business, come autenticazione e checkout. Tutto il resto lo copro con test di integrazione o componenti per rapidità e stabilità.

Q: Perché preferire data-testid rispetto a classi CSS o XPath per i selettori?R: I selettori basati su classi o struttura DOM si rompono a ogni refactoring grafico. Gli attributi data-testid o i ruoli ARIA rimangono stabili nel tempo.

Insidie e errori comuni

Uso di sleep o pause temporali fisse invece di wait esplicite sulle condizioni.

Dipendenza dall'ordine di esecuzione dei test o da stati condivisi nel database.

Mancata pulizia delle risorse create, che porta a collisioni di ID univoci.

Testare casi limite di validazione via E2E anziché a livello unitario.

Esecuzione di tutti i test su un singolo browser ignorando le discrepanze cross-browser.

Snippet e comandiTypeScript

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

test('login e navigazione dashboard', async ({ page }) => {

await page.goto('/login');

await page.getByLabel('Email').fill('utente@test.local');

await page.getByLabel('Password').fill('PasswordSegreta123!');

await page.getByRole('button', { name: 'Accedi' }).click();

await expect(page).toHaveURL('/dashboard');

await expect(page.getByTestId('welcome-banner')).toBeVisible();

});

Esecuzione test in modalità headless con generazione trace

npx playwright test --trace on-first-retry

Apertura interfaccia interattiva di debug

npx playwright test --ui

```

Da ripassare

[ ] Configurazione di fixture isolate per autenticazione e storage state.

[ ] Pattern Page Object Model e sue alternative funzionali.

[ ] Strategie di mock parziale delle chiamate HTTP tramite route handler.

[ ] Integrazione del report HTML e artifact di tracing in GitHub Actions.

[x] Selezione di elementi tramite ruoli semantici e ARIA label.