Vai al contenuto

Testa la tua web app in un browser vero

Ricliccare gli stessi percorsi dopo ogni modifica è lento, e qualche bug sfugge comunque.

3 passaggiIntermedia
Claude CodeCursorPlaywrightGitHub

Come si collega

La tua IA raggiunge le tue app tramite piccoli connettori chiamati server MCP.
La tua IA
Claude CodeCursor
Connettori
PlaywrightGitHub
Le tue app
GitHub

Questa configurazione è pensata per sviluppatori e QA engineer che ritestano gli stessi percorsi utente dopo ogni modifica. L'agente pilota un browser vero tramite il server Playwright MCP di Microsoft, segue il percorso che descrivi in linguaggio normale e segnala cosa non funziona. Ottieni un esito riuscito o fallito per ogni percorso, e issue GitHub con i passi per riprodurre tutto ciò che è rotto.

Configuralo

3 passaggi. Aprine uno per i dettagli.
  1. 1Aggiungi Playwright MCP

    Registra il server Playwright MCP in Claude Code o Cursor con il comando npx @playwright/mcp@latest. Al primo avvio potrebbe chiederti di installare un browser; segui il messaggio o esegui npx playwright install. Chiedi all'agente di aprire il tuo URL di staging e descrivere la pagina per verificare che tutto funzioni.

    Consiglio: Aggiungi l'opzione --headless se non ti serve vedere il browser.

  2. 2Descrivi il percorso

    Descrivi il percorso passo per passo in linguaggio normale: l'URL, l'account di test, cosa cliccare o scrivere e com'è un risultato corretto. L'agente legge la pagina tramite snapshot di accessibilità: etichette dei pulsanti e nomi dei campi chiari lo aiutano a trovare gli elementi giusti. Chiedigli di indicare per ogni passo se è riuscito o fallito, con il testo dell'errore o uno screenshot in caso di problemi.

    Consiglio: Scrivi il risultato atteso per ogni passo, altrimenti l'agente deve indovinare cosa significa «funziona».

  3. 3Segnala i fallimenti

    Collega il server MCP di GitHub con il permesso di creare issue nel tuo repository. Chiedi all'agente di aprire una issue per ogni fallimento con i passi per riprodurlo, il risultato atteso e quello ottenuto, il browser usato ed eventuali errori in console. Rivedi ogni issue prima di approvarne la creazione.

    Consiglio: Chiedi all'agente di trasformare un percorso che si rompe spesso in un file di test Playwright da eseguire nella tua CI.

Poi chiedi e basta

Cosa dire una volta collegato. Clicca per copiare.
Chiedi a Claude Code…Claude Code

Da sapere

Cosa ti serve, cosa non fa e come restare al sicuro.
Cosa ti serve
  • Node.js installato in locale
  • Claude Code o Cursor
  • Ambiente di staging e account di test
  • Accesso al repository GitHub per creare issue
Limiti
  • L'agente può fraintendere pagine complesse o con etichette poco chiare e cliccare l'elemento sbagliato.
  • Le esecuzioni esplorative sono più lente e meno riproducibili di una suite di test scriptata.
  • CAPTCHA, richieste di autenticazione a due fattori e passaggi di verifica via email di solito richiedono un intervento manuale.
Resta al sicuro
  • Eseguilo sullo staging, non in produzione.
  • Usa account di test, mai le credenziali di clienti reali.

Domande frequenti

Risposte chiare prima di iniziare
Sostituisce la mia suite di test Playwright?
No. L'agente esplora i percorsi partendo da istruzioni in linguaggio normale, utile per controlli rapidi e nuove funzionalità. Per i controlli che devono girare a ogni commit, chiedigli di scrivere un file di test Playwright ed eseguilo nella tua CI.
Quali browser può usare?
Playwright MCP usa Chromium di default e si può configurare per usare Firefox, WebKit o un Chrome o Edge installato. Scegli il browser nelle opzioni da riga di comando del server.
Si può usare senza rischi in produzione?
Usalo sullo staging con account di test. L'agente clicca davvero i pulsanti e invia davvero i moduli: in produzione potrebbe effettuare ordini o mandare email.
È a pagamento?
Playwright e il suo server MCP sono gratuiti e open source. Paghi solo l'uso del tuo host IA, come Claude Code o Cursor.

Strumenti di questa configurazione

I prodotti coinvolti
GitHub: Hosting di codice, issue e pull request.
GitHub

GitHub è dove la maggior parte dei team software tiene il codice, revisiona le pull request e segue le issue. Actions gestisce CI e rilasci, Projects la pianificazione, e Copilot aggiunge l'aiuto dell'IA alla programmazione. Si collega a Slack, Linear e Jira. I repository pubblici e privati sono gratuiti, con piani a pagamento per team più grandi e funzioni di sicurezza.

Piano gratuitoProva