Så här använder du Claude Code med Playwright MCP: En komplett installationsguide

Vad är Playwright MCP?

Playwright MCP-servern ger alla Model Context Protocol-klienter webbläsarautomationsöverkrafter. Istället för att be en AI att “titta på” pixlar returnerar servern strukturerade accessibility snapshots av sidan, och modellen interagerar med element efter referens-ID. Det gör slingan snabb, deterministisk och fri från visionmodellskostnader. Det fungerar med VS Code, Cursor, Windsurf, Claude Desktop, Claude Code och alla andra MCP-klienter.

För Claude Code i synnerhet betyder det att agenten i din terminal nu kan öppna en webbläsare, klicka runt, fylla formulär, mocka nätverksbegäranden, fånga skärmbilder och till och med köra anpassade Playwright-skript — allt drivet från naturliga språkprompts.

Förutsättningar

Innan du börjar, se till att du har:

• Node.js 18 eller senare installerat
• Claude Code installerad och inloggad (kör claude i din terminal för att verifiera)
• En terminal som du är bekväm med att arbeta i

Det är allt — Playwright MCP laddar ner sina egna webbläsarbinärer vid första körningen.

Redo att växa ditt företag?

Starta din kostnadsfria provperiod idag och se resultat inom några dagar.

Begär demo Logga in

Ställa in Playwright MCP-integreringen

Att ansluta Playwright MCP till Claude Code är ett enda kommando. Följ dessa steg för att ansluta det:

Lägg till Playwright MCP-servern

Öppna din terminal och kör:

claude mcp add playwright npx @playwright/mcp@latest

Detta registrerar en ny MCP-server med namnet playwright som Claude Code startar via npx när den behöver webbläsarverktyg. Den första anropningen laddar ner paketet och de nödvändiga webbläsarbinärerna, så ge det en minut första gången.

Verifiera anslutningen

Starta en ny Claude Code-session och kör kommandot /mcp:

claude

/mcp

Du bör se playwright listad som en ansluten server tillsammans med de verktyg den exponerar (navigering, klickning, skrivning, skärmbilder, nätverksmocking och mer).

Valfritt: Använd en JSON-konfiguration istället

Om du föredrar att redigera konfigurationsfiler direkt kan samma server läggas till i ~/.claude.json (eller en projektomfattad .mcp.json) med standardformatet för MCP:

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

Starta om Claude Code efter att ha redigerat filen och servern kommer att visas i /mcp.

Din första webbläsarautomation i Claude Code

Med servern ansluten kan dina prompts nu köra en riktig webbläsare. Prova den kanoniska första interaktionen från Playwright-dokumentationen:

Navigera till https://demo.playwright.dev/todomvc och lägg till några todo-objekt.

Claude Code kommer att öppna webbläsaren, begära en accessibility snapshot av sidan, hitta inmatningen efter dess elementreferens, skriva varje todo och bekräfta resultatet för dig i terminalen.

Notering om vilken webbläsare som öppnas: som standard startas detta med Chromium i headed mode. För att ändra det lägger du till flaggor i args i din MCP-konfiguration och startar om Claude Code: --headless för att dölja fönstret, eller --browser=firefox|webkit|msedge för att byta motorer.

Hur Accessibility Snapshots fungerar

När ett Playwright MCP-verktyg körs returnerar det en strukturerad snapshot av sidan — elementroller, textinnehål och referens-ID:n — istället för pixlar. Claude läser snapshoten och använder referenser som ref=e5 för att skriva in i textboxen eller ref=e10 för att vända kryssrutan. Ingen pixelpressning, inga sköraste CSS-väljare — bara strukturerad sidtillstånd som modellen kan resonera om.

Gå med i vårt nyhetsbrev

Få de senaste tipsen, trenderna och erbjudandena gratis.

E-postadress

Prenumerera

Kärnfunktioner du kan använda från Claude Code

När Playwright MCP är ansluten fungerar samma prompts som du skulle ge en lagkamrat i Claude Code:

