End-to-end testen

Unit tests controleren of losse functies correct werken. Maar wat als alle individuele onderdelen werken, maar het samenspel toch ergens hapert? End-to-end tests (E2E tests) simuleren een echte gebruiker die door je website navigeert — klikken, formulieren invullen, controleren of de juiste dingen verschijnen.

Wat is E2E testen?

Bij E2E testen start een geautomatiseerde browser, navigeert naar je website en voert acties uit precies zoals een bezoeker dat zou doen. De test controleert vervolgens of het resultaat klopt.

Het verschil met unit testen:

	Unit test	E2E test
Test wat?	Één geïsoleerde functie	De hele gebruikersreis
Hoe snel?	Milliseconden	Seconden
Browser nodig?	Nee	Ja
Detecteert	Logicafouten in code	Kapotte flows, UI-problemen

Beide soorten testen vullen elkaar aan. Unit tests zijn snel en precies; E2E tests geven vertrouwen dat alles samen werkt.

Playwright

Dit project gebruikt al Playwright — een moderne E2E testrunner van Microsoft die Chrome, Firefox en Safari ondersteunt. Als je Playwright nog niet hebt geïnstalleerd:

Nog geen npm?

Heb je npm nog niet ingesteld? Lees eerst Package manager voor de installatie-instructies.

Terminal

$ npm install --save-dev @playwright/test
$ npx playwright install

Voeg een testscript toe aan package.json:

package.json

{
    "scripts": {
        "test:e2e": "playwright test"
    }
}

Je eerste E2E test schrijven

Stel je hebt een contactpagina op http://localhost:3000/contact. Je wil automatisch controleren of het formulier correct werkt.

tests/contact.spec.ts

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

test('contactformulier is zichtbaar', async ({ page }) => {
    // Navigeer naar de contactpagina
    await page.goto('http://localhost:3000/contact')

    // Controleer of de paginatitel aanwezig is
    await expect(
        page.getByRole('heading', { name: 'Neem contact op' })
    ).toBeVisible()

    // Controleer of alle invoervelden aanwezig zijn
    await expect(page.getByLabel('Naam')).toBeVisible()
    await expect(page.getByLabel('E-mailadres')).toBeVisible()
    await expect(page.getByLabel('Bericht')).toBeVisible()
})

test('formulier invullen en versturen', async ({ page }) => {
    await page.goto('http://localhost:3000/contact')

    // Vul het formulier in
    await page.getByLabel('Naam').fill('Anna de Vries')
    await page.getByLabel('E-mailadres').fill('anna@voorbeeld.nl')
    await page
        .getByLabel('Bericht')
        .fill('Dit is een testbericht van de automatische test.')

    // Klik op de verstuurknop
    await page.getByRole('button', { name: 'Verstuur bericht' }).click()

    // Controleer of de bevestigingsmelding verschijnt
    await expect(page.getByText('Je bericht is verzonden!')).toBeVisible()
})

De structuur van een Playwright test

test('beschrijving van wat er getest wordt', async ({ page }) => {
    // Navigeer naar een URL
    await page.goto('...')

    // Voer een actie uit
    await page.getByLabel('Naam').fill('Anna')
    await page.getByRole('button', { name: 'Verstuur' }).click()

    // Controleer het resultaat
    await expect(page.getByText('Succes!')).toBeVisible()
})

Elementen vinden

Playwright biedt meerdere manieren om elementen op de pagina te vinden. De aanbevolen methoden werken op basis van zichtbare tekst en toegankelijkheidsattributen — precies zoals een echte gebruiker de pagina ervaart:

Methode	Gebruik
page.getByRole('button', { name: 'Verstuur' })	Knop met de tekst "Verstuur"
page.getByLabel('E-mailadres')	Invoerveld gekoppeld aan het label "E-mailadres"
page.getByText('Welkom!')	Element dat de tekst "Welkom!" bevat
page.getByPlaceholder('Zoeken...')	Invoerveld met een bepaalde placeholder
page.locator('#mijn-id')	Element op basis van CSS-selector (als laatste redmiddel)

Gebruik geen CSS-selectors als het anders kan

Het is verleidelijk om elementen te vinden via page.locator('.btn-primary'), maar dit maakt tests kwetsbaar: zodra je de CSS aanpast, falen de tests. Gebruik liever getByRole of getByLabel — die koppelen aan de structuur en betekenis van de pagina, niet aan de visuele opmaak.

Tests uitvoeren

Terminal

$ npm run test:e2e

Playwright geeft een gedetailleerd overzicht van de resultaten. Bij een faal toont het precies welke actie mislukte en waarom.

Running 2 tests using 2 workers

  ✓ tests/contact.spec.ts:3:5 › contactformulier is zichtbaar (1.2s)
  ✓ tests/contact.spec.ts:13:5 › formulier invullen en versturen (2.4s)

  2 passed (4s)

Visueel debuggen

Start Playwright in UI-modus om de tests stap voor stap visueel te volgen:

Terminal

$ npx playwright test --ui

Een schermafbeelding vergelijken

Playwright kan ook visuele regressietests uitvoeren: het maakt een schermafbeelding van de pagina en vergelijkt die bij elke testrun met de vorige versie.

tests/homepage.spec.ts

test('homepage ziet er correct uit', async ({ page }) => {
    await page.goto('http://localhost:3000')
    await expect(page).toHaveScreenshot('homepage.png')
})

Bij de eerste uitvoering wordt de referentieafbeelding opgeslagen. Daarna detecteert Playwright automatisch visuele veranderingen — handig voor het bewaken van onbedoelde CSS-wijzigingen.

E2E testen in CI/CD

E2E tests draaien uitstekend in een CI/CD pipeline (zoals GitHub Actions). Elke keer dat je code pusht, worden de tests automatisch uitgevoerd — zodat je nooit per ongeluk een kapotte versie live zet.

E2E testen geeft je het ultieme vertrouwen: niet alleen de afzonderlijke onderdelen werken, maar de hele gebruikerservaring van begin tot eind.