Playwright MCP in Claude Code en Claude Desktop: zo doe je het, stap voor stap

Voorbereiding

Wat heb je nodig voor Playwright MCP?

Playwright MCP is een gratis MCP-server van Microsoft. Hij geeft Claude een eigen browser die hij kan openen, aanklikken en uitlezen. Claude kijkt daarbij niet naar schermafbeeldingen, maar naar de opbouw van de pagina zoals een schermlezer die ziet. Daardoor vindt hij knoppen en velden op naam. Wat je vooraf regelt, staat in de tabel.

Geen account nodig, wel een geschikte computer

Je hebt bij Microsoft of Playwright geen account nodig. De server draait op je eigen computer, met jouw rechten. Dat betekent ook: de browser die Claude opent, draait lokaal. Op een server zonder beeldscherm werkt het alleen met de optie --headless, waarover verderop meer.

Nog geen Claude Code?

Installeer het eerst via de Claude Code-installatiegids. Welk abonnement erbij hoort, lees je op Claude-abonnementen. Wil je eerst begrijpen wat MCP in het algemeen is, lees dan MCP en connectors.

Route kiezen

Playwright MCP, Claude in Chrome of de Playwright CLI: wat past bij jou?

Er zijn meer manieren om Claude een browser te geven. Ze lijken op elkaar, maar ze verschillen in één belangrijk punt: wiens browser het is. Playwright MCP start een aparte browser met een eigen profiel. Claude in Chrome werkt in jouw eigen Chrome, met de accounts waarop je al bent ingelogd. Kies op basis van de taak.

Wat Microsoft zelf zegt over MCP en CLI

De README van Playwright MCP is opvallend eerlijk. Werk je met een codeeragent zoals Claude Code, dan raadt Microsoft de Playwright CLI met skills aan, omdat die geen grote toolbeschrijvingen en paginaboom in het gesprek laadt. MCP blijft volgens Microsoft zinvol voor verkennend werk, zelfherstellende tests en lange taken waarin de browser open moet blijven. Voor een beginner is MCP de makkelijkste start: één commando, en je ziet direct wat Claude doet. Wil je later zuiniger werken, dan stap je over op de CLI.

En computer use?

Met computer use bedient Claude je hele scherm via schermafbeeldingen, ook programma's buiten de browser. Voor websites is dat trager en minder precies dan Playwright, dat de pagina als gestructureerde tekst leest. Gebruik computer use alleen als er geen browserroute is.

Claude Code

Playwright MCP installeren in Claude Code, stap voor stap

In Claude Code is het één commando in je gewone terminal, niet binnen een Claude-sessie. Anthropic gebruikt precies deze server als voorbeeld in de officiële quickstart, dus de stappen hieronder volgen die documentatie.

Waarom die twee streepjes

De README van Playwright noemt claude mcp add playwright npx @playwright/mcp@latest, zonder streepjes. Dat werkt, tot je er een optie achter zet die met een streepje begint, zoals --browser firefox. Dan probeert Claude Code die optie zelf te lezen. Met -- ertussen gaat alles daarachter ongewijzigd naar Playwright. Voorbeeld met Firefox: claude mcp add playwright -- npx -y @playwright/mcp@latest --browser firefox.

Liever via een plugin

Playwright staat ook als plugin in de officiële marketplace van Anthropic. Typ in een sessie /plugin install playwright@claude-plugins-official en kies een scope. De plugin start dezelfde server met npx @playwright/mcp@latest. Het voordeel: je beheert hem met je andere plugins. Het nadeel: de plugin start de server zonder extra opties, dus voor --browser of --isolated heb je toch het commando nodig. Voor deze tutorial raden we het commando hierboven aan.

Delen met je team via .mcp.json

Wil je dat iedereen die het project uit Git haalt dezelfde server krijgt, zet dan een bestand .mcp.json in de hoofdmap van je project:
{
"mcpServers": {
"playwright": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@playwright/mcp@0.0.83"]
}
}
}
We zetten hier bewust een vast versienummer in plaats van @latest, zodat je hele team dezelfde versie draait. Claude Code vraagt bij de eerste start of je de server vertrouwt. Dat is een bewuste beveiliging: een gekloonde repo mag geen programma's starten zonder jouw ja.

Claude Desktop

Playwright MCP in Claude Desktop zonder terminal

In Claude Desktop voeg je een lokale server toe via een configuratiebestand. Je typt geen commando, maar je plakt een blok tekst. Node.js moet wel op je computer staan, want Claude Desktop start de server met npx.

Het blok voor claude_desktop_config.json

Dit is de standaardconfiguratie uit de README van Playwright, met -y erbij zodat npx niets vraagt:
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["-y", "@playwright/mcp@latest"]
}
}
}
Het bestand staat op de Mac in ~/Library/Application Support/Claude/ en op Windows in %APPDATA%\Claude\. Opties zoals --browser of --isolated zet je als extra tekst in de lijst args, bijvoorbeeld ["-y", "@playwright/mcp@latest", "--browser", "msedge"].

