Playwright: Van Testrunner naar AI Agent-Interface

In 2017 bouwde Google Puppeteer om Chrome te automatiseren. In 2020 vertrokken de twee lead developers naar Microsoft en bouwden Playwright, dat hetzelfde idee volgt maar vanaf de eerste dag meerdere browsers ondersteunt. In april 2025 haalde Playwright Cypress in op npm downloads.

In maart 2025 bracht Microsoft Playwright MCP uit, een MCP-server die AI agents dezelfde browser laat bedienen als waarmee je tests schrijft. Binnen een jaar had de repository 25.000+ GitHub stars, met integraties voor tools waaronder Claude Code, Cursor, VS Code en GitHub Copilot. Playwright was een belangrijke browserautomatiseringsoptie voor AI agents geworden.

Met getByRole test je of Playwright de UI via roles en toegankelijke namen kan vinden. Die signalen ondersteunen ook Playwright MCP en andere snapshot-afhankelijke agents, zonder volledige interactie of taaksucces te bewijzen.

Playwright in Cijfers

Wat begon als een Puppeteer-alternatief heeft nu meer wekelijkse npm downloads dan Cypress, Puppeteer en Selenium:

Wekelijkse npm downloads in miljoenen. Bron: npm registry. Playwright ging van 56K wekelijkse downloads in 2020 naar 34M+ in 2026. Meer dan 12.400 bedrijven gebruiken het, waaronder Amazon, Apple, Microsoft en NVIDIA.

De 25.000+ stars op de Playwright MCP-repository wijzen op een tweede doelgroep. Dat aparte project laat AI agents Playwright bedienen, dus het reikt verder dan testsuites.

Wat is Playwright MCP?

MCP (Model Context Protocol) is de open standaard voor het verbinden van AI-assistenten met externe tools. Playwright MCP is Microsoft's officiële MCP-server die AI agents een browser geeft die ze kunnen bedienen. Het verscheen in maart 2025 als opensource browserautomatiseringsoptie voor compatibele agents.

Het biedt 70+ tools georganiseerd in capability groups: navigatie, klikken, typen, formulieren invullen, tabbeheer, PDF-generatie en meer. Voor dit artikel is browser_snapshot de meest relevante tool.

browser_snapshot: Hoe Agents een Pagina Lezen

Binnen Playwright MCP biedt browser_snapshot de accessibility tree van de browser als een YAML-geserialiseerde weergave van semantisch betekenisvolle elementen. Andere browseragentsystemen kunnen ook de DOM, screenshots of een combinatie van modaliteiten gebruiken.

# browser_snapshot output voor een loginformulier
- heading "Welkom terug" [level=2]
- textbox "E-mail" [required] (ref=1)
- textbox "Wachtwoord" [required] (ref=2)
- button "Inloggen" (ref=3)
- link "Wachtwoord vergeten?" (ref=4)
- link "Account aanmaken" (ref=5)

De snapshot bevat geen CSS-klassen, layout-divs of inline styles. Hij toont wat de pagina bevat en wat je ermee kunt doen. Elk interactief element krijgt een referentienummer en de agent stuurt "click ref 3" om in te loggen. De uitvoer is voorspelbaar en klein in tokens.

Playwright MCP draait in twee modi:

Snapshot-modus is de standaard en vision-modus is opt-in.

Wie Gebruikt Playwright MCP?

Playwright MCP werkt met een aantal veelgebruikte developertools:

Verschillende AI coding-tools hebben browsertoegang via Playwright MCP. In die workflows navigeert een agent je website met hetzelfde automatiseringsframework waarmee je test.

data-testid vs getByRole: Wat Elke Locator Test

Met data-testid test je of je eigen label nog klopt. De test kan slagen zonder dat duidelijk is of een gebruiker de knop kan vinden of een screenreader hem kan aankondigen. Ook zegt de test niets over de vraag of het element in een Playwright MCP-snapshot staat.

Met getByRole faalt je test als de button geen echte button is, dus je past de markup aan. De aangepaste markup verschijnt in de accessibility tree die Playwright MCP leest via browser_snapshot.

De accessibility tree bevat geen test-attributen. Wanneer Playwright MCP browser_snapshot aanroept, komt je zorgvuldig geplaatste data-testid="submit-btn" er niet in voor. De snapshot bevat rollen, labels en namen, precies wat getByRole en getByLabel opvragen.

