Jak používat Claude Code s Playwright MCP: Kompletní průvodce nastavením

Co je Playwright MCP?

Server Playwright MCP dává jakémukoli klientu Model Context Protocol schopnosti automatizace prohlížeče. Místo aby se AI byla dotazována, aby se „podívala" na pixely, server vrací strukturované snímky dostupnosti stránky a model komunikuje s prvky podle referenčního ID. To dělá smyčku rychlou, deterministickou a bez režie modelu vidění. Funguje s VS Code, Cursor, Windsurf, Claude Desktop, Claude Code a jakýmkoli jiným klientem MCP.

Pro Claude Code to konkrétně znamená, že agent ve vašem terminálu nyní může otevřít prohlížeč, klikat, vyplňovat formuláře, mockovat síťové požadavky, pořizovat snímky obrazovky a dokonce spouštět vlastní Playwright skripty — vše řízeno přirozeným jazykem.

Předpoklady

Než začnete, ujistěte se, že máte:

• Node.js 18 nebo novější nainstalovaný
• Claude Code nainstalovaný a přihlášený (spusťte claude v terminálu, abyste ověřili)
• Terminál, ve kterém se cítíte pohodlně pracovat

To je vše — Playwright MCP si při prvním spuštění stáhne vlastní binární soubory prohlížeče.

Připraveni rozšířit své podnikání?

Začněte svou bezplatnou zkušební verzi ještě dnes a viďte výsledky během několika dní.

Požádat o demo Přihlásit se

Nastavení integrace Playwright MCP

Připojení Playwright MCP k Claude Code je jednoduchý příkaz. Postupujte podle těchto kroků:

Přidejte server Playwright MCP

Otevřete svůj terminál a spusťte:

claude mcp add playwright npx @playwright/mcp@latest

To registruje nový server MCP s názvem playwright, který Claude Code spouští přes npx vždy, když potřebuje nástroje prohlížeče. První vyvolání si stáhne balíček a požadované binární soubory prohlížeče, takže si dajte chvíli čas při prvním spuštění.

Ověřte připojení

Spusťte novou relaci Claude Code a spusťte příkaz /mcp:

claude

/mcp

Měli byste vidět playwright uvedený jako připojený server spolu s nástroji, které vystavuje (navigace, klikání, psaní, snímky obrazovky, mockování sítě a další).

Volitelné: Místo toho použijte konfiguraci JSON

Pokud dáváte přednost přímé úpravě konfiguračních souborů, stejný server lze přidat do ~/.claude.json (nebo do projektu s oborem .mcp.json) pomocí standardního formátu MCP:

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

Po úpravě souboru restartujte Claude Code a server se objeví v /mcp.

Vaše první automatizace prohlížeče v Claude Code

S připojeným serverem mohou vaše výzvy nyní řídit skutečný prohlížeč. Vyzkoušejte kanonickou první interakci z dokumentace Playwright:

Přejděte na https://demo.playwright.dev/todomvc a přidejte několik položek úkolů.

Claude Code otevře prohlížeč, požádá o snímek dostupnosti stránky, vyhledá vstup podle jeho referenčního prvku, zadá každý úkol a potvrdí výsledek zpět v terminálu.

Pozor na to, který prohlížeč se otevře: ve výchozím nastavení se spustí Chromium v headed režimu. Chcete-li jej změnit, přidejte příznaky do args v konfiguraci MCP a restartujte Claude Code: --headless pro skrytí okna nebo --browser=firefox|webkit|msedge pro přepnutí motorů.

Jak fungují snímky dostupnosti

Když se spustí nástroj Playwright MCP, vrací strukturovaný snímek stránky — role prvků, textový obsah a referenční ID — místo pixelů. Claude přečte snímek a používá reference jako ref=e5 k zadání do textového pole nebo ref=e10 k přepnutí zaškrtávacího políčka. Žádné tlačení pixelů, žádné křehké selektory CSS — jen strukturovaný stav stránky, o kterém model může uvažovat.

Přihlaste se k odběru newsletteru

Získejte nejnovější tipy, trendy a nabídky zdarma.

E-mailová adresa

Přihlásit se

Základní schopnosti, které můžete používat z Claude Code

Jakmile je Playwright MCP připojen, stejné výzvy, které byste dali kolegovi, fungují v Claude Code:

