Sådan bruger du Claude Code med Playwright MCP: En komplet opsætningsvejledning

Hvad er Playwright MCP?

Playwright MCP-serveren giver enhver Model Context Protocol-klient browser-automationsbeføjelser. I stedet for at bede en AI om at “se på” pixels returnerer serveren strukturerede accessibility snapshots af siden, og modellen interagerer med elementer via reference-ID. Det gør løkken hurtig, deterministisk og fri for vision-model-overhead. Det fungerer med VS Code, Cursor, Windsurf, Claude Desktop, Claude Code og enhver anden MCP-klient.

For Claude Code betyder det særligt, at agenten i din terminal nu kan åbne en browser, klikke rundt, udfylde formularer, mocke netværksanmodninger, tage skærmbilleder og endda udføre brugerdefinerede Playwright-scripts — alt drevet af naturligt sproget prompts.

Forudsætninger

Før du begynder, skal du sørge for at have:

• Node.js 18 eller nyere installeret
• Claude Code installeret og logget ind (kør claude i din terminal for at bekræfte)
• En terminal, du er komfortabel med at arbejde i

Det er alt — Playwright MCP downloader sine egne browser-binaries ved første kørsel.

Klar til at vokse din virksomhed?

Start din gratis prøveperiode i dag og se resultater inden for få dage.

Anmod om demo Log ind

Opsætning af Playwright MCP-integrationen

At forbinde Playwright MCP til Claude Code er en enkelt kommando. Følg disse trin for at forbinde det:

Tilføj Playwright MCP-serveren

Åbn din terminal og kør:

claude mcp add playwright npx @playwright/mcp@latest

Dette registrerer en ny MCP-server kaldet playwright, som Claude Code starter via npx, når den har brug for browserværktøjer. Den første invocation downloader pakken og de påkrævede browser-binaries, så giv det et minut første gang.

Bekræft forbindelsen

Start en ny Claude Code-session og kør /mcp-kommandoen:

claude

/mcp

Du skal se playwright anført som en forbundet server sammen med de værktøjer, den viser (navigation, klik, skrivning, skærmbilleder, netværks-mocking og mere).

Valgfrit: Brug en JSON-konfiguration i stedet

Hvis du foretrækker at redigere konfigurationsfiler direkte, kan den samme server tilføjes til ~/.claude.json (eller en projektscoped .mcp.json) ved hjælp af standard MCP-formatet:

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

Genstart Claude Code efter redigering af filen, og serveren vises i /mcp.

Din første browser-automatisering i Claude Code

Med serveren forbundet kan dine prompts nu køre en rigtig browser. Prøv den kanoniske første interaktion fra Playwright-dokumentationen:

Naviger til https://demo.playwright.dev/todomvc og tilføj nogle få todo-elementer.

Claude Code åbner browseren, anmoder om et accessibility snapshot af siden, finder inputtet efter dets element-reference, skriver hver todo og bekræfter resultatet tilbage til dig i terminalen.

Bemærk, hvilken browser der åbnes: som standard starter dette Chromium i headed-tilstand. For at ændre det skal du tilføje flag til args i din MCP-konfiguration og genstarte Claude Code: --headless for at skjule vinduet eller --browser=firefox|webkit|msedge for at skifte motorer.

Hvordan Accessibility Snapshots fungerer

Når et Playwright MCP-værktøj køres, returnerer det et struktureret snapshot af siden — element-roller, tekstindhold og reference-ID’er — i stedet for pixels. Claude læser snapshotten og bruger referencer som ref=e5 til at skrive i tekstboksen eller ref=e10 til at flippe afkrydsningsfeltet. Ingen pixel-pushing, ingen skrøbelige CSS-selektorer — bare struktureret sidetilstand, som modellen kan ræsonnere om.

Tilmeld dig vores nyhedsbrev

Få de seneste tips, trends og tilbud gratis.

E-mailadresse

Tilmeld

Kernefunktionaliteter, du kan bruge fra Claude Code

Når Playwright MCP er forbundet, fungerer de samme prompts, som du ville give en holdkammerat i Claude Code:

