Ako používať Claude Code s Playwright MCP: Kompletný sprievodca nastavením

Čo je Playwright MCP?

Server Playwright MCP dáva akémukoľvek klientovi Model Context Protocol schopnosti automatizácie prehliadača. Namiesto toho, aby sa AI požiadalo, aby sa „pozrelo" na pixely, server vráti štruktúrované snímky dostupnosti stránky a model interaguje s prvkami podľa referenčného ID. To robí slučku rýchlu, deterministickú a bez režijných nákladov na model videnia. Funguje s VS Code, Cursor, Windsurf, Claude Desktop, Claude Code a akýmkoľvek iným klientom MCP.

Pre Claude Code konkrétne to znamená, že agent v vašom termináli môže teraz otvoriť prehliadač, klikať, vyplňovať formuláre, simulovať požiadavky siete, zachytávať snímky obrazovky a dokonca vykonávať vlastné skripty Playwright — všetko riadené z výziev v prirodzenom jazyku.

Predpoklady

Pred začatím sa uistite, že máte:

• Node.js 18 alebo novší nainštalovaný
• Claude Code nainštalovaný a prihlásený (spustite claude v termináli na overenie)
• Terminál, v ktorom sa cítite pohodlne pracovať

To je všetko — Playwright MCP si stiahne vlastné binárne súbory prehliadača pri prvom spustení.

Pripravení rozšíriť svoje podnikanie?

Začnite svoju 30-dňovú skúšobnú verziu ešte dnes a vidzte výsledky behom pár dní.

Požiadať o demo Prihlásiť sa

Nastavenie integrácie Playwright MCP

Pripojenie Playwright MCP k Claude Code je jediný príkaz. Postupujte podľa týchto krokov na jeho zapojenie:

Pridajte server Playwright MCP

Otvorte terminál a spustite:

claude mcp add playwright npx @playwright/mcp@latest

Toto registruje nový server MCP s názvom playwright, ktorý Claude Code spúšťa prostredníctvom npx vždy, keď potrebuje nástroje prehliadača. Prvé vyvolanie si stiahne balík a požadované binárne súbory prehliadača, takže mu dajte minútu prvý krát.

Overenie pripojenia

Spustite novú reláciu Claude Code a spustite príkaz /mcp:

claude

/mcp

Mali by ste vidieť playwright uvedený ako pripojený server spolu s nástrojmi, ktoré vystavuje (navigácia, klikanie, písanie, snímky obrazovky, simulácia siete a ďalšie).

Voliteľne: Namiesto toho použite konfiguráciu JSON

Ak uprednostňujete priame úpravy konfiguračných súborov, rovnaký server je možné pridať do ~/.claude.json (alebo do súboru .mcp.json s rozsahom projektu) pomocou štandardného formátu MCP:

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

Reštartujte Claude Code po úprave súboru a server sa objaví v /mcp.

Vaša prvá automatizácia prehliadača v Claude Code

S pripojením servera môžu vaše výzvy teraz riadiť skutočný prehliadač. Skúste kanonickú prvú interakciu z dokumentácie Playwright:

Navigujte na https://demo.playwright.dev/todomvc a pridajte niekoľko položiek úloh.

Claude Code otvorí prehliadač, požiada si snímok dostupnosti stránky, vyhľadá vstup podľa jeho referenčného ID prvku, napíše každú úlohu a potvrdí výsledok späť v termináli.

Upozornenie na to, ktorý prehliadač sa otvára: štandardne sa spúšťa Chromium v režime so UI. Ak to chcete zmeniť, pridajte vlajky do args vo vašej konfigurácii MCP a reštartujte Claude Code: --headless na skrytie okna alebo --browser=firefox|webkit|msedge na prepnutie motorov.

Ako fungujú snímky dostupnosti

Keď sa spustí nástroj Playwright MCP, vráti štruktúrovaný snímok stránky — role prvkov, obsah textu a referenčné ID — namiesto pixelov. Claude si prečíta snímok a používa referencie ako ref=e5 na písanie do textového poľa alebo ref=e10 na prepnutie zaškrtávacieho poľa. Bez posúvania pixelov, bez krehkých CSS selektorov — len štruktúrovaný stav stránky, o ktorom môže model uvažovať.

Prihláste sa na newsletter

Získajte najnovšie tipy, trendy a ponuky zadarmo.

Emailová adresa

Prihlásiť sa

Základné schopnosti, ktoré môžete používať z Claude Code

Keď je Playwright MCP zapojený, rovnaké výzvy, ktoré by ste dali kolegovi, fungujú v Claude Code:

• Navigácia: “Choď na example.com,” “choď späť,” “obnov stránku.”
• Klikanie a písanie: “Klikni na tlačidlo Odoslať,” “vyplň pole e-mailu pomocou test@example.com .”
• Snímky obrazovky: “Urob snímok obrazovky sekcie cien.”
• Klávesnica a myš: Stlačte klávesy, naviňte, ťahajte a pustite.
• Karty a dialógy: Otvorte nové karty, prepínajte medzi nimi, prijmite alebo odmietajte vyskakovacie okná.
• Monitorovanie siete: “Uveď požiadavky vykonané od načítania stránky.”
• Simulácia API: “Simuluj koncový bod /api/users, aby vrátil prázdne pole.”
• Stav úložiska: Uložte overené relácie do súboru a načítajte ich neskôr.

Pre pracovné postupy, ktoré potrebujú viac ako jedno volanie nástroja, môžete požiadať Claude Code, aby vyvolal browser_run_code a spustil skript Playwright v riadku — užitočné pre tvrdenia, extrahovanie údajov alebo čokoľvek, čo má prospech z niekoľkých riadkov imperatívneho kódu.

Užitočné možnosti konfigurácie

Playwright MCP má niekoľko vlajok, ktoré stojí za to vedieť. Pridajte ich do poľa args vo vašej konfigurácii (alebo do príkazu claude mcp add po --).

Režim bez UI

Prehliadač sa štandardne spúšťa so UI, aby ste videli, čo sa deje. Na spustenie bez UI — užitočné pre CI alebo vzdialené shell — prejdite --headless:

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

Vyberte prehliadač

Prepínajte motory pomocou vlajky --browser. Podporované hodnoty sú chrome, firefox, webkit a msedge:

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

Režimy profilov

Playwright MCP podporuje tri režimy profilov:

• Trvalý (predvolený): Stav prihlásenia a cookies trvajú medzi reláciami.
• Izolovaný: Prejdite --isolated na spustenie každej relácie od začiatku, voliteľne s počiatočným --storage-state.
• Rozšírenie prehliadača: Prejdite --extension na pripojenie k vašim existujúcim kartám prehliadača prostredníctvom rozšírenia Playwright MCP Bridge.

Samostatný server HTTP

Ak potrebujete spustiť prehliadač so UI niekde bez pripojeného displeja (alebo z pracovníka IDE), spustite server oddelene a pripojte sa prostredníctvom HTTP.

Otvorte druhý terminál — nechajte ho spustený počas celej relácie — a spustite tam server:

npx @playwright/mcp@latest --port 8931

Nechajte ten terminál otvorený. To je to, čo vystavuje prehliadač na localhost:8931, aby ste mohli vidieť reláciu vo svojom vlastnom prehliadači a aby mal Claude Code niečo, s čím sa má pripojiť. Zatvorenie terminálu vypne server.

Potom v termináli, kde spúšťate Claude Code, ho nasmerujte na koncový bod aktualizáciou vašej konfigurácie:

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

Praktické pracovné postupy, ktoré stojí za to si požičať

Keď je Playwright MCP pripojený, Claude Code môže zvládnuť tvorbu testov end-to-end, reprodukcie chýb, kontroly simulácie API, audity stránok a dymové testy vydania — čokoľvek, čo zahŕňa riadenie prehliadača a hlásenie späť.

Dve veci robia tieto výzvy skutočne praktické. Po prvé, CLAUDE.md v koreňovom adresári vášho projektu, ktorý dokumentuje vašu URL pracovného prostredia, poverenia demo a akékoľvek konvencie, ktoré by mal agent dodržiavať — bez neho má “prihlásenie ako demo používateľ” nič na ukotvenie. Po druhé, ak chcete, aby Claude Code získal kontext z problémov alebo lístkov, pripojte druhý server MCP — GitHub MCP server je bežná voľba. Preskočite oboje a Claude Code vás (rozumne) požiada, čo je problém #482.

Prečo spárovať Claude Code s Playwright MCP?

Niekoľko dôvodov, prečo je táto kombinácia ťažko poraziteľná:

• Natívny terminál: Všetko sa deje tam, kde už pracujete. Žiadny kontext switch do samostatného test runnera.
• Na dostupnosti zameraný: Snímky prekonávajú snímky obrazovky z hľadiska rýchlosti a spoľahlivosti a fungujú bez modelu videnia.
• Skutočný Playwright pod kapotou: Čokoľvek, čo môžete robiť s Playwright v kóde, môžete robiť tu — viacero prehliadačov, simulácia siete, stav úložiska a ďalšie.
• Zložiteľný s inými servermi MCP: Nasúťajte Playwright spolu s GitHub, vašou databázou alebo vašim serverom monitorovania MCP a Claude Code môže presúvať prácu end-to-end naprieč všetkými z nich.
• Otvorený štandard: MCP je prenositeľný. Rovnaký server Playwright funguje v Cursor, VS Code, Windsurf a Claude Desktop, ak prepnete klientov.

Pridajte server, spustite /mcp na potvrdenie a vaša ďalšia výzva “choď testovať prihlásovaciu stránku” sa stane skutočnou reláciou prehliadača — riadená Claude Code, pozorovaná (alebo nie) v režime so UI a overiteľná prostredníctvom snímkov dostupnosti.