Gebruik je Claude Code al? Neem hem over

Heb je Playwright al in Claude Desktop staan, dan kun je hem op macOS en WSL in één keer naar Claude Code halen met claude mcp add-from-claude-desktop.

Browser en inloggen

Welke browser gebruikt Playwright MCP, en hoe log je in?

Standaard opent Playwright MCP de Google Chrome die op je computer staat, met een zichtbaar venster en een eigen, permanent profiel per project. Dat profiel is niet je gewone Chrome-profiel. Daar lopen beginners het vaakst op vast. Met een paar opties stuur je dit bij.

Inloggen: drie manieren, van eenvoudig naar netjes

1. Eén keer zelf inloggen. Het standaardprofiel is permanent. Laat Claude de inlogpagina openen, log zelf in in het browservenster en ga dan verder. De volgende keer ben je in dit project nog ingelogd. 2. Een state-bestand. Met --isolated --storage-state state.json start elke sessie schoon, maar wel ingelogd. Zo maak je ingelogde tests herhaalbaar. 3. De extensie. Installeer de Playwright Extension uit de Chrome Web Store en start de server met --extension. Bij de eerste actie kies je zelf welk tabblad Claude mag gebruiken. Werkt alleen in Chrome en Edge.

Typ nooit je wachtwoord in het gesprek

Alles wat je in de chat zet, gaat naar Claude. Log dus zelf in in het browservenster, of gebruik een testaccount. Playwright heeft ook een optie --secrets met een bestand vol geheimen, maar voor een beginner is zelf inloggen in het venster veiliger en duidelijker.

Firefox of WebKit nog niet geïnstalleerd?

Kies je een browser die Playwright zelf moet downloaden, dan meldt de server dat die ontbreekt en noemt hij het commando. Typ dan in je terminal npx @playwright/mcp install-browser firefox (of webkit). Voor Chrome en Edge gebruikt Playwright de browser die al op je computer staat.

Werkt het?

Werkt Playwright MCP? Zo controleer je het in drie stappen

Een bevestiging na het toevoegen betekent alleen dat de instelling is opgeslagen. Controleer daarom op drie niveaus: de verbinding, de tools en een echte actie.

De eerste prompt om te plakken

Plak dit zodra de server verbonden is, en vervang het adres door je eigen site:
Gebruik playwright. Open https://jouwsite.nl en doe alleen het volgende: 1) noem de paginatitel, 2) noem alle links in het hoofdmenu, 3) maak een schermafbeelding van de hele pagina. Vul niets in, klik op niets anders dan nodig is om de pagina te laden, en vertel me welke tools je hebt gebruikt.
Waarom deze prompt: je ziet in één keer of lezen, navigeren en schermafbeeldingen werken. De regel "vul niets in" houdt de eerste test onschuldig, en de laatste zin laat zien welke stappen Claude echt in de browser zette.

Kijk hoeveel ruimte het kost

Typ na een paar acties /context in Claude Code. Een paginaopname (snapshot) van een grote pagina kan veel tokens kosten. Claude Code waarschuwt als één toolantwoord boven de 10.000 tokens komt en kapt standaard af op 25.000. Zie je dat vaak, lees dan de tips in het oordeel hieronder.

Eerste test

Je eerste test met Playwright MCP: een contactformulier controleren

Nu een echte taak. Een contactformulier is een goed begin: het is de plek waar een website ongemerkt kapot kan gaan, en je ziet direct of het werkt. Doe dit op een testomgeving of een lokale kopie van je site, niet op de live site met echte klantgegevens.

Wat je terugkrijgt, en wat je nog zelf nakijkt

Een goed antwoord noemt per stap wat Claude deed, of de bevestiging verscheen, en eventuele consolefouten, met een schermafbeelding in je projectmap. Wat vaak net niet klopt: Claude meldt "verstuurd" terwijl alleen de knop is ingedrukt en de bevestiging nog moest laden. Vraag daarom altijd expliciet om te controleren of een bepaalde tekst verschijnt. Kijk in het gegenereerde testbestand of er een echte controle (expect) in staat en niet alleen klikken.

Een mkb-voorbeeld

Een webwinkel met een klein team laat Claude na elke websitewijziging drie dingen nalopen: het contactformulier, het toevoegen van een product aan de winkelwagen tot vlak voor de betaalpagina, en de mobiele weergave van de homepage met --device "iPhone 15". Dat klikwerk deed iemand eerst met de hand, of niemand. Met de stappen hierboven wordt elke controle een testbestand dat je bij de volgende wijziging opnieuw draait.

Problemen oplossen

Playwright MCP werkt niet: melding, oorzaak en oplossing

Begin altijd met claude mcp list of claude mcp get playwright. Blijft de server falen, start dan het commando los in je terminal: npx -y @playwright/mcp@latest. Wacht het op invoer, dan werkt de server zelf en zit het probleem in de configuratie. Krijg je een fout, dan noemt die meestal wat er ontbreekt.

