React

Playwright: setup e primi test end-to-end

Playwright si installa con un pacchetto, scarica i browser e lancia i test end-to-end con locator per ruolo; il webServer avvia l'app da solo.

In sintesi

  • Playwright copre i percorsi nel browser vero, non la logica dei componenti.
  • webServer avvia l'app e attende la porta: nessun server acceso a mano.
  • I locator per ruolo sopravvivono al refactor, le classi CSS no.

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

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("[email protected]");
  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.

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.

Domande frequenti

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.