Wanneer je denkt aan het testen van websites, denk je misschien al snel dat dit iets is voor developers of testers met technische kennis. Maar dat hoeft helemaal niet! Met Playwright, een open source testtool ontwikkeld door Microsoft, kan iedereen – ja, ook jij – bijdragen aan de kwaliteit van een website.

In deze blog leg ik uit wat Playwright is, hoe je het kunt gebruiken, en waarom het ook geschikt is voor niet-technische gebruikers.

Wat is Playwright?

Playwright is een tool om websites automatisch te testen. Het werkt met alle moderne browsers zoals Chrome, Firefox, Safari en Edge, en het is bovendien gratis. Met Playwright kun je testen of je website goed functioneert, zonder dat je daarvoor elke keer handmatig door alle pagina’s hoeft te klikken.

Waarom is dat belangrijk?

Websites worden steeds complexer. Denk aan webshops, portals en apps die allerlei functies hebben.

Handmatig testen kost veel tijd
Mensen maken sneller fouten
Automatisering kan dit slimmer en betrouwbaarder doen

En het mooiste: je hoeft geen developer te zijn om mee te helpen met testen.

Playwright voor niet-technische gebruikers

Playwright heeft een record & playback-functie. Dit betekent dat je gewoon door de website kunt klikken, terwijl Playwright op de achtergrond een testscript schrijft.

Geen programmeerkennis nodig
Alles wat je doet wordt opgenomen
Developers kunnen het script later uitbreiden
Perfect voor QA, product owners en business analisten

Hoe installeer je Playwright?

Voordat je met Playwright kunt testen, moet je het eerst installeren. Dat klinkt technisch, maar valt mee – vaak kan een developer of IT’er dit voor je klaarzetten.

Zorg ervoor dat je een IDE als visual studio code geinstalleerd hebt.
Zorg dat Node.js op je computer staat (dit is een voorwaarde, Playwright draait daarbovenop).
Open een terminal (of opdrachtprompt).
Voer de volgende opdrachten uit:

# Maak een nieuwe map voor je project
mkdir mijn-testproject
cd mijn-testproject

# Installeer Playwright
npm init playwright@latest

Tijdens de installatie stelt Playwright een paar vragen (bijv. welke taal je wil gebruiken).
Daarna kun je direct aan de slag!

Om een test op te nemen typ je bijvoorbeeld:

npx playwright codegen https://practiceautomatedtesting.nl

En om een test uit te voeren:

npx playwright test

Wil je een mooi overzicht van de resultaten? Gebruik dan:

npx playwright show-report

Concreet voorbeeld

Stel: je wilt testen of een contactformulier werkt.

Start de Playwright Test Recorder
Klik door de website zoals een normale bezoeker
Playwright maakt automatisch een script
Dit script kun je zo vaak als nodig afspelen

Van klikken naar testen — Playwright Codegen + AI

Playwright maakt het mogelijk om UI-flows te automatiseren. Met Codegen neem je eenvoudig je kliks op, en met AI-tools zoals Copilot of ChatGPT maak je de scripts robuuster en uitbreidbaar. Dit artikel laat zien hoe je dat doet, ook als je weinig programmeerervaring hebt.

1. Playwright Codegen — klikken = script

Playwright heeft een ingebouwde recorder: Codegen.
Je start een browser, klikt door je applicatie, en Playwright genereert automatisch testcode.

Installatie

npm init -y
npm i -D @playwright/test
npx playwright install --with-deps

Codegen starten

npx playwright codegen https://practiceautomatedtesting.com

👉 Er opent een browser waarin je kunt inloggen of door je flow klikken.
Ondertussen verschijnt er gegenereerde code in een apart venster.

Playwright Codegen recorder voorbeeld

Dit is gebaseerd op dit scherm

PracticeAutomatedtesting webform voorbeeld

nu heb je een recorded scirpt die je kan kopieren en plakken in je repository voor je testen

2. Formulier automatiseren met AI

Naast login-tests kun je ook formulieren automatisch invullen en testen met AI.
Hieronder een voorbeeld het de html die ik uitgelezen heb van het formulier:

hoe doe je dat, je gaat naar je webbrowser en doet rechtermuis knop devtools(inspect menu optie rechtermuis klik) Vanuit daar kan je dan de html kopieren en plakken

PracticeAutomatedtesting webform voorbeeld

<section class="WebElements_formSection__qE9Jz">
  <div class="WebElements_inputGroup__bfTUQ">
    <label for="fullName">Full Name</label>
    <input type="text" id="fullName" placeholder="Enter your full name">
  </div>
  <div class="WebElements_inputGroup__bfTUQ">
    <label for="email">Email</label>
    <input type="email" id="email" placeholder="Enter your email">
  </div>
  <div class="WebElements_inputGroup__bfTUQ">
    <label for="currentAddress">Current Address</label>
    <textarea id="currentAddress" placeholder="Enter your current address" rows="3"></textarea>
  </div>
  <div class="WebElements_inputGroup__bfTUQ">
    <label for="permanentAddress">Permanent Address</label>
    <textarea id="permanentAddress" placeholder="Enter your permanent address" rows="3"></textarea>
  </div>
  <button type="submit" class="WebElements_submitButton__dnCZX">Submit</button>
