Playwright MCP Server: fai guidare un browser reale a un assistente
Guida al server Playwright MCP e generatore di configurazione
Playwright MCP Server: Installazione, Opzioni e Strumenti | We.Inc
Cosa fa il server Playwright MCP, come funzionano gli snapshot di accessibilità, le opzioni utili, gli strumenti principali e un generatore che scrive la configurazione per te.
Playwright MCP è il server MCP open source di Microsoft che dà a un assistente AI un browser reale per cliccare, scrivere, compilare moduli e leggere pagine. Invece di guardare screenshot, legge l'albero di accessibilità della pagina, un elenco strutturato di pulsanti, link e testo. Richiede Node.js 18 o successivo e si installa con una sola riga npx.
Playwright MCP in sintesi
Voce
Valore
Pacchetto npm
@playwright/mcp
Requisito
Node.js 18 o successivo
Come vede le pagine
Snapshot di accessibilità, non pixel
Browser
chrome, firefox, webkit, msedge
Finestra predefinita
Headed (visibile); aggiungi --headless per nasconderla
Se gestisci un sito o un negozio, Playwright MCP è un modo pratico per far percorrere a un assistente le tue pagine come farebbe un cliente: aprire il menu, aggiungere qualcosa al carrello, inviare il modulo di contatto e segnalare cosa non funziona. È basato su Playwright, una libreria di test per browser molto diffusa. Scegli le opzioni qui sotto e copia una configurazione, poi leggi le note sulla sicurezza prima di usarlo su qualcosa in cui hai effettuato l'accesso.
Scegli un browser e se la finestra deve essere visibile o headless.
Attiva la modalità isolata se vuoi che ogni sessione parta pulita, senza nulla salvato su disco.
Aggiungi i gruppi di funzionalità extra che ti servono, come il salvataggio in PDF o le asserzioni di test.
Copia il JSON nella configurazione della tua app MCP e riavviala. Al primo avvio viene scaricato il pacchetto.
Fai i test su una copia di staging o un account di prova, non sul tuo accesso admin reale.
Usa --isolated per i test, così i cookie di una sessione non finiscono mai nella successiva.
Chiedi uno snapshot prima di chiedere dei clic: l'assistente individua gli elementi da quell'elenco.
Dai passaggi precisi ("apri /pricing, clicca il secondo piano, riporta il totale") invece di obiettivi vaghi.
Tieni a mente browser_run_code_unsafe: esegue qualsiasi codice Playwright, quindi usalo solo con prompt di cui ti fidi.
Domande frequenti
Cos'è uno snapshot di accessibilità?
I browser mantengono un albero di accessibilità, la stessa vista strutturata usata dagli screen reader: ogni pulsante, link, titolo e campo con il suo nome e ruolo. Playwright MCP passa quell'albero all'assistente, così può dire "clicca il pulsante Aggiungi al carrello" senza dover indovinare da un'immagine.
Playwright MCP è un confine di sicurezza?
No, e il suo README lo dice in grassetto. Anche opzioni come --allowed-origins e --blocked-origins sono descritte come non costituenti un confine di sicurezza. Trattalo come uno strumento da supervisionare, ed eseguilo dove un errore non può raggiungere dati reali dei clienti.
Ricorda gli accessi tra una sessione e l'altra?
Di default usa un profilo persistente, quindi gli accessi vengono salvati su disco come in un normale browser. Con --isolated il profilo resta in memoria e si perde alla chiusura del browser. Puoi precaricare i cookie in una sessione isolata con --storage-state.
Può fare screenshot o salvare PDF?
browser_take_screenshot è uno strumento principale. Il salvataggio in PDF (browser_pdf_save) si attiva con --caps=pdf, e gli strumenti di clic per coordinate richiedono --caps=vision.
Meglio Playwright MCP o la Playwright CLI?
Il README suggerisce che gli agenti di programmazione potrebbero trovarsi meglio con la Playwright CLI separata, che usa meno token. Riserva MCP alle sessioni esplorative più lunghe, in cui tenere aperto lo stato del browser vale quel costo.
Persistente, isolato o il tuo browser
Playwright MCP può funzionare in tre modi. Il profilo persistente predefinito conserva cookie e accessi in una cartella per progetto. La modalità isolata tiene tutto in memoria, ed è adatta a test ripetibili. La modalità estensione del browser si collega a una finestra di Chrome o Edge che hai già aperta: è comoda, ma significa che l'assistente agisce con i tuoi accessi reali.
Un profilo persistente può essere usato da un solo browser alla volta. Se avvii due sessioni dell'assistente sullo stesso progetto, avvia la seconda con --isolated o con un --user-data-dir diverso.
Compiti adatti sul tuo sito
Verificare che ogni link del menu principale apra una pagina che si carica. Compilare il modulo di contatto con dati di prova e confermare che compaia il messaggio di ringraziamento. Leggere i messaggi della console su una pagina che sembra lenta. Ridimensionare alla larghezza di un telefono ed elencare tutto ciò che fuoriesce.
Annota i risultati come una checklist da ripetere dopo ogni modifica, così l'esecuzione dell'assistente diventa il tuo test di regressione.
Opzioni da conoscere
Ogni opzione ha anche una forma come variabile d'ambiente, elencata nel README.
Opzioni selezionate di Playwright MCP
Opzione
Cosa fa
--browser <browser>
chrome, firefox, webkit o msedge
--headless
Funziona senza finestra visibile; headed è il default
--isolated
Tiene il profilo del browser in memoria, non su disco
--storage-state <path>
Carica cookie e local storage in una sessione isolata
--device <device>
Emula un dispositivo, per esempio "iPhone 15"
--viewport-size <size>
Imposta il viewport in pixel, per esempio "1280x720"
--caps <caps>
Attiva gruppi di strumenti extra, come pdf o vision
--allowed-origins / --blocked-origins
Consente o blocca le origini delle richieste; non è un confine di sicurezza
--timeout-action / --timeout-navigation
Default 5000 ms e 60000 ms
--port <port>
Serve via HTTP così un client può connettersi tramite URL
Strumenti principali
Strumenti principali di Playwright MCP
Strumento
Scopo
Sola lettura
Apre un URL
No
Cattura lo snapshot di accessibilità della pagina
Sì
Clicca un elemento
No
Scrive in un campo
No
Compila più campi insieme
No
Salva uno screenshot
Sì
Legge i messaggi della console
Sì
Elenca le richieste di rete
Sì
Ridimensiona la finestra
No
Esegue codice Playwright
No
Esempi di configurazione
Configurazione standard
La configurazione minima che il README indica per la maggior parte delle app MCP.
Eseguilo come server HTTP e connettiti tramite URL
Utile quando l'app non può aprire una finestra da sola. Il client punta poi a http://localhost:8931/mcp.
Generatore di configurazione Playwright MCP
Scegli le opzioni e copia il JSON. Questa pagina scrive solo testo; non avvia un browser.
Browser
Headless (nessuna finestra visibile)
Profilo isolato (nulla salvato su disco)
Dimensione del viewport, per esempio 1280x720 (facoltativa)
Gruppi di funzionalità extra
JSON di configurazione
Il viewport deve avere la forma 1280x720 (larghezza x altezza in pixel). È stato omesso.