Playwright e AI: automatizzare il browser, guida all'installazione e primo caso d'uso

Perché Playwright è adatto all'automazione guidata dall'AI

Playwright è il framework open source di Microsoft per automatizzare i browser moderni: Chromium (Chrome ed Edge), Firefox e WebKit (Safari), con la stessa API su Windows, macOS e Linux. Nato per i test end-to-end, oggi è la scelta più diffusa anche per dare a un assistente AI la capacità di usare un sito web: aprire pagine, leggere contenuti, compilare form, cliccare e verificare il risultato.

Le ragioni per cui funziona così bene con gli agenti AI sono tre:

• Snapshot di accessibilità: Playwright può descrivere una pagina come un albero di ruoli ed etichette (bottone "Invia", campo "Email"…) invece che come HTML grezzo o pixel. È un formato compatto e comprensibile da un modello linguistico, senza bisogno di visione.
• Auto-waiting: prima di ogni azione attende che l'elemento sia visibile e cliccabile. Meno attese manuali, meno script fragili.
• Server MCP ufficiale: @playwright/mcp espone il browser come insieme di strumenti utilizzabili da Claude Code, Claude Desktop, VS Code e altri client compatibili con il Model Context Protocol.

Cosa serve

• Node.js in versione LTS recente (20 o superiore), che include anche npm e npx.
• Circa 500 MB di spazio libero per i browser che Playwright scarica e gestisce da solo.
• Un terminale (PowerShell, Prompt dei comandi o Bash).
• Facoltativo: un client AI con supporto MCP, come Claude Code, per il pilotaggio in linguaggio naturale.

Verifica Node.js con:

node --version
npm --version

Installazione

Opzione A: progetto con script (Node.js)

Crea una cartella di lavoro e inizializza Playwright. La procedura guidata crea la configurazione, un test di esempio e scarica i browser:

mkdir automazioni-browser
cd automazioni-browser
npm init playwright@latest

Se preferisci un'installazione minimale, solo per gli script di automazione:

npm init -y
npm install playwright
npx playwright install chromium

Opzione B: Python

pip install playwright
playwright install chromium

Opzione C: server MCP per l'AI

Per far pilotare il browser direttamente da un assistente AI non serve scrivere script. Con Claude Code basta un comando:

claude mcp add playwright -- npx @playwright/mcp@latest

Per altri client MCP la configurazione JSON è equivalente:

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

Al primo avvio i browser necessari vengono scaricati automaticamente. Da quel momento l'assistente dispone di strumenti come browser_navigate, browser_snapshot, browser_click e browser_type.

Come si utilizza

I concetti di base sono pochi. Si lancia un browser, si apre una pagina e si interagisce con gli elementi tramite locator, preferibilmente basati su ruolo ed etichetta, perché sono gli stessi che vedrebbe un utente (e un'AI):

Un comando molto utile per iniziare è il generatore di codice: npx playwright codegen https://www.egsoft.it apre un browser, registra le tue azioni e produce lo script corrispondente.

Un caso d'uso semplice: leggere gli articoli di un blog

Supponiamo di voler estrarre i titoli degli articoli dalla pagina del blog di un sito e salvare uno screenshot, ad esempio per un controllo periodico. Crea il file blog.mjs:

import { chromium } from 'playwright';

const browser = await chromium.launch({ headless: true });
const page = await browser.newPage();

await page.goto('https://www.egsoft.it/blog-tech.php');

// Titoli degli articoli: gli h2 / h3 presenti nella pagina
const titoli = await page.locator('main h2, main h3').allInnerTexts();
console.log('Articoli trovati:', titoli.length);
titoli.forEach((t, i) => console.log(`${i + 1}. ${t}`));

// Snapshot di accessibilità: la vista "leggibile dall'AI" della pagina
console.log(await page.locator('body').ariaSnapshot());

await page.screenshot({ path: 'blog.png', fullPage: true });
await browser.close();

Esecuzione:

node blog.mjs

In pochi secondi ottieni l'elenco dei titoli, la struttura della pagina in forma testuale e un'immagine dell'intera pagina. Lo stesso script può essere pianificato con l'Utilità di pianificazione di Windows o con cron per un monitoraggio automatico.

Lo stesso caso, ma pilotato dall'AI

Con il server MCP installato non serve scrivere codice: in Claude Code puoi semplicemente chiedere

Apri https://www.egsoft.it/blog-tech.php, elenca i titoli degli
articoli e dimmi qual è il più recente.

L'assistente apre il browser, legge lo snapshot di accessibilità della pagina e risponde. Se l'attività richiede più passaggi (login, ricerca, compilazione di un form), li concatena da solo, adattandosi a quello che trova nella pagina.

Buone pratiche e sicurezza

• Usa locator semantici (getByRole, getByLabel, getByText) invece di selettori CSS fragili: resistono ai cambi di layout.
• Rispetta i siti che automatizzi: verifica termini di utilizzo e robots.txt, e non sovraccaricare i server con richieste ravvicinate.
• Non inserire credenziali negli script o nei prompt: usa variabili d'ambiente o un profilo browser dedicato.
• Dai all'AI un perimetro: con un profilo isolato e un elenco di domini consentiti riduci il rischio che un contenuto malevolo in una pagina induca l'agente a compiere azioni indesiderate.
• Conferma le azioni irreversibili: acquisti, invii di moduli e cancellazioni dovrebbero richiedere sempre un tuo via libera esplicito.

Conclusioni

Playwright offre in un'unica soluzione ciò che serve per portare l'automazione del browser nell'era degli assistenti AI: affidabilità, API semplici e una rappresentazione delle pagine pensata per essere "letta" da un modello. Bastano npm init playwright@latest o un singolo comando MCP per iniziare, e un'attività ripetitiva come il controllo di una pagina, il test di un form o la raccolta di dati diventa in pochi minuti un'automazione ripetibile.

Per approfondire, la documentazione ufficiale è disponibile su playwright.dev.