Controleer je website met een agent

01 / 05

Kies één bezoekersroute

Test een concreet pad: open de landingspagina, kies een gids, wissel taal en open de juiste CTA. Schrijf vooraf op wat de bezoeker hoort te zien. Begin op een lokale of stagingomgeving. Een pagina die laadt bewijst nog niet dat knoppen, formulieren en mobiele weergave werken.

DOE DITSchrijf vier genummerde stappen met de verwachte uitkomst per stap.

02 / 05

Beperk de browsertoegang

Chrome DevTools MCP kwam langs in de radar en biedt een browseroppervlak voor coding agents. De connector kan browsergegevens zichtbaar maken voor het model. Gebruik daarom een apart testprofiel zonder persoonlijke sessies. Controleer de bron, installatie en telemetrie-instellingen volgens je beleid voordat je een nieuwe connector gebruikt.

DOE DITKoppel alleen je testbrowser en noteer welke pagina’s en handelingen zijn toegestaan.

03 / 05

Laat de agent echt klikken

Vraag de agent de route uit te voeren en per stap te noteren wat er werkelijk gebeurde. Gebruik beschikbare browsertools voor snapshots, screenshots en console- of netwerkfouten. Benoem wat niet getest is. Een screenshot toont uiterlijk; combineer hem met de handeling en URL om gedrag te onderbouwen.

DOE DITVoer dezelfde route op desktop en mobiel uit. Gebruik testgegevens; verstuur geen echte aanvraag.

04 / 05

Bewaar een reproduceerbare fout

Een bruikbaar bugrapport bevat URL, viewport, stappen, verwacht gedrag en gezien gedrag. Voeg alleen relevant bewijs toe. Laat de agent geen oorzaak als feit opschrijven als hij alleen het symptoom zag. Een fout die je opnieuw kunt oproepen is een beter startpunt voor herstel dan “de website is kapot”.

DOE DITMaak één rapport per probleem en wijs het toe aan een concrete stap.

05 / 05

Herhaal de mislukte stap

Na een wijziging voer je de oorspronkelijke stappen opnieuw uit. Vergelijk de uitkomst met het vooraf geschreven criterium. Test ook de stap ervoor en erna als de wijziging daarop invloed heeft. Bewaar de hertest bij het rapport. Noem een flow pas geslaagd als het verwachte gedrag zichtbaar is.

DOE DITKlaar als je een fout kunt reproduceren, herstellen en met dezelfde stappen aantoonbaar hertesten.

Jouw werkblad

# Browsercontrole
Testadres: [eigen test- of stagingwebsite]
Begintoestand: [uitgelogd / schone testsessie]
Bezoekersdoel: [één doel, bijvoorbeeld een gids openen]

| Stap | Handeling | Verwacht | Werkelijk | Bewijs |
| 1 | Open [URL] | [zichtbare beginpagina] | [bevinding] | [screenshot] |
| 2 | Klik [exacte knop] | [bestemming] | [bevinding] | [screenshot] |
| 3 | Controleer [element] | [inhoud of toestand] | [bevinding] | [screenshot] |

Desktop: [viewport + resultaat]
Mobiel: [viewport + resultaat]
Bug: [stappen om te reproduceren + verwacht/werkelijk]
Herstel: [wijziging]
Hertest van dezelfde route: [geslaagd/mislukt + bewijs]
Geen echte aankopen, verzendingen of klantgegevens in deze proef.

STARTER

Maak het concreet.

Test deze toegestane staging-URL met het aparte testprofiel. Volg mijn vier stappen op desktop en mobiel. Noteer per stap verwacht en werkelijk gedrag, URL en viewport. Bewaar relevante screenshots en consolefouten. Gebruik alleen testgegevens, verstuur niets en doe geen aankopen. Markeer niet-geteste onderdelen. Maak per fout een reproduceerbaar rapport.

Download werkblad ↓

Bronnen en verdieping

The AI Operator · C.11, M3.D.1, M3.D.4, M3.D.6, M2.5

github.com/ChromeDevTools/chrome-devtools-mcp

github.com/ChromeDevTools/chrome-devtools-mcp/blob/main/docs/tool-reference.md

modelcontextprotocol.io/docs/learn/architecture