Cum să utilizezi Claude Code cu Playwright MCP: Un ghid complet de configurare

Ce este Playwright MCP?

Serverul Playwright MCP oferă oricărui client Model Context Protocol superputeri de automatizare a browserului. În loc să ceri unui AI să „se uite la" pixeli, serverul returnează snapshot-uri structurate de accesibilitate ale paginii, iar modelul interacționează cu elementele prin ID de referință. Asta face bucla rapidă, deterministă și fără overhead-ul modelului de viziune. Funcționează cu VS Code, Cursor, Windsurf, Claude Desktop, Claude Code și orice alt client MCP.

Pentru Claude Code în particular, aceasta înseamnă că agentul din terminalul tău poate acum deschide un browser, da clic, completa formulare, simula cererile de rețea, captura capturi de ecran și chiar executa scripturi Playwright personalizate — toate conduse din prompt-uri în limbaj natural.

Cerințe preliminare

Înainte de a începe, asigură-te că ai:

• Node.js 18 sau mai nou instalat
• Claude Code instalat și conectat (rulează claude în terminalul tău pentru a verifica)
• Un terminal în care te simți confortabil să lucrezi

Asta e tot — Playwright MCP descarcă propriile binare ale browserului la prima execuție.

Pregătit să îți dezvolți afacerea?

Începe perioada de probă gratuită astăzi și vezi rezultate în câteva zile.

Solicită demo Autentificare

Configurarea integrării Playwright MCP

Conectarea Playwright MCP la Claude Code este o singură comandă. Urmează acești pași pentru a o configura:

Adaugă serverul Playwright MCP

Deschide terminalul tău și rulează:

claude mcp add playwright npx @playwright/mcp@latest

Aceasta înregistrează un nou server MCP numit playwright pe care Claude Code îl lansează prin npx ori de câte ori are nevoie de instrumente de browser. Prima invocare descarcă pachetul și binarii browserului necesari, deci dă-i un minut prima dată.

Verifică conexiunea

Pornește o nouă sesiune Claude Code și rulează comanda /mcp:

claude

/mcp

Ar trebui să vezi playwright listat ca server conectat, împreună cu instrumentele pe care le expune (navigare, clic, tastare, capturi de ecran, simulare de rețea și mai mult).

Opțional: utilizează o configurație JSON în schimb

Dacă preferi să editezi fișierele de configurare direct, același server poate fi adăugat la ~/.claude.json (sau un .mcp.json scoped la proiect) folosind formatul MCP standard:

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

Repornește Claude Code după editarea fișierului și serverul va apărea în /mcp.

Prima ta automatizare a browserului în Claude Code

Cu serverul conectat, prompt-urile tale pot acum controla un browser real. Încearcă interacțiunea canonică din documentația Playwright:

Navighează la https://demo.playwright.dev/todomvc și adaugă câteva articole todo.

Claude Code va deschide browserul, va cere un snapshot de accesibilitate al paginii, va localiza intrarea prin referința sa de element, va tasta fiecare todo și va confirma rezultatul înapoi ție în terminal.

Atenție cu privire la ce browser se deschide: în mod implicit aceasta lansează Chromium în modul headed. Pentru a-l schimba, adaugă indicatoare la args în configurația MCP și repornește Claude Code: --headless pentru a ascunde fereastra, sau --browser=firefox|webkit|msedge pentru a schimba motoarele.

Cum funcționează snapshot-urile de accesibilitate

Când se execută un instrument Playwright MCP, acesta returnează un snapshot structurat al paginii — roluri de elemente, conținut de text și ID-uri de referință — în loc de pixeli. Claude citește snapshot-ul și utilizează referințe precum ref=e5 pentru a tasta în textbox sau ref=e10 pentru a comuta caseta de selectare. Fără apăsare de pixeli, fără selectoare CSS fragile — doar starea paginii structurate pe care modelul o poate analiza.

Abonează-te la newsletter-ul nostru

Primește cele mai recente sfaturi, tendințe și oferte gratuit.

Adresă de email

Abonează-te

Capacități principale pe care le poți folosi din Claude Code

Odată ce Playwright MCP este conectat, aceleași prompt-uri pe care le-ai da unui coleg funcționează în Claude Code:

• Navigare: “Du-te la example.com,” “mergi înapoi,” “reîncarcă pagina.”
• Clic și tastare: “Dă clic pe butonul Submit,” “completează câmpul de e-mail cu test@example.com .”
• Capturi de ecran: “Fă o captură de ecran a secțiunii de prețuri.”
• Tastatură și mouse: Apasă taste, dă hover, trage și eliberează.
• File și dialoguri: Deschide file noi, comută între ele, acceptă sau respinge pop-up-uri.
• Monitorizarea rețelei: “Enumeră cererile făcute de la încărcarea paginii.”
• Simulare de API: “Simulează endpoint-ul /api/users pentru a returna o matrice goală.”
• Starea de stocare: Salvează sesiuni autentificate într-un fișier și reîncarcă-le mai târziu.

Pentru fluxurile de lucru care au nevoie de mai mult decât o singură apel de instrument, poți cere Claude Code să invoce browser_run_code și să execute un script Playwright inline — util pentru aserțiuni, extragere de date sau orice care beneficiază de câteva linii de cod imperativ.

Opțiuni de configurare utile

Playwright MCP are o mână de indicatoare care merită cunoscute. Adaugă-le la array-ul args în configurația ta (sau la comanda claude mcp add după --).

Modul Headless

Browserul se execută headed în mod implicit, deci poți urmări ce se întâmplă. Pentru a executa headless — util pentru CI sau shell-uri la distanță — transmite --headless:

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

Alege un browser

Schimbă motoarele cu indicatorul --browser. Valorile acceptate sunt chrome, firefox, webkit și msedge:

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

Moduri de profil

Playwright MCP suportă trei moduri de profil:

• Persistent (implicit): Starea de conectare și cookie-urile persistă între sesiuni.
• Izolat: Transmite --isolated pentru a începe fiecare sesiune de la zero, opțional semințată cu --storage-state.
• Extensie de browser: Transmite --extension pentru a te atașa la file-urile de browser existente prin extensia Playwright MCP Bridge.

Server HTTP independent

Dacă trebuie să execuți un browser headed undeva fără un ecran atașat (sau dintr-un worker IDE), lansează serverul separat și conectează-te prin HTTP.

Deschide un al doilea terminal — lasă-l să ruleze pentru întreaga sesiune — și pornește serverul acolo:

npx @playwright/mcp@latest --port 8931

Ține acel terminal deschis. Acesta este ceea ce expune browserul pe localhost:8931 deci poți vedea sesiunea în propriul tău browser și deci Claude Code are ceva cu care să se conecteze. Închiderea terminalului închide serverul.

Apoi, în terminalul în care execuți Claude Code, indică-l către endpoint actualizând configurația ta:

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

Fluxuri de lucru practice demne de furat

Odată ce Playwright MCP este conectat, Claude Code poate gestiona scaffold-ul testelor end-to-end, reproduceri de erori, verificări ale simulării API, audituri de pagini și teste de fumat la lansare — orice implică conducerea unui browser și raportarea înapoi.

Două lucruri fac ca acele prompt-uri să funcționeze cu adevărat în practică. În primul rând, un CLAUDE.md în rădăcina proiectului tău care documentează URL-ul tău de staging, acreditările demo și orice convenții pe care agentul ar trebui să le urmeze — fără aceasta, “conectează-te ca utilizatorul demo” nu are nimic pe care să se ancorez. În al doilea rând, dacă vrei ca Claude Code să extragă context din probleme sau bilete, conectează un al doilea server MCP pentru aceasta — serverul GitHub MCP este alegerea comună. Sari peste ambele și Claude Code va (în mod rezonabil) să te întrebe ce este problema #482.

De ce să perechi Claude Code cu Playwright MCP?

Câteva motive pentru care această combinație este greu de bătut:

• Nativ la terminal: Totul se întâmplă unde deja lucrezi. Fără comutare de context într-un executor de teste separat.
• Orientat pe accesibilitate: Snapshot-urile sunt mai bune decât capturile de ecran pentru viteză și fiabilitate, și funcționează fără un model de viziune.
• Playwright real sub capotă: Orice poți face cu Playwright în cod, poți face aici — multi-browser, simulare de rețea, starea de stocare și mai mult.
• Compozabil cu alte servere MCP: Stivuiește Playwright alături de GitHub, baza ta de date sau serverul tău MCP de monitorizare și Claude Code poate muta lucrul end-to-end în toate.
• Standard deschis: MCP este portabil. Același server Playwright funcționează în Cursor, VS Code, Windsurf și Claude Desktop dacă schimbi clienții.

Adaugă serverul, rulează /mcp pentru a confirma, și următorul tău prompt “du-te să testezi pagina de conectare” devine o sesiune de browser reală — condusă de Claude Code, urmărită (sau nu) în modul headed și verificabilă prin snapshot-uri de accesibilitate.