Ons oordeel

Ons oordeel: wanneer Playwright MCP de moeite waard is

Playwright MCP is een van de nuttigste servers voor wie met Claude Code aan een website of webapp werkt. Claude kan dan zelf zien of iets werkt, in plaats van dat jij het moet nakijken en terugmelden. Voor ander werk is het vaak de verkeerde tool.

Wanneer wel, wanneer niet

Wel: als je met Claude Code een site of app bouwt en wilt dat Claude na een wijziging zelf controleert of een pagina laadt, een formulier werkt of een knop zichtbaar is. Ook goed om een bug stap voor stap na te spelen. Niet: voor kantoorwerk in webapps waar je al bent ingelogd, zoals je CRM of boekhouding. Daar is Claude in Chrome of een officiële connector beter, met toestemmingen per site. En niet als je al een testsuite hebt die prima draait: dan laat je Claude die tests uitbreiden in plaats van met MCP rond te klikken.

De fout die we beginners het vaakst zien maken

Verwachten dat Claude in hun eigen browser werkt. Ze vragen Claude iets te doen in een webapp, Playwright opent een leeg profiel, en dan plakken ze hun wachtwoord in de chat. Doe dat niet. Begrijp eerst het verschil: Playwright MCP is een aparte testbrowser. Log daarin zelf in, gebruik een testaccount, of kies de extensie-route als het echt jouw sessie moet zijn.

Beveiliging: Playwright MCP is geen beveiligingsgrens

Dat schrijft Microsoft letterlijk in de README. Een webpagina kan verborgen instructies bevatten die Claude leest. Dat heet prompt injection. Ook staat de tool browser_run_code_unsafe standaard aan: die voert willekeurige code uit in het serverproces op jouw computer. Verbied die tool als je hem niet nodig hebt, met een deny-regel in .claude/settings.json:
{
"permissions": {
"allow": ["mcp__playwright__browser_navigate", "mcp__playwright__browser_snapshot"],
"deny": ["mcp__playwright__browser_run_code_unsafe"]
}
}
De allow-regel laat alleen navigeren en lezen zonder vraag door. Klikken en invullen blijven om goedkeuring vragen. Combineer een browsersessie nooit met een server die schrijfrechten heeft op je CRM of productiedatabase.

Twee Nederlandse aandachtspunten

AVG: de browser draait lokaal, maar alles wat Claude op een pagina leest, gaat mee in het gesprek naar Anthropic. Test je in een beheeromgeving met echte klantgegevens, dan stuur je persoonsgegevens mee. Gebruik daarom een testomgeving met nepdata, of een testaccount zonder klantdossiers. Zie ook privacy en zakelijk gebruik. Bewaarde inlog: het standaardprofiel blijft op je schijf staan, met cookies. Test je voor klanten, gebruik dan --isolated, zodat er na afloop niets achterblijft.

Zuiniger werken als het veel wordt

Elke paginaopname gaat het contextvenster in en telt mee voor je limiet. Vraag Claude om alleen het deel van de pagina te lezen dat ertoe doet, gebruik --mobile voor lichtere pagina's (dat noemt de README zelf als besparing), en zet de server uit in projecten zonder website via /mcp. Draai je dagelijks veel browsertests, kijk dan naar de Playwright CLI met npm install -g @playwright/cli@latest en playwright-cli install --skills. Meer over verbruik op Claude Code limieten.

Wat nu?

Wat nu? Je volgende stap na Playwright MCP

Werkt je eerste test, kies dan één flow op je eigen site die je deze week bij elke wijziging laat controleren. Na een week weet je of het tijd scheelt. Dit zijn logische vervolgstappen.

Je website bouwen en laten testen

Bouw je een site met Claude, volg dan een website bouwen met Claude en laat Playwright elke pagina nalopen. Werk je in een editor, dan helpt Claude Code in VS Code. Wil je dat tests draaien bij elke pull request, kijk dan naar Claude Code en GitHub en code review met Claude.

Claude Code beter inrichten

Zet in je CLAUDE.md dat Claude na elke wijziging aan de voorkant de pagina met Playwright controleert. Met hooks kun je daarna automatisch je testsuite laten draaien. Wil je meer servers toevoegen, dan staat de algemene route in een MCP-server toevoegen.

Andere manieren om Claude een browser te geven

Claude in Chrome voor werk in je eigen ingelogde browser. De officiële skill webapp-testing van Anthropic, die Playwright-scripts in Python schrijft, staat op Claude skills. En voor browsers in de cloud lees je ons stuk over Cloudflare Kitesurf.

Samen één testflow opzetten

Kom je er bij je eigen site niet uit, bijvoorbeeld omdat inloggen of een testomgeving lastig is? In een AI-werksessie van 90 minuten zetten we samen één werkende testflow op voor jouw site.