Slik bruker du Claude Code med Playwright MCP: En komplett setupguide

Hva er Playwright MCP?

Playwright MCP-serveren gir enhver Model Context Protocol-klient nettleserautomatiseringskrefter. I stedet for å be en AI om å “se på” piksler, returnerer serveren strukturerte tilgjengelighetssnapshots av siden, og modellen samhandler med elementer etter referanse-ID. Det gjør løkken rask, deterministisk og fri for visjonmodellkostnader. Det fungerer med VS Code, Cursor, Windsurf, Claude Desktop, Claude Code og enhver annen MCP-klient.

For Claude Code spesielt betyr dette at agenten i terminalen din nå kan åpne en nettleser, klikke rundt, fylle skjemaer, mocke nettverksforespørsler, ta skjermbilder og til og med kjøre egne Playwright-skript — alt drevet fra naturlige språkforespørsler.

Forutsetninger

Før du begynner, må du ha:

• Node.js 18 eller nyere installert
• Claude Code installert og innlogget (kjør claude i terminalen din for å verifisere)
• En terminal du er komfortabel med å arbeide i

Det er det — Playwright MCP laster ned sine egne nettleserbinærer ved første kjøring.

Klar til å vokse bedriften din?

Start din gratis prøveperiode i dag og se resultater i løpet av få dager.

Be om demo Logg inn

Oppsett av Playwright MCP-integrasjonen

Tilkobling av Playwright MCP til Claude Code er en enkelt kommando. Følg disse trinnene for å koble det opp:

Legg til Playwright MCP-serveren

Åpne terminalen din og kjør:

claude mcp add playwright npx @playwright/mcp@latest

Dette registrerer en ny MCP-server kalt playwright som Claude Code starter via npx når den trenger nettleserverktøy. Den første oppkjøringen laster ned pakken og de nødvendige nettleserbinærene, så gi den et minutt første gang.

Verifiser tilkoblingen

Start en ny Claude Code-økt og kjør /mcp-kommandoen:

claude

/mcp

Du bør se playwright oppført som en tilkoblet server, sammen med verktøyene den eksponerer (navigasjon, klikking, skriving, skjermbilder, nettverksmocking og mer).

Valgfritt: Bruk en JSON-konfig i stedet

Hvis du foretrekker å redigere konfigfiler direkte, kan den samme serveren legges til ~/.claude.json (eller en prosjektscoped .mcp.json) ved hjelp av standard MCP-format:

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

Start Claude Code på nytt etter redigering av filen og serveren vil vises i /mcp.

Din første nettleserautomatisering i Claude Code

Med serveren tilkoblet, kan promptene dine nå kjøre en ekte nettleser. Prøv den kanoniske første interaksjonen fra Playwright-dokumentasjonen:

Naviger til https://demo.playwright.dev/todomvc og legg til noen få gjøremål.

Claude Code vil åpne nettleseren, be om et tilgjengelighetssnapshot av siden, finne inndatafeltet etter elementreferansen, skrive hvert gjøremål og bekrefte resultatet tilbake til deg i terminalen.

Merk deg hvilken nettleser som åpnes: som standard starter dette Chromium i headed-modus. For å endre det, legg til flagg i args i MCP-konfigurasjonen din og start Claude Code på nytt: --headless for å skjule vinduet, eller --browser=firefox|webkit|msedge for å bytte motor.

Slik fungerer tilgjengelighetssnapshots

Når et Playwright MCP-verktøy kjøres, returnerer det et strukturert snapshot av siden — elementroller, tekstinnhold og referanse-ID-er — i stedet for piksler. Claude leser snapshoten og bruker referanser som ref=e5 for å skrive inn i tekstboksen eller ref=e10 for å slå av avmerkingsboksen. Ingen pikselpressing, ingen skjør CSS-velgere — bare strukturert sidetilstand som modellen kan resonnere om.

Bli med i vårt nyhetsbrev

Få de siste tipsene, trendene og tilbudene gratis.

E-postadresse

Abonner

Kjernefunksjoner du kan bruke fra Claude Code

Når Playwright MCP er koblet opp, fungerer de samme promptene du ville gi en lagkamerat i Claude Code:

• Navigasjon: “Gå til example.com,” “gå tilbake,” “last siden på nytt.”
• Klikking og skriving: “Klikk på Send-knappen,” “fyll e-postfeltet med test@example.com .”
• Skjermbilder: “Ta et skjermbilde av prisavsnittet.”
• Tastatur og mus: Trykk på taster, hold musepekeren over, dra og slipp.
• Faner og dialogbokser: Åpne nye faner, bytt mellom dem, godta eller avvis popup-vinduer.
• Nettverksovervåking: “Vis forespørslene som ble gjort siden sidinnlasting.”
• API-mocking: “Mock /api/users-endepunktet for å returnere en tom matrise.”
• Lagringsstatus: Lagre autentiserte økter til en fil og last dem inn på nytt senere.

For arbeidsflyten som trenger mer enn et enkelt verktøykall, kan du be Claude Code om å påkalle browser_run_code og kjøre et Playwright-skript inline — nyttig for påstander, datautvinning eller alt som har nytte av noen få linjer imperativ kode.

Nyttige konfigurasjonsalternativer

Playwright MCP har en håndfull flagg som er verdt å kjenne til. Legg dem til args-matrisen i konfigurasjonen din (eller til claude mcp add-kommandoen etter --).

Headless-modus

Nettleseren kjøres headed som standard slik at du kan se hva som skjer. For å kjøre headless — nyttig for CI eller eksterne skall — send --headless:

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

Velg en nettleser

Bytt motorer med --browser-flagget. Støttede verdier er chrome, firefox, webkit og msedge:

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

Profilmodus

Playwright MCP støtter tre profilmodus:

• Vedvarende (standard): Innloggingsstatus og informasjonskapsler vedvarer mellom økter.
• Isolert: Send --isolated for å starte hver økt frisk, eventuelt seeded med --storage-state.
• Nettlesertillegg: Send --extension for å knytte til dine eksisterende nettleserfaner via Playwright MCP Bridge-utvidelsen.

Frittstående HTTP-server

Hvis du trenger å kjøre en headed nettleser et sted uten skjermdisplay (eller fra en IDE-arbeider), start serveren separat og koble til over HTTP.

Åpne en andre terminal — la den kjøre for hele økten — og start serveren der:

npx @playwright/mcp@latest --port 8931

Hold den terminalen åpen. Det er det som eksponerer nettleseren på localhost:8931 slik at du kan se økten i din egen nettleser og slik at Claude Code har noe å koble til. Lukking av terminalen slår serveren av.

Deretter, i terminalen der du kjører Claude Code, peker du den på endepunktet ved å oppdatere konfigurasjonen din:

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

Praktiske arbeidsflyten som er verdt å stjele

Når Playwright MCP er tilkoblet, kan Claude Code håndtere end-to-end-test-stillas, feilgjengivelser, API-mockingkontroller, siderevisjonerer og frigjøringssmoketester — alt som innebærer å kjøre en nettleser og rapportere tilbake.

To ting gjør disse promptene faktisk funksjonelle i praksis. Først en CLAUDE.md i prosjektroten din som dokumenterer staging-URL-en, demolegitimasjonen og konvensjoner agenten bør følge — uten det har “logg inn som demobrukeren” ingenting å forankre til. For det andre, hvis du vil at Claude Code skal hente kontekst fra problemer eller billetter, kobler du en andre MCP-server for det — GitHub MCP-serveren er det vanlige valget. Hopp over begge deler og Claude Code vil (rimelig) spørre deg hva problem #482 er.

Hvorfor parre Claude Code med Playwright MCP?

Et par grunner til at denne kombinasjonen er vanskelig å slå:

• Terminalinnebygd: Alt skjer der du allerede arbeider. Ingen kontekstbytte til en separat test-runner.
• Tilgjengelighetsfokusert: Snapshots slår skjermbilder for hastighet og pålitelighet, og de fungerer uten en visjonmodell.
• Ekte Playwright under: Alt du kan gjøre med Playwright i kode, kan du gjøre her — multi-nettleser, nettverksmocking, lagringsstatus og mer.
• Samensettbar med andre MCP-servere: Stable Playwright ved siden av GitHub, databasen din eller overvåkings-MCP-serveren din og Claude Code kan flytte arbeid end-to-end på tvers av alle dem.
• Åpen standard: MCP er bærbar. Den samme Playwright-serveren fungerer i Cursor, VS Code, Windsurf og Claude Desktop hvis du bytter klient.

Legg til serveren, kjør /mcp for å bekreftet, og neste “gå test innloggingssiden” prompt blir en ekte nettleseøkt — drevet av Claude Code, sett på (eller ikke) i headed-modus, og verifiserbar gjennom tilgjengelighetssnapshots.