• Navigace: “Jdi na example.com,” “jdi zpět,” “znovu načti stránku.”
• Klikání a psaní: “Klikni na tlačítko Odeslat,” “vyplň pole e-mailu pomocí test@example.com .”
• Snímky obrazovky: “Pořiď snímek obrazovky sekce ceny.”
• Klávesnice a myš: Stiskni klávesy, najeď myší, přetahuj a pusť.
• Záložky a dialogy: Otevři nové záložky, přepínej mezi nimi, přijmi nebo zavrhni vyskakovací okna.
• Monitorování sítě: “Vypis požadavky provedené od načtení stránky.”
• Mockování API: “Mockuj koncový bod /api/users tak, aby vrátil prázdné pole.”
• Stav úložiště: Ulož ověřené relace do souboru a znovu je načti později.

Pro pracovní postupy, které potřebují více než jeden volání nástroje, můžete Claude Code požádat, aby vyvolal browser_run_code a spustil Playwright skript inline — užitečné pro tvrzení, extrakci dat nebo cokoli, co prospívá několika řádkům imperativního kódu.

Užitečné možnosti konfigurace

Playwright MCP má několik příznaků, které stojí za zmínku. Přidejte je do pole args v konfiguraci (nebo do příkazu claude mcp add za --).

Bezheadový režim

Prohlížeč se spouští v headed režimu, abyste viděli, co se děje. Chcete-li spustit bezheadový režim — užitečný pro CI nebo vzdálené shellyy — předejte --headless:

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

Vyberte si prohlížeč

Přepínejte motory pomocí příznaku --browser. Podporované hodnoty jsou chrome, firefox, webkit a msedge:

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

Režimy profilu

Playwright MCP podporuje tři režimy profilu:

• Trvalý (výchozí): Stav přihlášení a cookies se uchovávají mezi relacemi.
• Izolovaný: Předejte --isolated pro spuštění každé relace čistě, volitelně osazené pomocí --storage-state.
• Rozšíření prohlížeče: Předejte --extension pro připojení k vašim stávajícím záložkám prohlížeče prostřednictvím rozšíření Playwright MCP Bridge.

Samostatný HTTP server

Pokud potřebujete spustit headed prohlížeč někde bez připojeného displeje (nebo z pracovníka IDE), spusťte server odděleně a připojte se přes HTTP.

Otevřete druhý terminál — nechte jej běžet po celou dobu relace — a spusťte tam server:

npx @playwright/mcp@latest --port 8931

Nechte tento terminál otevřený. Je to to, co vystavuje prohlížeč na localhost:8931, abyste mohli relaci zobrazit v jejich vlastním prohlížeči a aby měl Claude Code něco, k čemu se připojit. Zavření terminálu vypne server.

Poté v terminálu, kde spouštíte Claude Code, jej nasměrujte na koncový bod aktualizací konfigurace:

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

Praktické pracovní postupy, které stojí za krádež

Jakmile je Playwright MCP připojen, Claude Code může zpracovávat vytváření end-to-end testů, reprodukci chyb, kontroly mockování API, audity stránek a smoke testy vydání — cokoli, co zahrnuje řízení prohlížeče a hlášení zpět.

Dvě věci dělají ty výzvy skutečně fungovat v praxi. První je CLAUDE.md v kořenu vašeho projektu, který dokumentuje vaši adresu URL stagingu, přihlašovací údaje demo a jakékoli konvence, které by měl agent dodržovat — bez toho “přihlášení jako demo uživatel” nemá nic, na co se opřít. Druhá, pokud chcete, aby Claude Code vytáhl kontext z problémů nebo lístků, připojte druhý server MCP — GitHub MCP server je běžná volba. Přeskočte obojí a Claude Code vás (rozumně) požádá, co je problém #482.

Proč párovat Claude Code s Playwright MCP?

Několik důvodů, proč je tato kombinace těžko porazitelná:

• Nativní terminál: Vše se děje tam, kde již pracujete. Žádný přechod kontextu do samostatného běžce testů.
• Přístupnost na prvním místě: Snímky poráží snímky obrazovky z hlediska rychlosti a spolehlivosti a fungují bez modelu vidění.
• Skutečný Playwright pod kapotou: Cokoli, co můžete dělat s Playwright v kódu, můžete dělat zde — multi-browser, mockování sítě, stav úložiště a další.
• Skládatelné s dalšími servery MCP: Stohuj Playwright vedle GitHub, tvé databáze nebo tvého monitorovacího serveru MCP a Claude Code může pohybovat prací end-to-end všechny.
• Otevřený standard: MCP je přenositelný. Stejný server Playwright funguje v Cursor, VS Code, Windsurf a Claude Desktop, pokud přepnete klienty.

Přidejte server, spusťte /mcp pro potvrzení a vaše další výzva “jdi testovat přihlašovací stránku” se stane skutečnou relací prohlížeče — řízenou Claude Code, sledovanou (nebo ne) v headed režimu a ověřitelnou prostřednictvím snímků dostupnosti.