</section>

Als je deze sectie in copilot zet of elke andere AI genereerd hij een script voor je die aansluit op je wensen, en ook in elke taal(javascript, python etc)

En zo verkrijg je een test voor formulier met Playwright:

import { test, expect } from '@playwright/test';

test('form submission example', async ({ page }) => {
  // Open je pagina (pas de URL aan naar waar jouw formulier staat)
  await page.goto('https://jouw-app-url.com/form');

  // Vul de velden in
  await page.getByLabel('Full Name').fill('John Doe');
  await page.getByLabel('Email').fill('john.doe@example.com');
  await page.getByLabel('Current Address').fill('123 Main Street, Amsterdam');
  await page.getByLabel('Permanent Address').fill('456 Second Street, Rotterdam');

  // Klik op Submit
  await page.getByRole('button', { name: 'Submit' }).click();

  // ✅ Eventueel: check of een bevestiging verschijnt of data wordt verwerkt
  // await expect(page.locator('.success-message')).toHaveText('Form submitted successfully!');
});

Hier zie je hoe labels automatisch koppelen aan de juiste velden (getByLabel) — dit maakt de test robuust en onderhoudbaar. Het werkt hetzelfde als de recorder alleen kan je door context aan ai iets gerichtere vragen stellen om de code te optimalizeren Aldus, Met de gegenereerde code als basis, kun je AI-tools gebruiken om:

selectors robuuster te maken (bijv. data-testid i.p.v. CSS-classes),
herbruikbare testfuncties te schrijven,
variabelen of testdata toe te voegen,
edge cases automatisch te genereren.

Zo combineer je het gemak van klikken met de kracht van AI — ideaal om snel testautomatisering op te zetten.

API-testen met Playwright

Playwright is niet beperkt tot UI-tests (wat je in de browser ziet). Je kunt er ook API’s mee testen.

Dat betekent dat je kunt checken of de “achterkant” van een systeem goed reageert.
Bijvoorbeeld:

Komt er een 200 OK terug als ik een API aanroep?
Bevat het antwoord de juiste gegevens in JSON?

Zo kun je ook zonder frontend controleren of koppelingen en backends goed functioneren.

Voorbeeld van een API-test

Stel, je hebt een API die een lijst met gebruikers terugstuurt. Met Playwright kun je eenvoudig testen of dat werkt: met AI is het nog makkelijker om het in te richten. wat ik zelf meestal doe is de de api in copilot zetten en vanuit daarvragen of hij testcases kan maken. let wel je moet functioneel en non functioneel goed controleren wat die doet.

import { test, expect } from '@playwright/test';

test('API geeft boekgegevens terug', async ({ request }) => {
  // Verstuur een GET-aanvraag naar de API
  const response = await request.get('https://api.practiceautomatedtesting.com/v1/practice/books/1');
  
  // Controleer of de server netjes 200 terugstuurt
  expect(response.status()).toBe(200);

  // Haal de JSON-data op
  const data = await response.json();

  // Controleer of er een titel en auteur in de response zitten
  expect(data).toHaveProperty('title');
  expect(data).toHaveProperty('author');

  // Voorbeeld extra check: het id moet 1 zijn
  expect(data.id).toBe(1);
});

Wat gebeurt hier?

Er wordt een aanvraag gedaan naar https://api.practiceautomatedtesting.com/v1/practice/books/1.
Playwright checkt of de server netjes 200 OK terugstuurt.
Daarna controleert het of het antwoord een property heeft van title en author, maar je kan ook op veldwaarden controleren..

Met zo’n test kun je er dus snel achter komen of een API nog werkt zoals verwacht.

Samenvattend

De voordelen op een rij

Tijdbesparing: minder handmatig testen
Betrouwbaarheid: minder menselijke fouten
Samenwerking: iedereen in het team kan bijdragen
Herbruikbaarheid: één keer opnemen = vaker gebruiken
Compleet: UI én API testen in één framework

Gebruiksscenario’s

Met Playwright kun je bijvoorbeeld:

Controleren of een formulier goed werkt
Nakijken of een bestelling in een webshop correct verwerkt wordt
Testen of login en wachtwoord reset in orde zijn
Checken of content zichtbaar is voor klanten
API’s valideren, bijvoorbeeld koppelingen met externe systemen

Conclusie

Met een eenvoudige installatie en een paar simpele commando’s kan iedereen met Playwright aan de slag. Of je nu de gebruikersinterface (UI) van een website wilt controleren of de achterliggende API’s wilt testen – je hebt geen diepgaande programmeerkennis nodig om een bijdrage te leveren.

Playwright maakt testen toegankelijk voor iedereen.