// Je Playwright test
await page.getByRole('button', { name: 'In winkelwagen' }).click();
await page.getByLabel('E-mail').fill('user@example.com');
await page.getByRole('link', { name: 'Afrekenen' }).click();

// Wat een AI agent ziet via Playwright MCP browser_snapshot
// - button "In winkelwagen" (ref=12)
// - textbox "E-mail" (ref=15)
// - link "Afrekenen" (ref=18)

// Dezelfde selectors. Dezelfde elementen. Dezelfde accessibility tree.

Een getByRole-locator en een snapshot-regel lezen dezelfde roles en toegankelijke namen. Met getByRole test je UI-semantiek en bevestig je dat roles en names beschikbaar zijn voor snapshot-afhankelijke agents zoals Playwright MCP. Dat bewijst op zichzelf geen volledige navigatie of taaksucces. Met data-testid test je een string die je zelf hebt gekozen.

Playwright's eigen locator-prioriteitsgids beveelt getByRole aan als eerste keuze en data-testid als laatste redmiddel. De redenering van de gids is "test zoals een gebruiker." Dezelfde locators komen ook overeen met wat Playwright MCP-snapshots tonen.

Het Vliegwiel: Hoe Testen, Toegankelijkheid en Agent Readiness Samenhangen

Playwright met semantische selectors werkt zo:

1. Je schrijft Playwright-tests met accessibility-first selectors zoals getByRole, getByLabel en getByText
2. Dit stuurt je naar toegankelijke HTML. Als je getByRole-selector het element niet kan vinden, is het geen echte button. Je test faalt, dus je fixt de markup
3. Toegankelijke HTML produceert een vollere accessibility tree, dezelfde boom die Playwright MCP leest
4. Snapshot-afhankelijke agents krijgen bruikbare doelen. Roles en toegankelijke namen maken bedieningselementen zichtbaar in de accessibility tree, maar bewijzen geen navigatie of taaksucces
5. Je tests valideren de semantiek die Playwright MCP aanbiedt. Als je testsuite slaagt met getByRole-selectors, heb je de relevante roles en accessible names geverifieerd

Een Playwright-testsuite met semantische selectors verifieert roles en toegankelijke namen die snapshot-afhankelijke agents ook kunnen gebruiken. Die overlap is nuttig bewijs, maar maakt een website niet agent-ready en bewijst niet dat een agent een taak kan voltooien.

ARIA Snapshots: De Boom Zelf Testen

Playwright biedt ook ARIA snapshot testing, waarmee je assertions direct tegen een accessibility-weergave schrijft. In plaats van alleen te controleren of een element in de DOM bestaat, verifieer je de semantische structuur die Playwright aan tests en snapshots aanbiedt.

// ARIA snapshot test — valideert de accessibility tree direct
await expect(page.getByRole('navigation')).toMatchAriaSnapshot(`
  - link "Home"
  - link "Producten"
  - link "Prijzen"
  - link "Contact"
`);

// Dit valideert:
// 1. Een navigatie-landmark bestaat
// 2. Het bevat vier links met exact deze namen
// 3. De accessibility tree is correct voor zowel schermlezers als AI agents

Als je ARIA snapshot test slaagt, heb je de YAML-structuur geverifieerd die Playwright MCP teruggeeft wanneer het browser_snapshot aanroept. Dit dekt alleen die gestructureerde snapshot. De agent kan daarnaast context zoals screenshots of DOM-data gebruiken.

Playwright introduceerde ook Test Agents, ingebouwde AI die de accessibility tree gebruikt om tests te plannen, te genereren en te repareren. De planner verkent je app via accessibility snapshots, de generator schrijft tests met getByRole-selectors, en de healer repareert gebroken tests na UI-wijzigingen door de accessibility tree opnieuw te lezen.

Voorbij Playwright MCP: Andere Browser Agents

Playwright MCP is niet de enige manier waarop AI agents het web browsen. Deze tabel vergelijkt het met andere browser agents en frameworks:

Verschillende tools in deze vergelijking bouwen op Playwright of bieden accessibility snapshots, terwijl andere screenshots met gestructureerde browserdata combineren. Het framework dat je koos voor testen kan dus ook een browserworkflow voor agents ondersteunen.

