microsoft/playwrightFramework di automazione del browser con una singola API per Chromium, Firefox e WebKit. Supporta test web, scraping, screenshot e intercettazione di rete.
Playwright è un framework per l'automazione e il testing web. Guida Chromium, Firefox e WebKit con una singola API — nei tuoi test, nei tuoi script e come strumento per agenti AI.
Scegli il percorso più adatto al tuo flusso di lavoro:
| Ideale per | Installazione | |
|---|---|---|
| Playwright Test | Test end-to-end | npm init playwright@latest |
| Playwright CLI | Agenti di codifica (Claude Code, Copilot) | npm i -g @playwright/cli@latest |
| Playwright MCP | Agenti AI e automazione basata su LLM | npx @playwright/mcp@latest |
| Playwright Library | Script di automazione browser | npm i playwright |
| Estensione VS Code | Scrittura e debug di test in VS Code | Installa dal Marketplace |
Playwright Test è un test runner completo progettato per il testing end-to-end. Esegue test su Chromium, Firefox e WebKit con isolamento completo del browser, attesa automatica e assertion web-first.
npm init playwright@latest
Oppure aggiungi manualmente:
npm i -D @playwright/test
npx playwright install
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();
});
npx playwright test
I test vengono eseguiti in parallelo su tutti i browser configurati, in modalità headless per impostazione predefinita. Ogni test ottiene un contesto browser nuovo — isolamento completo con overhead quasi nullo.
Attesa automatica e assertion web-first. Nessun timeout artificiale. Playwright attende che gli elementi siano interagibili e le assertion vengono ritentate automaticamente finché le condizioni non sono soddisfatte.
Locator. Trova elementi con locator 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 in altri test:
// Salva lo stato dopo il login
await page.context().storageState({ path: 'auth.json' });
// Riutilizza in altri test
test.use({ storageState: 'auth.json' });
Tracing. Cattura tracce di esecuzione, screenshot e video in caso di errore. Ispeziona ogni azione, snapshot DOM, richiesta di rete e messaggio 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.
Playwright CLI è un'interfaccia a riga di comando per l'automazione del browser progettata per agenti di codifica. È più efficiente in termini di token rispetto a MCP — i comandi evitano di caricare grandi schemi di strumenti e alberi di accessibilità nel contesto del modello.
npm install -g @playwright/cli@latest
Installa facoltativamente le skill per un'integrazione più ricca con gli agenti:
playwright-cli install --skills
Indirizza il tuo agente di codifica verso un'attività:
Testa il flusso "add todo" su https://demo.playwright.dev/todomvc usando playwright-cli.
Scatta screenshot per tutti gli scenari riusciti e falliti.
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
Usa playwright-cli show per aprire una dashboard visiva con anteprime screencast in tempo reale di tutte le sessioni browser in esecuzione. Fai clic su qualsiasi sessione per ingrandire e prendere il controllo remoto.
playwright-cli show
Il server Playwright MCP offre agli agenti AI il controllo completo del browser tramite il Model Context Protocol. Gli agenti interagiscono con le pagine utilizzando snapshot di accessibilità strutturati — nessun modello di visione o screenshot richiesti.
Aggiungi al tuo client MCP (VS Code, Cursor, Claude Desktop, Windsurf, ecc.):
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
}
Installazione con un clic per VS Code:
Per Claude Code:
claude mcp add playwright npx @playwright/mcp@latest
Chiedi al tuo assistente AI di interagire con qualsiasi pagina web:
Naviga su https://demo.playwright.dev/todomvc e aggiungi alcuni elementi todo.
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, mock di rete, gestione dello storage e altro.
Usa playwright come libreria per script di automazione del browser — web scraping, generazione di PDF, cattura di screenshot e qualsiasi flusso di lavoro che richieda il controllo programmatico del browser senza un test runner.
npm i playwright
Scatta 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();
Genera 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();
Emula 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();
Intercetta le 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();
L'estensione Playwright per VS Code porta l'esecuzione dei test, il debug e la generazione di codice direttamente nel tuo editor.
Esegui e fai il debug dei test dall'editor con un singolo clic. Imposta punti di interruzione, ispeziona variabili e scorri l'esecuzione dei test con una vista browser in tempo reale.
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 di test per te.
Seleziona i locator. Passa il mouse su qualsiasi elemento nel browser per vedere il miglior locator disponibile, quindi fai clic per copiarlo negli appunti.
Integrazione con Trace Viewer. Abilita "Show Trace Viewer" nella barra laterale per ottenere una traccia di esecuzione completa dopo ogni esecuzione di test — snapshot DOM, richieste di rete, log console e screenshot a ogni passaggio.
| Linux | macOS | Windows | |
|---|---|---|---|
| Chromium1 154.0.8037.0 | ✅ | ✅ | ✅ |
| WebKit 26.6 | ✅ | ✅ | ✅ |
| Firefox 155.0 | ✅ | ✅ | ✅ |
Esecuzione headless e con interfaccia su tutte le piattaforme. 1 Utilizza Chrome for Testing per impostazione predefinita.