🎭 Playwright

Documentazione | Riferimento API

Playwright è un framework per l'automazione e il test di applicazioni web. Controlla Chromium, Firefox e WebKit con un'unica API — nei tuoi test, nei tuoi script e come strumento per agenti AI.

Per iniziare

Scegli il percorso adatto al tuo flusso di lavoro:

Playwright Test

Playwright Test è un test runner completo progettato per i test end-to-end. Esegue i test su Chromium, Firefox e WebKit con isolamento completo del browser, attesa automatica e asserzioni web-first.

Installazione

npm init playwright@latest

Oppure aggiungi manualmente:

npm i -D @playwright/test
npx playwright install

Scrivere un test

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

test('has title', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await expect(page).toHaveTitle(/Playwright/);
});

test('get started link', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await page.getByRole('link', { name: 'Get started' }).click();
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});

Eseguire i test

npx playwright test

I test vengono eseguiti in parallelo su tutti i browser configurati, in modalità headless per impostazione predefinita. Ogni test riceve un contesto browser nuovo — isolamento completo con un sovraccarico quasi nullo.

Funzionalità principali

Attesa automatica e asserzioni web-first. Nessun timeout artificiale. Playwright attende che gli elementi siano utilizzabili e le asserzioni riprovano automaticamente finché le condizioni non sono soddisfatte.

Localizzatori. Trova elementi con localizzatori resilienti che rispecchiano il modo in cui gli utenti vedono la pagina:

page.getByRole('button', { name: 'Submit' })
page.getByLabel('Email')
page.getByPlaceholder('Search...')
page.getByTestId('login-form')

Isolamento dei test. Ogni test viene eseguito nel proprio contesto browser — equivalente a un profilo browser nuovo. Salva lo stato di autenticazione una volta e riutilizzalo tra i test:

// Save state after login
await page.context().storageState({ path: 'auth.json' });

// Reuse in other tests
test.use({ storageState: 'auth.json' });

Tracciamento. Acquisisci tracce di esecuzione, screenshot e video in caso di errore. Esamina ogni azione, snapshot DOM, richiesta di rete e messaggio della console nel Trace Viewer:

// playwright.config.ts
export default defineConfig({
  use: {
    trace: 'on-first-retry',
  },
});

npx playwright show-trace trace.zip

Parallelismo. I test vengono eseguiti in parallelo per impostazione predefinita su tutti i browser configurati.

Documentazione completa sui test

Playwright CLI

Playwright CLI è un'interfaccia a riga di comando per l'automazione del browser progettata per agenti di coding. È più efficiente in termini di token rispetto a MCP: i comandi evitano di caricare ampi schemi di strumenti e alberi di accessibilità nel contesto del modello.

Installazione

npm install -g @playwright/cli@latest

Installa opzionalmente le skill per un'integrazione più ricca con gli agenti:

playwright-cli install --skills

Utilizzo

Indirizza il tuo agente di coding verso un'attività:

Test the "add todo" flow on https://demo.playwright.dev/todomvc using playwright-cli.
Take screenshots for all successful and failing scenarios.

Oppure esegui i comandi direttamente:

playwright-cli open https://demo.playwright.dev/todomvc/ --headed
playwright-cli type "Buy groceries"
playwright-cli press Enter
playwright-cli screenshot

Monitoraggio delle sessioni

Usa playwright-cli show per aprire una dashboard visiva con anteprime screencast in diretta di tutte le sessioni browser in esecuzione. Fai clic su una sessione per ingrandirla e prenderne il controllo remoto.

playwright-cli show

Documentazione completa sulla CLI | GitHub

Playwright MCP

Il server MCP di Playwright offre agli agenti AI il controllo completo del browser tramite il Model Context Protocol. Gli agenti interagiscono con le pagine usando snapshot di accessibilità strutturati — senza bisogno di modelli di visione o screenshot.

Configurazione

Aggiungi al tuo client MCP (VS Code, Cursor, Claude Desktop, Windsurf, ecc.):

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

Installazione in un clic per VS Code:

Per Claude Code:

claude mcp add playwright npx @playwright/mcp@latest

Come funziona

Chiedi al tuo assistente AI di interagire con qualsiasi pagina web:

Navigate to https://demo.playwright.dev/todomvc and add a few todo items.

L'agente vede la pagina come un albero di accessibilità strutturato:

- heading "todos" [level=1]
- textbox "What needs to be done?" [ref=e5]
- listitem:
  - checkbox "Toggle Todo" [ref=e10]
  - text: "Buy groceries"

Usa i riferimenti agli elementi come e5 e e10 per fare clic, digitare e interagire — in modo deterministico e senza ambiguità visiva. Gli strumenti coprono navigazione, compilazione di moduli, screenshot, simulazione di rete, gestione dello storage e altro.

Documentazione completa sull'MCP | GitHub

Playwright Library

Usa playwright come libreria per script di automazione del browser: web scraping, generazione di PDF, acquisizione di screenshot e qualsiasi flusso di lavoro che richieda il controllo programmatico del browser senza un test runner.

Installazione

npm i playwright

Esempi

Acquisire uno screenshot:

import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://playwright.dev/');
await page.screenshot({ path: 'screenshot.png' });
await browser.close();

Generare un PDF:

import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://playwright.dev/');
await page.pdf({ path: 'page.pdf', format: 'A4' });
await browser.close();

Emulare un dispositivo mobile:

import { chromium, devices } from 'playwright';

const browser = await chromium.launch();
const context = await browser.newContext(devices['iPhone 15']);
const page = await context.newPage();
await page.goto('https://playwright.dev/');
await page.screenshot({ path: 'mobile.png' });
await browser.close();

Intercettare richieste di rete:

import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage();
await page.route('**/*.{png,jpg,jpeg}', route => route.abort());
await page.goto('https://playwright.dev/');
await browser.close();

Documentazione della libreria | Riferimento API

Estensione VS Code

L'estensione VS Code di Playwright porta l'esecuzione dei test, il debug e la generazione di codice direttamente nel tuo editor.

Esegui test e debug dall'editor con un solo clic. Imposta punti di interruzione, ispeziona le variabili e attraversa l'esecuzione dei test con una vista browser in diretta.

Genera test con CodeGen. Fai clic su "Record new" per aprire un browser: naviga e interagisci con la tua app mentre Playwright scrive il codice dei test per te.

Seleziona i localizzatori. Passa con il mouse su qualsiasi elemento nel browser per vedere il miglior localizzatore disponibile, quindi fai clic per copiarlo negli appunti.

Integrazione con Trace Viewer. Abilita "Show Trace Viewer" nella barra laterale per ottenere una traccia completa dell'esecuzione dopo ogni run di test: snapshot DOM, richieste di rete, log della console e screenshot a ogni passaggio.

Installa l'estensione | Guida a VS Code

Supporto cross-browser

Esecuzione headless e con interfaccia su tutte le piattaforme. ¹ Usa Chrome for Testing per impostazione predefinita.

Altri linguaggi

Playwright è disponibile anche per Python, .NET e Java.

Risorse

• Documentazione
• Riferimento API
• Server MCP
• CLI per agenti di coding
• Estensione VS Code
• Guida al contributo
• Changelog
• Discord