Wat Dit Betekent voor je Team

Als je al Playwright gebruikt, is een deel van het voorwerk misschien gedaan. Het hangt ervan af hoe je je locators schrijft:

Praktische Stappen

1. Audit je locator-strategie. Grep je testsuite op data-testid vs getByRole. De verhouding laat zien hoeveel van je locators op roles en names steunen
2. Migreer kritieke paden eerst. Begin met je belangrijkste gebruikersflows: login, zoeken, checkout, registratie. Herschrijf die tests naar getByRole-selectors. Fix de HTML waar tests falen
3. Voeg ARIA snapshot tests toe. Voeg voor sleutelpagina's snapshot tests toe die de accessibility tree-structuur valideren. Een geslaagde snapshot bevestigt roles, names en states, maar bewijst geen volledige navigatie of taaksucces
4. Probeer Playwright MCP zelf. Installeer het in Claude Code of Cursor en richt een agent op je eigen site. Vergelijk wat die ziet met wat je op de pagina verwacht
5. Scan op AI agent readiness. Gebruik onze gratis scanner om semantische HTML, formulierlabels, koppenstructuur en interactieve surfaces te checken over 77 checkpoints

Het Grotere Plaatje: Tests als Contract voor Roles en Names

Playwright-tests met accessibility-selectors bieden een contract voor de roles, names en states waarnaar Playwright MCP kan verwijzen. Als je test de knop "In winkelwagen" via role en name vindt, kan dat semantische doel ook in een Playwright MCP-snapshot verschijnen. De test definieert niet alles wat een agent kan doen.

Vergelijk het met WebMCP , het W3C-voorstel waarbij websites expliciet tools registreren voor AI agents. WebMCP gebruikt tooldefinities. Playwright MCP biedt semantische browserdoelen via accessibility snapshots. Deze mechanismen bieden verschillende niveaus van structuur en geen van beide garandeert taaksucces.

Teams die al testen met semantische selectors bieden bruikbare roles en names aan Playwright MCP en andere snapshot-afhankelijke agents. Dat ondersteunt één interactiemodaliteit, naast DOM-toegang, screenshots en expliciete agentprotocollen.

Conclusie

Playwright begon als Puppeteer-alternatief, werd een populair testframework en is nu een browser-runtime die AI agents via MCP kunnen gebruiken. Elke stap bouwde voort op de vorige: cross-browser automatisering, accessibility-first selectors en MCP-gebaseerde agent-besturing.

Een data-testid-locator test of je eigen label nog klopt. Een locator als getByRole test lokalisering via roles en names en ondersteunt snapshot-afhankelijke agents, maar bewijst geen complete interactie of taaksucces. Het houdt je tests ook in lijn met hoe gebruikers en screenreaders bedieningselementen identificeren.

Bronnen

• Playwright: Microsoft's Browser Automation Framework (80.000+ GitHub stars, 33M wekelijkse npm downloads)
• Playwright MCP: Browser Automatisering voor AI Agents (25.000+ GitHub stars, 70+ tools, uitgebracht maart 2025)
• Playwright Locators Documentatie (Aanbevolen locator-prioriteit: getByRole eerst, data-testid als laatste redmiddel)
• Playwright ARIA Snapshots (Accessibility tree-structuur direct testen)
• Playwright Test Agents (AI-aangedreven testplanning, -generatie en -reparatie)
• Simon Willison: Playwright MCP met Claude Code (Praktische gebruiksgids en authenticatiepatronen)
• GitHub Blog: Debug Web Apps met Playwright MCP en Copilot
• GitHub Docs: MCP en Copilot Coding Agent (Playwright MCP automatisch geconfigureerd voor Copilot's coding agent)
• TestDino: Playwright Marktaandeel 2025 (45,1% QA-adoptiegraad, 235% groei jaar-op-jaar)
• Fastly: AI Crawlers maken 80% van AI Bot-verkeer uit
• IsAgentReady: Hoe AI Agents je Website Zien: De Accessibility Tree Uitgelegd
• IsAgentReady: Wat is MCP? Het Model Context Protocol voor AI Agents
• IsAgentReady: Wat is WebMCP en waarom heeft je website het nodig