• Navigering: “Gå till example.com,” “gå tillbaka,” “ladda om sidan.”
• Klickning och skrivning: “Klicka på Skicka-knappen,” “fyll i e-postfältet med test@example.com .”
• Skärmbilder: “Ta en skärmbilder av prissektionen.”
• Tangentbord och mus: Tryck på tangenter, hovra, dra och släpp.
• Flikar och dialogrutor: Öppna nya flikar, växla mellan dem, acceptera eller avvisa popup-fönster.
• Nätverksövervakning: “Lista begäranden som gjorts sedan sidladdning.”
• API-mocking: “Mocka /api/users-slutpunkten för att returnera en tom array.”
• Lagringsstillstånd: Spara autentiserade sessioner till en fil och ladda dem senare.

För arbetsflöden som behöver mer än ett enda verktygsanrop kan du be Claude Code att anropa browser_run_code och köra ett Playwright-skript inline — användbart för påståenden, datautvinning eller vad som helst som gynnas av några rader imperativ kod.

Användbara konfigurationsalternativ

Playwright MCP har en handfull flaggor som är värda att känna till. Lägg till dem i args-matrisen i din konfiguration (eller till claude mcp add-kommandot efter --).

Headless-läge

Webbläsaren körs headed som standard så du kan se vad som händer. För att köra headless — användbart för CI eller fjärrshells — skicka --headless:

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

Välj en webbläsare

Byt motorer med flaggan --browser. Värden som stöds är chrome, firefox, webkit och msedge:

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

Profillägen

Playwright MCP stöder tre profillägen:

• Persistent (standard): Inloggningsstillstånd och cookies kvarstår mellan sessioner.
• Isolerad: Skicka --isolated för att starta varje session från början, valfritt seedat med --storage-state.
• Webbläsartillägg: Skicka --extension för att ansluta till dina befintliga webbläsarflikar via Playwright MCP Bridge-tillägget.

Fristående HTTP-server

Om du behöver köra en headed webbläsare någonstans utan en ansluten skärm (eller från en IDE-worker) startar du servern separat och ansluter via HTTP.

Öppna en andra terminal — låt den köra under hela sessionen — och starta servern där:

npx @playwright/mcp@latest --port 8931

Håll den terminalen öppen. Det är det som exponerar webbläsaren på localhost:8931 så att du kan visa sessionen i din egen webbläsare och så att Claude Code har något att ansluta till. Att stänga terminalen stänger servern.

Sedan, i terminalen där du kör Claude Code, pekar du på slutpunkten genom att uppdatera din konfiguration:

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

Praktiska arbetsflöden värdiga att stjäla

När Playwright MCP är ansluten kan Claude Code hantera end-to-end-testställningar, buggreproduktioner, API-mockingkontroller, sidrevisioner och release-röktest — vad som helst som innebär att köra en webbläsare och rapportera tillbaka.

Två saker gör att dessa prompts faktiskt fungerar i praktiken. För det första en CLAUDE.md i din projektrots som dokumenterar din staging-URL, demo-autentiseringsuppgifter och alla konventioner som agenten bör följa — utan det har “logga in som demouser” ingenting att förankra till. För det andra, om du vill att Claude Code ska hämta kontext från problem eller biljetter, ansluter du en andra MCP-server för det — GitHub MCP-servern är det vanliga valet. Hoppa över båda och Claude Code kommer (rimligt) att fråga dig vad problem #482 är.

Varför para Claude Code med Playwright MCP?

Ett par anledningar till att denna kombination är svår att slå:

• Terminal-native: Allt händer där du redan arbetar. Ingen kontextbyte till en separat testlöpare.
• Accessibility-first: Snapshots slår skärmbilder för hastighet och tillförlitlighet, och de fungerar utan en visionmodell.
• Riktig Playwright under huven: Vad som helst du kan göra med Playwright i kod kan du göra här — flerbläsare, nätverksmocking, lagringsstillstånd och mer.
• Sammanställbar med andra MCP-servrar: Stapla Playwright tillsammans med GitHub, din databas eller din övervaknings-MCP-server och Claude Code kan flytta arbete från slutpunkt till slutpunkt över alla dem.
• Öppen standard: MCP är portabel. Samma Playwright-server fungerar i Cursor, VS Code, Windsurf och Claude Desktop om du byter klienter.

Lägg till servern, kör /mcp för att bekräfta, och din nästa “gå och testa inloggningssidan” prompt blir en riktig webbläsarsession — driven av Claude Code, bevakad (eller inte) i headed mode, och verifierbar genom accessibility snapshots.