Mi aspettavo un comando e una finestra del browser. Il comando ha funzionato, ma Claude Code ha etichettato il nuovo server con ambito di progetto come Pending approval. Proprio quella piccola pausa è il motivo per cui una guida utile alla configurazione deve verificare quattro livelli invece di festeggiare dopo il download del pacchetto.
Playwright MCP per Claude Code è una connessione client-server di strumenti che offre a Claude Code un'automazione strutturata del browser tramite il Model Context Protocol. Claude Code è il client. Il processo Playwright MCP possiede gli strumenti del browser, la scelta del profilo e le prove restituite da ogni azione. Non è una strategia di test completa e non eredita automaticamente lo stato del Chrome quotidiano.
Che cosa aggiunge Playwright MCP a Claude Code?
Playwright MCP offre a Claude Code strumenti browser con nomi specifici per osservare e agire sulle pagine. Il server 0.0.80 attuale nella nostra esecuzione ha esposto navigazione, snapshot, ricerca mirata, clic, compilazione di moduli, valutazione JavaScript, ispezione della rete, screenshot, schede, messaggi di console e una via di fuga non sicura per il codice Playwright.
La guida ufficiale di Playwright MCP elenca come prerequisiti Node.js 20 o versione successiva e un client MCP come Claude Code. Descrive l'automazione del browser tramite snapshot di accessibilità strutturati anziché la sola visione da screenshot.
Claude Code dovrebbe usare MCP, la CLI o un percorso con browser esistente?
Scegli l'interfaccia in base alle prove che il compito deve produrre. MCP mantiene l'interazione strutturata nel ciclo dell'agente. La CLI tiene comandi e file vicini a un flusso di lavoro di programmazione. Un percorso con browser esistente conta quando uno stato di login approvato è il requisito imprescindibile.
| Percorso | Che cosa può fare | Che cosa non può dare per scontato |
|---|---|---|
| Playwright MCP | Esporre a Claude Code strumenti browser strutturati e prove live della pagina. | Non diventa una suite Playwright Test duratura né eredita per impostazione predefinita le sessioni personali di Chrome. |
| Playwright CLI | Eseguire comandi shell concisi e salvare snapshot o file di output per una lettura selettiva. | Non può funzionare in un client senza accesso alla shell e al filesystem. |
| Space con browser esistente | Operare uno spazio di lavoro browser indipendente con uno stato idoneo e approvato. | Non fornisce fixture, asserzioni, mocking di rete o tracce di Playwright Test. |
Per il confronto completo tra interfacce e costo in contesto, leggi Playwright MCP vs CLI. Questa pagina resta concentrata sulla registrazione e la verifica in Claude Code.
Come si aggiunge Playwright MCP a Claude Code?
Registra il pacchetto npm ufficiale con Claude Code, poi ispeziona l'ambito salvato prima di lanciare un test. L'ambito di progetto scrive un .mcp.json condivisibile in quel progetto. L'ambito utente rende il server disponibile in tutti i progetti e comporta una superficie di fiducia più ampia.
claude mcp add --scope project playwright -- npx --yes @playwright/mcp@latest --isolated
claude mcp get playwright
claude mcp listIl nostro comando ha usato Claude Code 2.1.221 e ha fissato @playwright/mcp 0.0.80 dopo aver risolto il pacchetto corrente. Claude ha scritto la configurazione di progetto attesa e ha stampato il comando completo. Ha anche segnalato Pending approval. Era il comportamento corretto: un file di progetto non dovrebbe ottenere il controllo del browser in silenzio solo perché esiste.
Apri Claude Code in modo interattivo in quel progetto fidato, esamina il comando e gli argomenti esatti, approva il server, poi esegui di nuovo la vista dello stato MCP. Non risolvere un prompt di fiducia con un bypass globale dei permessi.
Come si verificano server, strumenti, browser e risultato?
Una verifica valida produce prove su quattro livelli. Il nostro test diretto del client MCP ha completato lo stesso percorso di server e browser senza affidarsi alla frase di un agente che diceva che aveva funzionato.
| Livello | La prova osservata | Significato del fallimento |
|---|---|---|
| Server | MCP initialize e listTools completati. | Processo, pacchetto, Node o trasporto sono rotti. |
| Strumenti | 24 strumenti browser con nome sono stati restituiti dalla versione 0.0.80. | Claude può essere connesso al server sbagliato o bloccato dall'approvazione. |
| Azione del browser | browser_navigate ha aperto la guida ufficiale di Playwright MCP e ha scritto uno snapshot YAML. | Avvio del browser, policy degli URL, rete o caricamento della pagina falliti. |
| Stato successivo | evaluate ha restituito il titolo, sette H2, 11 blocchi di codice e un link GitHub di Microsoft. find ha restituito tre corrispondenze di Claude Code; gli errori di console erano zero. | L'azione è avvenuta, ma il risultato richiesto non è dimostrato. |
const result = await client.callTool({
name: "browser_evaluate",
arguments: {
function: "() => ({ title: document.title, h2: document.querySelectorAll('main h2').length })"
}
});
// Observed: { title: "Playwright MCP | Playwright", h2: 7 }Come dovrebbe gestire Claude Code lo stato del browser e del login?
Usa lo stato meno persistente che completa comunque il compito. Un browser nuovo e isolato è il più facile da riprodurre. Il login interattivo è utile per un test una tantum quando una persona può approvare l'MFA. Lo storage state o una directory user-data persistente possono supportare esecuzioni ripetute, ma quei file diventano credenziali e richiedono gli stessi controlli delle chiavi API.
| Scelta dello stato | Ideale per | Limite |
|---|---|---|
| --isolated | Pagine pubbliche, fixture e smoke check riproducibili | Lo stato di login scompare con la sessione. |
| Login interattivo | Test occasionale dietro MFA con una persona presente | Non è automazione senza supervisione. |
| Storage state o user data | Test ripetuti approvati con account di test controllati | L'artefatto può esporre cookie e accesso all'account. |
Come si risolvono strumenti mancanti ed esecuzioni fallite?
Risolvi i problemi partendo da Claude Code e andando verso l'esterno. Il primo errore di solito è più prezioso della quinta reinstallazione.
- Conferma il progetto e l'ambito esatti. Esegui claude mcp get playwright dalla directory che possiede .mcp.json.
- Risolvi l'approvazione. Pending approval è uno stato di fiducia dell'host, non un crash di Playwright.
- Esegui direttamente il comando del pacchetto con --version o --help sotto Node 20 o versione successiva.
- Riduci il compito a un URL pubblico, un'osservazione, uno screenshot e un'asserzione sullo stato successivo.
- Solo dopo aggiungi stato del profilo, permessi, proxy o aggancio di estensioni.
Se il server si avvia ma Claude non vede gli strumenti, confronta il comando configurato con il processo che Claude ha effettivamente lanciato. Installazioni manuali e da plugin duplicate possono esporre due server con argomenti diversi. Rimuovi il duplicato, riavvia Claude Code e ispeziona di nuovo.
Come si usa Playwright MCP in sicurezza nei flussi di test?
Tratta l'output di MCP come prova, non come verdetto. Dai a Claude Code una fixture o un account di test deterministico, definisci l'URL atteso e il risultato visibile e salva uno screenshot o uno snapshot quando il controllo fallisce. Un revisore deve poter rieseguire il comando senza ricostruire la conversazione.
Dove si inserisce ego (lite) e dove no?
Per un compito diverso di Claude Code, ego (lite) consegna all'agente snapshot semantici compatti con riferimenti stabili agli elementi, così un blocco di controlli viene eseguito come un unico pezzo di JavaScript nella pagina invece di una chiamata di strumento per controllo, riducendo round trip e consumo di token per l'intero compito, non per un solo passaggio. Il 10 settembre abbiamo usato uno Space per testare otto pagine di articoli a larghezze desktop di 1440 pixel e mobile di 390 pixel. L'esecuzione ha controllato canonical, tag di lingua, un solo H1, ordine delle intestazioni, caricamento delle immagini e testo alt, destinazioni degli anchor, overflow del codice, overflow orizzontale e un clic reale sull'indice dell'articolo.
Questo percorso non sostituisce il test runner di Playwright. Usa ego (lite) per il QA del browser quando un agente ha bisogno di uno spazio di lavoro browser ispezionabile o di uno stato live approvato. Mantieni Playwright per suite E2E ricche di asserzioni, mocking di rete, artefatti di trace e CI headless su Linux.
FAQ
Quale comando aggiunge Playwright MCP a Claude Code?
Usa claude mcp add playwright -- npx @playwright/mcp@latest, aggiungendo --scope project o --scope user in modo deliberato. Consulta il README attuale di Microsoft prima di copiare altri flag.
Perché Claude Code dice Pending approval?
La configurazione MCP con ambito di progetto richiede l'approvazione di fiducia. Apri Claude Code in modo interattivo nel progetto fidato, esamina il comando, approvalo e controlla di nuovo lo stato.
Come faccio a sapere che Playwright MCP funziona davvero?
Verifica l'inizializzazione del server, la scoperta degli strumenti, un'azione del browser e uno stato successivo letto in modo indipendente. La sola installazione del pacchetto o un messaggio dell'agente non bastano.
Playwright MCP usa il mio login Chrome esistente?
No per impostazione predefinita. Lo stato del browser dipende dalla modalità isolata, da una directory user-data, dallo storage state, dall'aggancio CDP o dal percorso dell'estensione Playwright scelto in configurazione.
Il plugin Playwright di Claude è identico alla registrazione MCP manuale?
Non darlo per scontato in ogni release. La pagina dei plugin di Anthropic prova che esiste una voce di plugin, mentre Microsoft documenta il comando MCP manuale. Ispeziona il comando che Claude lancia davvero.
Playwright MCP scrive una suite di test?
No. Può operare sulle pagine e aiutare a redigere i test, ma asserzioni durevoli, fixture, tentativi, tracce e report appartengono al codice di Playwright Test e alla CI.
Devo usare MCP o la CLI di Playwright con Claude Code?
Usa MCP per strumenti browser esplorativi e strutturati dentro il ciclo dell'agente. Usa la CLI per attività di programmazione orientate alla shell, dove comandi concisi e artefatti su file si adattano al flusso di lavoro.
Posso disattivare gli snapshot per risparmiare contesto?
La versione 0.0.80 espone snapshot-mode full o none. Disattivare gli snapshot può ridurre la struttura di pagina restituita, ma rimuove anche le prove che l'agente usa per scegliere gli elementi.
allowed-origins è un confine di sicurezza?
No. L'help attuale della CLI dice che non influisce sui reindirizzamenti e non deve essere trattato come un confine di sicurezza. Abbinalo a credenziali limitate, radici del filesystem e account di test.
ego (lite) può sostituire Playwright MCP?
ego (lite) è la scelta migliore quando il lavoro richiede un vero stato di login che hai approvato. Non sostituisce Playwright Test o le integrazioni specifiche di MCP.
