Come usare Claude Code con Playwright MCP: Una guida completa di configurazione

Cos’è Playwright MCP?

Il server Playwright MCP dà a qualsiasi client Model Context Protocol i superpoteri dell’automazione del browser. Invece di chiedere a un’AI di “guardare” i pixel, il server restituisce snapshot strutturati di accessibilità della pagina, e il modello interagisce con gli elementi per ID di riferimento. Questo rende il ciclo veloce, deterministico e libero da overhead del modello di visione. Funziona con VS Code, Cursor, Windsurf, Claude Desktop, Claude Code e qualsiasi altro client MCP.

Per Claude Code in particolare, questo significa che l’agente nel tuo terminale può ora aprire un browser, fare clic, compilare moduli, mockare richieste di rete, acquisire screenshot e persino eseguire script Playwright personalizzati — tutto guidato da prompt in linguaggio naturale.

Prerequisiti

Prima di iniziare, assicurati di avere:

• Node.js 18 o più recente installato
• Claude Code installato e acceduto (esegui claude nel tuo terminale per verificare)
• Un terminale in cui sei a tuo agio lavorare

Tutto qui — Playwright MCP scarica i propri binari del browser al primo avvio.

Pronto a far crescere il tuo business?

Inizia oggi la tua prova gratuita e vedi i risultati in pochi giorni.

Richiedi demo Accedi

Configurazione dell’integrazione Playwright MCP

Collegare Playwright MCP a Claude Code è un singolo comando. Segui questi passaggi per collegarlo:

Aggiungi il Server Playwright MCP

Apri il tuo terminale ed esegui:

claude mcp add playwright npx @playwright/mcp@latest

Questo registra un nuovo server MCP denominato playwright che Claude Code avvia tramite npx ogni volta che ha bisogno di strumenti del browser. La prima invocazione scarica il pacchetto e i binari del browser richiesti, quindi concedigli un minuto la prima volta.

Verifica la connessione

Avvia una nuova sessione di Claude Code ed esegui il comando /mcp:

claude

/mcp

Dovresti vedere playwright elencato come server connesso, insieme agli strumenti che espone (navigazione, clic, digitazione, screenshot, network mocking e altro).

Facoltativo: usa una configurazione JSON

Se preferisci modificare i file di configurazione direttamente, lo stesso server può essere aggiunto a ~/.claude.json (o a un .mcp.json con ambito di progetto) utilizzando il formato MCP standard:

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

Riavvia Claude Code dopo aver modificato il file e il server apparirà in /mcp.

La tua prima automazione del browser in Claude Code

Con il server connesso, i tuoi prompt possono ora guidare un vero browser. Prova l’interazione canonica dal primo tutorial della documentazione di Playwright:

Naviga a https://demo.playwright.dev/todomvc e aggiungi alcuni elementi todo.

Claude Code aprirà il browser, richiederà uno snapshot di accessibilità della pagina, individuerà l’input dal suo riferimento di elemento, digiterà ogni todo e ti confermerà il risultato nel terminale.

Attenzione su quale browser si apre: per impostazione predefinita questo avvia Chromium in modalità headed. Per modificarlo, aggiungi flag agli args nella configurazione MCP e riavvia Claude Code: --headless per nascondere la finestra, o --browser=firefox|webkit|msedge per cambiare motore.

Come funzionano gli snapshot di accessibilità

Quando uno strumento Playwright MCP viene eseguito, restituisce uno snapshot strutturato della pagina — ruoli degli elementi, contenuto di testo e ID di riferimento — invece di pixel. Claude legge lo snapshot e utilizza riferimenti come ref=e5 per digitare nella casella di testo o ref=e10 per attivare la casella di controllo. Nessuna spinta di pixel, nessun selettore CSS fragile — solo lo stato della pagina strutturato su cui il modello può ragionare.

Iscriviti alla nostra newsletter

Ricevi gratuitamente gli ultimi consigli, tendenze e offerte.

Indirizzo email

Iscriviti

Capacità principali che puoi usare da Claude Code

Una volta che Playwright MCP è collegato, gli stessi prompt che daresti a un collega funzionano in Claude Code:

• Navigazione: “Vai a example.com,” “torna indietro,” “ricarica la pagina.”
• Clic e digitazione: “Fai clic sul pulsante Invia,” “riempi il campo email con test@example.com .”
• Screenshot: “Acquisisci uno screenshot della sezione prezzi.”
• Tastiera e mouse: Premi i tasti, passa il mouse, trascina e rilascia.
• Schede e dialoghi: Apri nuove schede, passa da una all’altra, accetta o rifiuta i popup.
• Monitoraggio della rete: “Elenca le richieste effettuate dal caricamento della pagina.”
• Mocking API: “Mockare l’endpoint /api/users per restituire un array vuoto.”
• Stato di archiviazione: Salva le sessioni autenticate in un file e ricaricale in seguito.

Per i flussi di lavoro che richiedono più di una singola chiamata di strumento, puoi chiedere a Claude Code di invocare browser_run_code ed eseguire uno script Playwright inline — utile per asserzioni, estrazione di dati o qualsiasi cosa che benefici di poche righe di codice imperativo.

Opzioni di configurazione utili

Playwright MCP ha un paio di flag che vale la pena conoscere. Aggiungili all’array args nella tua configurazione (o al comando claude mcp add dopo --).

Modalità Headless

Il browser viene eseguito in modalità headed per impostazione predefinita in modo da poter guardare cosa sta accadendo. Per eseguirlo in modalità headless — utile per CI o shell remoti — passa --headless:

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

Scegli un browser

Cambia motore con il flag --browser. I valori supportati sono chrome, firefox, webkit e msedge:

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

Modalità profilo

Playwright MCP supporta tre modalità di profilo:

• Persistente (predefinita): Lo stato di accesso e i cookie persistono tra le sessioni.
• Isolata: Passa --isolated per avviare ogni sessione da zero, facoltativamente inizializzata con --storage-state.
• Estensione del browser: Passa --extension per collegarti alle tue schede browser esistenti tramite l’estensione Playwright MCP Bridge.

Server HTTP autonomo

Se hai bisogno di eseguire un browser headed da qualche parte senza un display collegato (o da un worker IDE), avvia il server separatamente e connettiti tramite HTTP.

Apri un secondo terminale — tienilo aperto per l’intera sessione — e avvia il server lì:

npx @playwright/mcp@latest --port 8931

Mantieni quel terminale aperto. È quello che espone il browser su localhost:8931 in modo da poter visualizzare la sessione nel tuo browser e in modo che Claude Code abbia qualcosa a cui connettersi. Chiudere il terminale spegne il server.

Quindi, nel terminale in cui esegui Claude Code, puntalo all’endpoint aggiornando la tua configurazione:

{
  "mcpServers": {
    "playwright": {
      "url": "http://localhost:8931/mcp"
    }
  }
}

Flussi di lavoro pratici che vale la pena rubare

Una volta che Playwright MCP è connesso, Claude Code può gestire lo scaffolding dei test end-to-end, le riproduzioni di bug, i controlli di mocking API, i controlli della pagina e i test di fumo della versione — qualsiasi cosa che comporti la guida di un browser e la segnalazione indietro.

Due cose rendono quei prompt effettivamente funzionanti nella pratica. Innanzitutto, un CLAUDE.md nella radice del tuo progetto che documenta l’URL di staging, le credenziali demo e le convenzioni che l’agente dovrebbe seguire — senza di esso, “accedi come utente demo” non ha nulla a cui agganciarsi. In secondo luogo, se vuoi che Claude Code tragga il contesto da problemi o ticket, connetti un secondo server MCP per quello — il server GitHub MCP è la scelta comune. Salta entrambi e Claude Code ti chiederà (ragionevolmente) cos’è il problema #482.

Perché abbinare Claude Code con Playwright MCP?

Un paio di motivi per cui questa combinazione è difficile da battere:

• Nativo del terminale: Tutto accade dove lavori già. Nessun cambio di contesto in un runner di test separato.
• Incentrato sull’accessibilità: Gli snapshot battono gli screenshot per velocità e affidabilità, e funzionano senza un modello di visione.
• Vero Playwright sottostante: Tutto quello che puoi fare con Playwright nel codice, puoi farlo qui — multi-browser, network mocking, storage state e altro.
• Componibile con altri server MCP: Impila Playwright accanto a GitHub, il tuo database o il tuo server MCP di monitoraggio e Claude Code può spostare il lavoro end-to-end su tutti loro.
• Standard aperto: MCP è portabile. Lo stesso server Playwright funziona in Cursor, VS Code, Windsurf e Claude Desktop se cambi client.

Aggiungi il server, esegui /mcp per confermare, e il tuo prossimo prompt “vai a testare la pagina di accesso” diventa una vera sessione del browser — guidata da Claude Code, guardata (o no) in modalità headed, e verificabile attraverso snapshot di accessibilità.