38dd7c1f8a
Beide waren lege placeholders ('Epic 1 - Placeholder', 'Not designed yet').
Sidebar-items eruit; login-tests gebruiken /epd/agenda als voorbeeld van
een beveiligde route.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
9.7 KiB
Testhandleiding - Mini EPD Prototype
Deze handleiding is bedoeld voor iedereen die de EPD-applicatie wil testen — ook zonder technische achtergrond. Je kunt kiezen tussen twee testtools: Playwright en Cypress. Beide doen hetzelfde — een browser automatisch bedienen alsof er een echte gebruiker achter zit — maar de interface is net iets anders.
Mappenstructuur
tests/
playwright/ # Playwright tests
.auth/ # Opgeslagen inlogsessie (automatisch aangemaakt)
fixtures/
ai-mocks.ts # Gesimuleerde AI-antwoorden
auth.setup.ts # Eenmalige inlog setup
login.spec.ts
agenda/agenda.spec.ts
cortex/
command-center.spec.ts
dagnotitie-flow.spec.ts
verpleegrapportage/overzicht.spec.ts
cypress/ # Cypress tests (zelfde flows, andere syntax)
support/
commands.ts # cy.login(), cy.mockDagnotitieChat()
e2e.ts
login.cy.ts
agenda/agenda.cy.ts
cortex/
command-center.cy.ts
dagnotitie-flow.cy.ts
verpleegrapportage/overzicht.cy.ts
screenshots/ # Schermafbeeldingen bij fouten (automatisch)
videos/ # Video-opnames per testrun (automatisch)
test-results/ # Playwright: details bij falende tests (automatisch)
playwright-report/ # Playwright: HTML rapport na afloop (automatisch)
README.md # Dit bestand
Voorbereiding
Zorg dat je twee dingen hebt gestart voordat je de tests draait:
1. De applicatie zelf
Open een terminal en typ:
pnpm dev
Wacht tot je ziet: ✓ Ready on http://localhost:3000. Laat dit venster open staan.
2. De testtool naar keuze — zie hieronder.
Playwright gebruiken
Playwright is geïnstalleerd en geconfigureerd in playwright.config.ts.
Starten
pnpm test:e2e:ui # visuele UI (aanbevolen voor demo en testers)
pnpm test:e2e # alle tests in de terminal
pnpm test:e2e:debug # stap-voor-stap debuggen
pnpm test:e2e:report # HTML rapport na afloop bekijken
De Playwright UI gebruiken
┌─────────────────────────┬──────────────────────────────┐
│ Testlijst (links) │ Browser preview (rechts) │
│ │ │
│ ▶ auth.setup │ Hier zie je de app │
│ ▶ login │ meelopen terwijl de test │
│ ▶ agenda │ wordt uitgevoerd │
│ ▶ cortex │ │
│ ▶ verpleegrapportage │ │
└─────────────────────────┴──────────────────────────────┘
Stap 1 — Filter instellen Zorg dat bovenaan "chromium" of "All" geselecteerd is, niet "setup". Anders zie je maar één test.
Stap 2 — Inloggen (eenmalig per sessie)
Klik op ▶ naast auth.setup.ts. Dit logt automatisch in en slaat de sessie op. Daarna starten alle andere tests al ingelogd.
Stap 3 — Test uitvoeren Klik op een individuele testnaam (niet de groepsnaam). De browser aan de rechterkant springt tot leven.
Wat betekenen de kleuren?
- Grijs — test is nog niet gedraaid
- Groen ✓ — test geslaagd
- Rood ✗ — test gefaald, zie details onderaan
Cypress gebruiken
Cypress is de tool die jullie testers al kennen. Geconfigureerd in cypress.config.ts.
Starten
pnpm test:cypress:open # visuele UI (aanbevolen voor testers)
pnpm test:cypress:run # alle tests headless in de terminal
De Cypress UI gebruiken
Na pnpm test:cypress:open opent de Cypress app. Kies E2E Testing en daarna Chrome als browser.
┌──────────────────────────────────────────────────────┐
│ Specs (testbestanden) │
│ │
│ login.cy.ts │
│ agenda / agenda.cy.ts │
│ cortex / command-center.cy.ts │
│ cortex / dagnotitie-flow.cy.ts │
│ verpleegrapportage / overzicht.cy.ts │
└──────────────────────────────────────────────────────┘
Klik op een bestand om alle tests erin te draaien. De browser opent en je ziet links de stappen en rechts de live applicatie.
Inloggen gaat automatisch via cy.login() — je hoeft niets extra te doen. De sessie wordt gecached zodat het maar één keer per testrun hoeft.
Vergelijking Playwright vs Cypress
Beide tools testen exact dezelfde flows. De syntax verschilt iets:
| Actie | Playwright | Cypress |
|---|---|---|
| Navigeer naar pagina | page.goto('/login') |
cy.visit('/login') |
| Vind element | page.locator('#email') |
cy.get('#email') |
| Typ tekst | page.fill('#email', '...') |
cy.get('#email').type('...') |
| Klik | page.click('button') |
cy.contains('button').click() |
| Controleer zichtbaar | expect(...).toBeVisible() |
.should('be.visible') |
| Mock API | page.route('**/api/...') |
cy.intercept('GET', '/api/...') |
| Wacht op redirect | page.waitForURL(/\/epd\//) |
cy.url().should('match', /\/epd\//) |
Overzicht van alle tests
login — Inlogpagina (5 tests)
| Test | Wat wordt gecontroleerd |
|---|---|
| Toont loginpagina correct | Email, wachtwoord en inlogknop zijn zichtbaar |
| Foutmelding bij verkeerde gegevens | Foutmelding verschijnt bij foute combinatie |
| Demo login knop werkt | ⚡ knop logt direct in en stuurt door naar het EPD |
| Redirect na succesvol inloggen | Na inloggen kom je op /epd/ terecht |
| Beveiligde route stuurt door | Probeer /epd/agenda zonder sessie → je gaat naar login |
agenda — Agenda en afspraken (8 tests)
Zoekresultaten zijn gesimuleerd met Robbert Robot zodat de tests niet afhankelijk zijn van live patiëntdata.
Basiscontroles
| Test | Wat wordt gecontroleerd |
|---|---|
| Laadt de agendapagina | Pagina opent correct met "Agenda" titel en "Nieuwe Afspraak" knop |
| Navigatieknoppen zichtbaar | "Vandaag", "Dag" en andere knoppen aanwezig |
Afspraak aanmaken
| Test | Wat wordt gecontroleerd |
|---|---|
| Modal opent | Klik op "Nieuwe Afspraak" → formulier verschijnt |
| Verplichte velden aanwezig | Patiëntzoekveld, datum, tijd en "Afspraak maken" knop zichtbaar |
| Zoeken toont resultaat | Type "Robbert" → "Robbert Robot" verschijnt in de lijst |
| Patiënt selecteren | Klik op naam → bevestigingskaart verschijnt in formulier |
| Knop uitgeschakeld zonder patiënt | "Afspraak maken" is niet klikbaar zonder geselecteerde patiënt |
| Sluiten werkt | Klik op "Sluiten" → modal verdwijnt |
cortex/command-center — Cortex interface (5 tests)
Puur UI — geen echte AI-calls.
| Test | Wat wordt gecontroleerd |
|---|---|
| Interface laadt | Invoerveld en voorbeeldtekst zichtbaar |
| Tekst invoeren werkt | Je kunt iets typen in het veld |
| ⌘K opent het veld | Sneltoets focust automatisch op het invoerveld |
| Escape wist de invoer | Escape-toets leegt het veld |
| Voorbeeldcommandos zichtbaar | Hints zoals "notitie jan" en "overdracht" staan in beeld |
cortex/dagnotitie-flow — Chat flows (5 tests)
AI-antwoorden zijn gesimuleerd — tests werken altijd hetzelfde en hebben geen Anthropic API nodig.
| Test | Scenario |
|---|---|
| Dagnotitie | Typ "notitie jan de vries voelt zich goed" → AI antwoordt "Genoteerd." |
| Invoer leeg na verzenden | Na het sturen is het invoerveld weer leeg |
| Zoeken | Typ "zoek marie" → AI antwoordt "Even kijken." |
| Onbekende opdracht | AI vraagt om verduidelijking als de intentie onduidelijk is |
| Meerdere berichten | Eerder gestuurde berichten blijven zichtbaar in de chat |
verpleegrapportage — Rapportagepagina's (3 tests)
| Test | Wat wordt gecontroleerd |
|---|---|
| Rapportage pagina laadt | /epd/verpleegrapportage opent zonder fout of redirect naar login |
| Inhoud zichtbaar | Er is een patiëntenlijst of een lege-staat melding |
| Overdracht pagina laadt | /epd/verpleegrapportage/overdracht opent correct |
Als een test faalt
Playwright schrijft bij een falende test het volgende weg in tests/test-results/:
| Bestand | Inhoud |
|---|---|
screenshot.png |
Foto van de browser op het moment van de fout |
video.webm |
Video van de volledige testrun |
error-context.md |
Tekstbeschrijving van wat er misging |
Bekijk het volledige HTML-rapport (in tests/playwright-report/):
pnpm test:e2e:report
Cypress schrijft bij een falende test naar tests/cypress/screenshots/ en tests/cypress/videos/. In de visuele UI zie je de fout direct in beeld met een tijdlijn van alle uitgevoerde stappen.
Veelvoorkomende problemen
| Probleem | Oplossing |
|---|---|
| Alle tests falen meteen | pnpm dev draait niet — start de applicatie eerst |
| Auth setup faalt | Supabase is gepauzeerd — herstart het project op supabase.com |
| Alleen de auth test zichtbaar (Playwright) | Filter staat op "setup" — zet hem op "chromium" of "All" |
| Browser preview blijft leeg (Playwright) | Klik op een individuele test (niet de groepsnaam) en druk op ▶ |
| Cypress vraagt om browser te kiezen | Kies "Chrome" in het openingsscherm |
| Tests werken maar app doet het niet | Tests controleren de interface, niet alle logica — meld bevindingen apart |