# Playwright: setup and first end-to-end tests

Playwright installs with one package, downloads browsers and runs end-to-end tests with role-based locators; webServer starts the app for you.

> Page: https://ui.eneawork.it/blog/playwright-e2e-setup
> Markdown: https://ui.eneawork.it/blog/playwright-e2e-setup.md

*2026-11-01*

Playwright si installa con un pacchetto, scarica i browser e lancia i test su Chromium, Firefox e WebKit con lo stesso codice.

Il catalogo EneUI conta 111.985 componenti, 1.556 blocchi e 12.808 icone da 1.472 librerie, misurati da /api/stats il 1 novembre 2026. La cifra viene da una query all'endpoint, non da una stima: conta i record pubblicati, non la qualità dei componenti.

## Installazione

npm i -D @playwright/test npx playwright install --with-deps

Playwright è distribuito con licenza Apache-2.0; install --with-deps scarica i browser e le librerie di sistema che servono in CI.

## La configurazione

import { defineConfig, devices } from "@playwright/test"; export default defineConfig({ testDir: "./e2e", use: { baseURL: "http://localhost:5173", trace: "on-first-retry" }, webServer: { command: "npm run dev", url: "http://localhost:5173", reuseExistingServer: true, }, projects: [{ name: "chromium", use: devices["Desktop Chrome"] }], });

webServer avvia Vite e attende la porta: il test non dipende da un server già acceso a mano. trace registra la sessione al primo fallimento.

## Il primo test

import { test, expect } from "@playwright/test"; test("il login porta alla dashboard", async ({ page }) => { await page.goto("/login"); await page.getByLabel("Email").fill("a@b.it"); await page.getByLabel("Password").fill("segreta"); await page.getByRole("button", { name: "Accedi" }).click(); await expect(page.getByRole("heading", { name: "Dashboard" })).toBeVisible(); });

I locator sono gli stessi ruoli di Testing Library: il test segue la pagina come un utente e non dipende dalle classi CSS.

## Esecuzione

npx playwright test npx playwright show-report

Il primo comando esegue la suite e genera il report; il secondo apre l'HTML con i passi, la traccia e gli screenshot dei fallimenti.

## Record vivi nel catalogo

Tre componenti da coprire con un percorso: login-form, credit-card-form e multistep-form. Per sfogliare per categoria parti da 111.985 componenti.

## La limitazione

I test end-to-end costano tempo e infrastruttura: ogni browser scarica centinaia di megabyte e la suite gira in minuti, non in secondi. Vanno riservati ai percorsi critici, non a ogni variante di un componente.

## Dove continuare

Il livello sotto è in Testing Library: cinque test; il flusso di form è in form progressivo con Next.js; il confronto fra framework è in Vue 3 vs React.

## FAQ

### Playwright sostituisce i test di componente?

No, li completa: i test di componente girano in secondi e coprono la logica, Playwright copre i percorsi nel browser vero.

### Serve installare tutti i browser?

No. Si parte con Chromium e si aggiungono Firefox e WebKit quando il progetto li supporta.

### Come si esegue in CI?

Con npx playwright test, dopo npx playwright install --with-deps. L'immagine ufficiale contiene già le dipendenze.

### Perché usare webServer nella configurazione?

Perché avvia l'app e attende la porta: il test non dipende da un server acceso a mano.

### Quanto dura una suite end-to-end?

Da uno a cinque minuti per poche decine di test su un browser; il tempo cresce con browser e percorsi.