Playwright MCP in Claude Code: laat AI eigen werk controleren

Claude Code bouwt in tien minuten een feature waar jij een dag over zou doen. Daarna moet iemand controleren of het echt werkt: pagina openen, formulier invullen, doorklikken, kijken of de grafiek verschijnt.

Dat controleren gaat op veel plekken nog niet sneller sinds AI. Je bouwt meer functionaliteit in minder tijd, dus je hebt méér te testen dan voorheen. Handmatig alles nalopen wordt daarmee op sommige plekken het langzaamste onderdeel van het proces.

Playwright lost dat op door Claude zijn eigen werk te laten nakijken. Playwright is een oplossing van Microsoft voor het automatiseren van webbrowser gebruik. Zo kun je AI echte taken laten uitvoeren in een browser.

Eerst: wat is MCP?

Een coding agent kan uit zichzelf bestanden lezen en commando's uitvoeren. Een browser bedienen kan hij niet. Daarvoor heeft hij een verbinding met een externe tool nodig, en die verbinding loopt via MCP (afkorting voor Model Context Protocol).

De makkelijkste vergelijking is USB. Claude Code heeft een USB-poort, namelijk ondersteuning voor MCP-servers. Een MCP-server is de stekker: die vertelt Claude welke tools er beschikbaar zijn en hoe hij ze aanroept. Playwright, Google Drive en GitHub hebben allemaal MCP-servers.

Welke servers in jouw omgeving beschikbaar zijn, zie je met:

/mcp

Meer achtergrond over het protocol zelf staat in wat MCP is. En de onderliggende techniek waarmee een model tools kan aanroepen, is function calling.

Wat is Playwright?

Playwright is een open-source oplossing van Microsoft voor het automatiseren van webbrowser-gebruik. Playwright opent een echte browser en bedient die zoals jij dat zou doen, maar dan aangestuurd door Claude.

Concreet betekent dit dat Claude het volgende kan:

• Pagina's bezoeken en controleren of ze laden
• Klikken, typen, scrollen en navigeren tussen pagina's
• Controleren of bepaalde tekst, knoppen of grafieken zichtbaar zijn
• Foutmeldingen uit de browserconsole bekijken
• Screenshots maken van de huidige staat van de applicatie

Automatisch testen met AI feedbackloop

Hiermee ontstaat een kringetje dat zonder jou kan draaien.

Claude implementeert een wijziging. Playwright opent de applicatie en voert acties uit. De screenshots en foutmeldingen gaan terug naar Claude. Ziet hij dat het niet klopt, dan past hij het aan en begint de ronde opnieuw.

Voorheen zat jij in dat kringetje: bouwen, zelf kijken, terugkoppelen, opnieuw bouwen. Nu kijk je pas als deze loop tot een resultaat is gekomen.

Hoe stuur je de Playwright MCP aan?

Een valkuil is dat mensen te technisch gaan formuleren. Dat hoeft helemaal niet. Beschrijf de flow zoals je hem zelf zou doorlopen:

Open de applicatie en controleer of de grafiek zichtbaar is.

Vul het formulier in en controleer of de data wordt opgeslagen.

Navigeer naar de detailpagina en controleer of de juiste gegevens
worden getoond.

Maak met Playwright een screenshot van het dashboard om te bevestigen dat de nieuwe functionaliteit zichtbaar is. Sla de screenshot op in ./screenshots.

Werk je met acceptatiecriteria uit een user story of PRD, dan kun je die één-op-één gebruiken:

Maak per acceptatiecriterium een screenshot in ./screenshots.

Je krijgt dan een map met bewijs. Per criterium één afbeelding waar jij zo doorheen kunt.

Wil je dit vastleggen, zet het dan in je CLAUDE.md. Dan hoeft het niet elke keer in je prompt:

Bij elke nieuwe functionaliteit: maak screenshots voor elk
acceptatiecriterium in /screenshots.

Eén ding om op te letten is dat screenshots niet horen in je versiebeheer. Voeg deze map toe aan .gitignore, anders vult je repository zich met afbeeldingen die niemand nodig heeft en veel ruimte in beslag nemen.

Waar Playwright MCP niet voor werkt

Playwright controleert wat zichtbaar is in een browser. Niet alles gebeurt in de browser bij veel applicaties.

Verstuurt je applicatie een e-mail bij het aanmaken van een gebruiker, dan ziet Playwright dat niet. Hij ziet alleen de melding op het scherm dat er een e-mail is verstuurd, niet of dat echt gebeurd is. Voor dat soort controles heb je gewone tests nodig.

Ook is een Playwright-controle relatief langzaam en kostbaar. Er wordt een browser opgestart, pagina's worden geladen, screenshots worden gemaakt. Voor een kleine berekening is dat overdreven: die test je sneller en goedkoper met een normale test die alleen de functie zelf aanroept.

Het advies dat ik in mijn trainingen geef: gebruik Playwright voor een beperkt aantal belangrijke gebruikersflows, en gewone tests voor de logica eronder.

Waarom automatisch testen met AI steeds belangrijker wordt

Zolang jij elke wijziging zelf nakijkt, ben jij de rem op het proces. Een agent die zelf kan vaststellen of het doel bereikt is, kan doorwerken tot het klaar is in plaats van te stoppen bij "ik denk dat dit werkt".

Dat verschuift ook je eigen rol. Je bepaalt wat er gecontroleerd moet worden, en je beoordeelt het bewijs. Het uitvoeren zelf besteed je uit. Meer over dat evalueren van AI-resultaten staat in AI-output evalueren.

Wil jij dit ook leren?

In onze Vibe Coding Training leer je in twee dagen websites en apps bouwen met AI, zonder programmeerervaring. Wil je specifiek met Claude werken? Bekijk dan de Claude Code Training. En voor een complete basis in AI zonder programmeren is er de 5-daagse AI Opleiding.