• Navigation: “Gå til example.com,” “gå tilbage,” “genindlæs siden.”
• Klik og skrivning: “Klik på Send-knappen,” “udfyld email-feltet med test@example.com .”
• Skærmbilleder: “Tag et skærmbillede af prisafsnittet.”
• Tastatur og mus: Tryk på taster, hold over, træk og slip.
• Faner og dialoger: Åbn nye faner, skift mellem dem, accepter eller afvis pop-op’er.
• Netværksovervågning: “Vis anmodningerne, der er lavet siden sidens indlæsning.”
• API-mocking: “Mock /api/users-slutpunktet for at returnere et tomt array.”
• Lagringsstilstand: Gem godkendte sessioner til en fil og genindlæs dem senere.

For arbejdsflows, der kræver mere end et enkelt værktøjskald, kan du bede Claude Code om at påkalde browser_run_code og udføre et Playwright-script inline — nyttigt til assertions, dataekstraktion eller hvad som helst, der har gavn af et par linjer imperativ kode.

Nyttige konfigurationsmuligheder

Playwright MCP har en håndfuld flag, der er værd at kende til. Tilføj dem til args-arrayet i din konfiguration (eller til claude mcp add-kommandoen efter --).

Headless-tilstand

Browseren kører headed som standard, så du kan se, hvad der sker. For at køre headless — nyttigt til CI eller fjernskaller — skal du overføre --headless:

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

Vælg en browser

Skift motorer med --browser-flaget. Understøttede værdier er chrome, firefox, webkit og msedge:

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

Profiltilstande

Playwright MCP understøtter tre profiltilstande:

• Persistent (standard): Loginstilstand og cookies vedvarer mellem sessioner.
• Isoleret: Overfør --isolated for at starte hver session frisk, eventuelt seedet med --storage-state.
• Browser-udvidelse: Overfør --extension for at knytte til dine eksisterende browserfaner via Playwright MCP Bridge-udvidelsen.

Standalone HTTP-server

Hvis du har brug for at køre en headed browser et sted uden en display tilsluttet (eller fra en IDE-worker), start serveren separat og forbind over HTTP.

Åbn en anden terminal — lad den køre for hele sessionen — og start serveren der:

npx @playwright/mcp@latest --port 8931

Hold den terminal åben. Det er det, der viser browseren på localhost:8931, så du kan se sessionen i din egen browser, og så Claude Code har noget at forbinde til. Lukning af terminalen lukker serveren ned.

Derefter, i terminalen, hvor du kører Claude Code, skal du pege på slutpunktet ved at opdatere din konfiguration:

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

Praktiske arbejdsflows værd at stjæle

Når Playwright MCP er forbundet, kan Claude Code håndtere end-to-end test-scaffolding, fejlgengivelser, API-mocking-checks, siderevision og release smoke-test — hvad som helst, der involverer at køre en browser og rapportere tilbage.

To ting gør disse prompts faktisk virker i praksis. For det første en CLAUDE.md i dit projektrod, der dokumenterer din staging-URL, demo-legitimationsoplysninger og alle konventioner, agenten skal følge — uden det har “log ind som demo-brugeren” intet at forankre til. For det andet, hvis du ønsker, at Claude Code skal trække kontekst fra problemer eller billetter, skal du forbinde en anden MCP-server til det — GitHub MCP-serveren er det almindelige valg. Spring begge over, og Claude Code vil (rimeligvis) spørge dig, hvad problemet #482 er.

Hvorfor parrer du Claude Code med Playwright MCP?

Et par grunde til, at denne kombination er svær at slå:

• Terminal-native: Alt sker, hvor du allerede arbejder. Ingen kontekstskift til en separat test-runner.
• Accessibility-first: Snapshots slår skærmbilleder for hastighed og pålidelighed, og de fungerer uden en vision-model.
• Real Playwright underneath: Alt, hvad du kan gøre med Playwright i kode, kan du gøre her — multi-browser, netværks-mocking, lagringsstilstand og mere.
• Komposabel med andre MCP-servere: Stak Playwright ved siden af GitHub, din database eller din monitoring MCP-server, og Claude Code kan flytte arbejde end-to-end på tværs af alle dem.
• Åben standard: MCP er bærbar. Den samme Playwright-server fungerer i Cursor, VS Code, Windsurf og Claude Desktop, hvis du skifter klienter.

Tilføj serveren, kør /mcp for at bekræfte, og din næste “gå test loginside”-prompt bliver en rigtig browsersession — drevet af Claude Code, set (eller ikke) i headed-tilstand og verificerbar gennem accessibility snapshots.