Hoe u Claude Code met Playwright MCP gebruikt: een volledige installatiegids

Wat is Playwright MCP?

De Playwright MCP-server geeft elke Model Context Protocol-client browserautomatiseringsmogelijkheden. In plaats van een AI te vragen om naar pixels te “kijken”, retourneert de server gestructureerde toegankelijkheidssnapshots van de pagina, en het model communiceert met elementen via referentie-ID. Dat maakt de loop snel, deterministisch en vrij van overhead van visiemodellen. Het werkt met VS Code, Cursor, Windsurf, Claude Desktop, Claude Code en elke andere MCP-client.

Voor Claude Code in het bijzonder betekent dit dat de agent in uw terminal nu een browser kan openen, rond kan klikken, formulieren kan invullen, netwerkaanvragen kan nabootsen, screenshots kan vastleggen en zelfs aangepaste Playwright-scripts kan uitvoeren — allemaal aangestuurd door natuurlijktaal-prompts.

Vereisten

Voordat u begint, zorg ervoor dat u het volgende hebt:

• Node.js 18 of nieuwer geïnstalleerd
• Claude Code geïnstalleerd en ingelogd (voer claude in uw terminal uit om te verifiëren)
• Een terminal waarin u zich comfortabel voelt werken

Dat is alles — Playwright MCP downloadt zijn eigen browserbinaries bij de eerste uitvoering.

Klaar om uw bedrijf te laten groeien?

Start vandaag uw gratis proefperiode en zie binnen enkele dagen resultaten.

Demo aanvragen Inloggen

De Playwright MCP-integratie instellen

Het verbinden van Playwright MCP met Claude Code is een enkel commando. Volg deze stappen om het in te stellen:

Voeg de Playwright MCP-server toe

Open uw terminal en voer uit:

claude mcp add playwright npx @playwright/mcp@latest

Dit registreert een nieuwe MCP-server met de naam playwright die Claude Code via npx start wanneer het browsertools nodig heeft. De eerste aanroep downloadt het pakket en de vereiste browserbinaries, dus geef het de eerste keer een minuut.

Controleer de verbinding

Start een nieuwe Claude Code-sessie en voer het /mcp-commando uit:

claude

/mcp

U zou playwright moeten zien vermeld als een verbonden server, samen met de tools die het blootstelt (navigatie, klikken, typen, screenshots, netwerknaabootsing en meer).

Optioneel: gebruik in plaats daarvan een JSON-configuratie

Als u liever rechtstreeks configuratiebestanden bewerkt, kan dezelfde server worden toegevoegd aan ~/.claude.json (of een projectbereik .mcp.json) met de standaard MCP-indeling:

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

Start Claude Code opnieuw op na het bewerken van het bestand en de server verschijnt in /mcp.

Uw eerste browserautomatisering in Claude Code

Met de server verbonden, kunnen uw prompts nu een echte browser aansturen. Probeer de canonieke eerste interactie uit de Playwright-documentatie:

Navigeer naar https://demo.playwright.dev/todomvc en voeg een paar taakitems toe.

Claude Code opent de browser, vraagt een toegankelijkheidssnapshot van de pagina aan, zoekt de invoer op basis van de elementreferentie, typt elk taakitem in en bevestigt het resultaat terug aan u in de terminal.

Let op welke browser wordt geopend: standaard wordt Chromium in modus met kop gestart. Om dit te wijzigen, voegt u vlaggen toe aan de args in uw MCP-configuratie en start u Claude Code opnieuw op: --headless om het venster te verbergen, of --browser=firefox|webkit|msedge om engines te wisselen.

Hoe toegankelijkheidssnapshots werken

Wanneer een Playwright MCP-tool wordt uitgevoerd, retourneert het een gestructureerde snapshot van de pagina — elementrollen, tekstinhoud en referentie-ID’s — in plaats van pixels. Claude leest de snapshot en gebruikt referenties zoals ref=e5 om in het tekstvak te typen of ref=e10 om het selectievakje om te schakelen. Geen pixelwerk, geen broze CSS-selectors — alleen gestructureerde paginastatus waarover het model kan redeneren.

Schrijf u in voor onze nieuwsbrief

Ontvang gratis de nieuwste tips, trends en aanbiedingen.

E-mailadres

Abonneren

Kernmogelijkheden die u van Claude Code kunt gebruiken

Zodra Playwright MCP is ingesteld, werken dezelfde prompts die u aan een teamgenoot zou geven in Claude Code:

• Navigatie: “Ga naar example.com,” “ga terug,” “vernieuw de pagina.”
• Klikken en typen: “Klik op de knop Indienen,” “vul het e-mailveld in met test@example.com .”
• Screenshots: “Maak een screenshot van de prijssectie.”
• Toetsenbord en muis: Druk op toetsen, beweeg eroverheen, sleep en zet neer.
• Tabbladen en dialoogvensters: Open nieuwe tabbladen, schakel ertussen, accepteer of verwerp pop-ups.
• Netwerkbewaking: “Vermeld de aanvragen die sinds het laden van de pagina zijn gedaan.”
• API-naabootsing: “Bootsen het /api/users-eindpunt na om een lege array te retourneren.”
• Opslagstatus: Sla geverifieerde sessies op in een bestand en laad ze later opnieuw.

Voor workflows die meer dan één gereedschapoproep nodig hebben, kunt u Claude Code vragen om browser_run_code aan te roepen en een Playwright-script inline uit te voeren — handig voor beweringen, gegevensextractie of alles wat baat heeft bij een paar regels imperatieve code.

Nuttige configuratieopties

Playwright MCP heeft een handvol vlaggen die het waard zijn om te kennen. Voeg ze toe aan de args-array in uw configuratie (of aan het claude mcp add-commando na --).

Koppeloze modus

De browser wordt standaard met kop uitgevoerd, zodat u kunt zien wat er gebeurt. Om koppeloze modus uit te voeren — handig voor CI of externe shells — geeft u --headless door:

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

Kies een browser

Wissel engines met de --browser-vlag. Ondersteunde waarden zijn chrome, firefox, webkit en msedge:

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

Profielmodi

Playwright MCP ondersteunt drie profielmodi:

• Persistent (standaard): Aanmeldingsstatus en cookies blijven behouden tussen sessies.
• Geïsoleerd: Geef --isolated door om elke sessie opnieuw te starten, optioneel geseedd met --storage-state.
• Browserextensie: Geef --extension door om aan uw bestaande browsertabbladen aan te hechten via de Playwright MCP Bridge-extensie.

Zelfstandige HTTP-server

Als u een browser ergens zonder weergave moet uitvoeren (of vanuit een IDE-worker), start u de server afzonderlijk en maakt u verbinding via HTTP.

Open een tweede terminal — houd deze de hele sessie open — en start de server daar:

npx @playwright/mcp@latest --port 8931

Houd die terminal open. Dit is wat de browser op localhost:8931 blootstelt, zodat u de sessie in uw eigen browser kunt bekijken en zodat Claude Code iets heeft om mee verbinding te maken. Het sluiten van de terminal sluit de server af.

Vervolgens wijst u het in de terminal waar u Claude Code uitvoert naar het eindpunt door uw configuratie bij te werken:

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

Praktische workflows die het stelen waard zijn

Zodra Playwright MCP is verbonden, kan Claude Code end-to-end-testscaffolding, bugreprodukties, API-naabootsingchecks, paginacontroles en release-rooktests verwerken — alles wat betrokken is bij het aansturen van een browser en rapportage terug.

Twee dingen maken die prompts in de praktijk echt werken. Ten eerste een CLAUDE.md in de projectroot die uw staging-URL, democredentials en alle conventies die de agent moet volgen, documenteert — zonder dit heeft “aanmelden als de demogebruiker” niets om aan vast te houden. Ten tweede, als u wilt dat Claude Code context uit problemen of tickets haalt, verbindt u een tweede MCP-server daarvoor — de GitHub MCP-server is de gebruikelijke keuze. Sla beide over en Claude Code zal (redelijkerwijs) u vragen wat probleem #482 is.

Waarom Claude Code met Playwright MCP combineren?

Een paar redenen waarom deze combinatie moeilijk te verslaan is:

• Terminalinheems: Alles gebeurt waar u al werkt. Geen contextswitch naar een aparte testrunner.
• Toegankelijkheidsgericht: Snapshots slaan screenshots voor snelheid en betrouwbaarheid, en ze werken zonder een visiemodel.
• Echte Playwright eronder: Alles wat u met Playwright in code kunt doen, kunt u hier doen — multi-browser, netwerknaabootsing, opslagstatus en meer.
• Samenstelbaar met andere MCP-servers: Stapel Playwright naast GitHub, uw database of uw monitoring MCP-server en Claude Code kan werk end-to-end over allemaal verplaatsen.
• Open standaard: MCP is draagbaar. Dezelfde Playwright-server werkt in Cursor, VS Code, Windsurf en Claude Desktop als u van clients wisselt.

Voeg de server toe, voer /mcp uit om te bevestigen, en uw volgende “ga de aanmeldingspagina testen”-prompt wordt een echte browsersessie — aangestuurd door Claude Code, bekeken (of niet) in modus met kop, en verifieerbaar via toegankelijkheidssnapshots.