Workshop Playwright

Workshop pratico sul testing End-to-End moderno con Playwright: dai fondamenti alle architetture enterprise.

Cosa Imparerai

Questo workshop copre l'intero percorso dal "perché testare" al "come deployare in produzione":

1. Fondamenti E2E - Piramide dei test, vantaggi e sfide reali
2. Introduzione a Playwright - I 3 pilastri: affidabilità, velocità, semplicità
3. Primi Test - Codegen, UI Mode, Trace Viewer, Visual Testing
4. Architettura e Pattern - Page Object Model, Fixtures, parallelizzazione sicura
5. CI/CD e Best Practices - Integrazione continua e strategie enterprise

Come Usare Questo Workshop

1. Setup Iniziale (10 minuti)

# Clone repository con tutti i sottomoduli
git clone --recurse-submodules https://github.com/monte97/workshop-playwright
cd workshop-playwright

# Avvia l'infrastructure demo (TechStore)
cd infrastructure-demo
npm install
npm start
# L'app sarà disponibile su http://localhost:3000

Verifica che l'app sia attiva:

curl http://localhost:3000

2. Leggi gli Articoli (30-45 minuti)

Gli articoli forniscono la teoria e i pattern. Leggili in ordine:

1. Perché i Test E2E - Il gap che unit/integration test non colmano
2. Introduzione a Playwright - I tre pilastri che lo rendono unico
3. I Tuoi Primi Test - Sintassi, Codegen, debugging
4. Architettura e Pattern - Test scalabili e manutenibili
5. CI/CD e Best Practices - Deployment e strategie avanzate

3. Esegui gli Esercizi (1-2 ore)

Gli esercizi sono nella directory demo/. Seguili in ordine:

cd demo
npm install
npx playwright install

# Leggi la guida completa degli esercizi
cat README.md

Esercizi disponibili:

• Esercizio 1: Codegen e generazione automatica test
• Esercizio 2: Visual Regression Testing
• Esercizio 3: Ottimizzazione autenticazione (storageState)
• Esercizio 4: Test robusti (waitForResponse pattern)
• Esercizio 4b: Parallelizzazione sicura con fixture API

Ogni esercizio ha documentazione dettagliata:

• Guida completa demo/
• Approfondimento Esercizio 4
• Approfondimento Esercizio 4b

4. (Opzionale) Consulta le Slide

Se hai seguito il workshop dal vivo o vuoi vedere le slide:

cd slides
npm install
npm run dev
# Disponibili su http://localhost:3030

Quick Start (Veloce)

# Setup completo in 3 comandi
git clone --recurse-submodules https://github.com/monte97/workshop-playwright
cd workshop-playwright

# Avvia infrastruttura
cd infrastructure-demo && npm install && npm start &

# Esegui test
cd ../demo && npm install && npx playwright install && npx playwright test

Struttura Repository

Directory	Repository	Descrizione	Documentazione
demo/	playwright-demo	Test Playwright pratici	README
infrastructure-demo/	workshop-demo	TechStore e-commerce demo	README
articles/	playwright-articles	Articoli blog della serie	Indice
slides/	playwright-slides	Presentazione Slidev	-
docs/	-	Documentazione esercizi avanzati	-

Infrastructure Demo (TechStore)

TechStore è un'applicazione e-commerce completa per esercitazioni pratiche:

Avvio:

cd infrastructure-demo
npm install
npm start

Endpoints:

• App: http://localhost:3000
• API Docs (Swagger): http://localhost:3000/api-docs

Credenziali di test:

// Utente base
email: 'user@techstore.test'
password: 'Test123!'

// Utente premium
email: 'premium@techstore.test'
password: 'Premium123!'

// Admin
email: 'admin@techstore.test'
password: 'Admin123!'

Caratteristiche:

• Autenticazione JWT
• Gestione prodotti e carrello
• Checkout completo
• API REST documentate
• Disponibile con Docker o Node.js

Vedi infrastructure-demo/README.md per dettagli completi.

Troubleshooting

Clone senza --recurse-submodules

Se hai clonato senza l'opzione e le directory sono vuote:

git submodule update --init --recursive

Port 3000 già in uso

Trova e termina il processo:

# Linux/Mac
lsof -ti:3000 | xargs kill -9

# Windows
netstat -ano | findstr :3000
taskkill /PID <PID> /F

Browser Playwright non installati

cd demo
npx playwright install

Infrastructure demo non risponde

Controlla i log e riavvia:

cd infrastructure-demo
npm start

Verifica che Node.js sia >= 18:

node --version

Test falliscono con ECONNREFUSED

L'infrastructure demo non è avviata. Segui il punto "Infrastructure Demo" sopra.

Contenuti per Modulo

Modulo 1: Fondamenti (30 min)

• Piramide dei test e limiti degli unit test
• Perché Playwright è diverso dai tool precedenti
• I tre pilastri: affidabilità, velocità, semplicità

Articoli: 01-perche-e2e, 02-introduzione-playwright

Modulo 2: Hands-on (1-1.5 ore)

• Codegen per generare test automaticamente
• Visual Regression Testing
• Ottimizzazione autenticazione con storageState
• Test robusti con waitForResponse
• Parallelizzazione sicura

Articoli: 03-primi-test Esercizi: demo/ (Esercizi 1-4b)

Modulo 3: Architettura e Pattern (45 min)

• Page Object Model
• Custom Fixtures
• Isolamento dei dati per test paralleli
• Sincronizzazione con API

Articoli: 04-architettura-pattern Documentazione: Esercizio 4, Esercizio 4b

Modulo 4: CI/CD (30 min)

• Integrazione in GitHub Actions / GitLab CI
• Parallelizzazione in CI
• Gestione trace e report
• Mobile testing e API testing

Articoli: 05-cicd-best-practices

Risorse

Documentazione Ufficiale

• Playwright Documentation
• API Reference
• Best Practices

Repository e Materiali

• Workshop completo (questo repo)
• TechStore Demo App
• Test di esempio

Articoli della Serie

Tutti gli articoli sono disponibili nella directory articles/ e seguono una progressione didattica dal perché testare fino alla produzione.

Contribuire

Segnalazioni di bug, suggerimenti e pull request sono benvenuti:

1. Per problemi con la demo app: workshop-demo/issues
2. Per problemi con i test: playwright-demo/issues
3. Per problemi con gli articoli: playwright-articles/issues

Licenza

MIT