Webbläsare via Playwright MCP

Ger agenten en riktig webbläsare som den kan navigera, klicka i och läsa av. För att testa det den byggt, fylla i formulär och hämta sidor som kräver JavaScript.

Typ
MCP-recept
Område
Kod
Verktyg
Claude Code, Cursor, Codex, Copilot
Uppdaterad
8 september 2026
.mcp.json
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--isolated",
        "--viewport-size=1280x800"
      ]
    }
  }
}

# Flaggor värda att känna till:
#
#   --isolated        Ny tom profil varje gång. Inga sparade inloggningar
#                     läcker till agenten. Ta bort flaggan om agenten ska
#                     återanvända en inloggad session, och förstå vad det
#                     innebär.
#   --headless        Ingen synlig webbläsare. Bra i CI, sämre när du vill
#                     se vad agenten gör.
#   --allowed-origins Begränsa vilka domäner agenten får besöka, till
#                     exempel "localhost:3000;staging.exempel.se".
#   --save-trace      Sparar en Playwright-trace för felsökning.
#
# Lägg till i CLAUDE.md eller AGENTS.md:
#
#   Efter varje UI-ändring: öppna sidan i webbläsaren, ta en skärmdump
#   och kontrollera att ändringen syns och att inga fel loggas i konsolen.

När den gör nytta

  • Agenten ska verifiera att en UI-ändring faktiskt fungerar i webbläsaren.
  • Skriva och köra end-to-end-tester mot en lokal utvecklingsserver.
  • Bevakning och datainsamling från sidor som inte har API.

Så installerar du

Claude Code
Spara som .mcp.json i projektets rot, eller lägg till med claude mcp add. Kör /mcp för att se status och logga in.
Cursor
Spara som .cursor/mcp.json i projektet. Samma JSON-format.
Codex
Lägg till servern i ~/.codex/config.toml under [mcp_servers]. Samma fält, TOML-syntax.

Om MCP-recept

Färdig konfiguration för att koppla en agent till en datakälla eller ett verktyg via Model Context Protocol.

Närliggande