@matware/e2e-runner
JSON-gestuurde E2E testing met herbruikbare modules, test intelligentie, parallelle uitvoering en 17 MCP tools voor AI-natieve workflows.
Zie het in actie
Claude Code maakt en draait JSON-tests via de MCP-server — met het realtime dashboard.
84% Minder Code
We hebben de E2E-tests van een echte medische applicatie omgezet van Playwright (TypeScript + Page Object Model) naar e2e-runner (JSON + modules).
Voorheen — Playwright
2,170
regels TypeScript
84%
reductie
Nu — e2e-runner
338
regels JSON
import { Page, Locator } from '@playwright/test'; export class LoginPage { readonly page: Page; readonly usernameInput: Locator; readonly passwordInput: Locator; readonly loginButton: Locator; constructor(page: Page) { this.page = page; this.usernameInput = page.locator('input[name="username"]'); this.passwordInput = page.locator('input[name="password"]'); this.loginButton = page.getByRole('button'); } async login(username: string, password: string) { await this.usernameInput.fill(username); await this.passwordInput.fill(password); await this.loginButton.click(); } // ... 100+ more lines }
{
"$module": "auth-login",
"params": {
"username": { "required": true },
"password": { "required": true }
},
"actions": [
{ "type": "goto", "value": "/" },
{ "type": "type", "selector": "input[name='username']", "value": "{{username}}" },
{ "type": "type", "selector": "input[name='password']", "value": "{{password}}" },
{ "type": "click", "text": "Sign In" },
{ "type": "assert_url", "value": "dashboard" }
]
} Dezelfde functionaliteit. QA, product en developers kunnen allemaal de tests schrijven en begrijpen. Claude Code kan ze direct genereren, wijzigen en uitvoeren via MCP.
Herbruikbare Modules
Vervang Page Objects door componeerbare JSON-modules. Geparametriseerd, met conditionele blokken en cyclusdetectie.
Gebruik een module in je tests met één regel:
{ "$use": "auth-login", "params": { "username": "admin@test.com", "password": "secret" } } Verplicht, optioneel, standaardwaarden
Modules kunnen andere modules gebruiken
{{#param}}...{{/param}} blocks
Waarom e2e-runner?
Alles wat je nodig hebt voor moderne browsertesting, niets wat je niet nodig hebt.
Herbruikbare Modules
Vervang Page Objects door JSON-modules. Geparametriseerd, componeerbaar, met conditionele blokken en cyclusdetectie. Eén module van 23 regels vervangt een TypeScript-klasse van 184 regels.
Test Intelligentie
Automatische kennisextractie: detectie van instabiele tests, onstabiele selectors, foutpatronen, paginagezondheid en API-monitoring. SQLite + optionele Neo4j-kennisgraaf.
Tests Zonder Code
Schrijf browsertests als eenvoudige JSON-bestanden. Geen Playwright API, geen testframework-boilerplate — verklaar gewoon wat je wilt testen.
Parallelle Uitvoering
Voer tests uit op meerdere browserinstanties tegelijk met configureerbare concurrency via een Chrome-pool. Seriële modus beschikbaar per test.
AI-Natief (MCP)
17 MCP tools. Laat Claude modules aanmaken, tests uitvoeren, learnings analyseren, screenshots maken en tests genereren vanuit GitHub issues — allemaal conversationeel.
Visuele Verificatie
Voeg "expect" toe aan een test en de runner maakt een full-page screenshot. Claude beoordeelt visueel of de test slaagt.
Nieuw in v1.5.0
Lichtere tests die evaluate-blokken laten vallen, plus een vernieuwd realtime dashboard.
select_combobox
Opent een MUI Autocomplete/Select, filtert en kiest de optie in één actie — geen evaluate-blokken meer.
Scoped click
click met scope:"dialog", visible:true, last:true om tekst binnen modals te targeten zonder dubbelzinnige selectors.
wait gone
Wacht tot een element verdwijnt (spinner, backdrop) in plaats van een vaste sleep. Schakelt een grote bron van flakiness uit.
type_react
Typ in React-gestuurde inputs met blur en waitAfter om validatie bij blur betrouwbaar te triggeren.
Geneste modules
Een module kan andere modules componeren en hun parameters doorgeven. Stop met het kopiëren van gedeelde sequenties.
Vernieuwde LIVE-weergave
Horizontale screenshot-feed, filmstrip met vaste slots, automatisch volgen van de lopende test en klik-om-te-vergroten.
Find blank-scan
Het Screenshots-tabblad detecteert en verwijdert lege captures zodat ze je rapporten nooit vervuilen.
WCAG AA dark mode
Toegankelijk contrast in de hele UI, accent-cyaan losgekoppeld van PASS-groen en projectselectie behouden bij herladen.
Het Dashboard
Een realtime web-UI voor elke run — de LIVE-weergave is vernieuwd in v1.5.0.
LIVE-weergave
Real-time screenshot-feed met automatisch volgen en filmstrip.
Runs
Elke run met pass/fail-status, duur en historie.
Run-detail
Narratie per actie, timings en netwerk-drilldown.
Screenshots
Galerij met de Find blank-scan om lege captures te verwijderen.
Suites
Blader in één oogopslag door testsuites en herbruikbare modules.
Pool-status
Chrome-pool capaciteit, actieve sessies en routing.
Eerder in v1.2.0
Actie-level herpoging, narratie, auth-injectie, netwerklogging en meer.
Actie-Level Herpoging
Individuele acties opnieuw proberen zonder de browser te herstarten. Globale of per-actie configuratie.
Test Narratie
Leesbare beschrijvingen voor elke actie: "Clicked 'Submit' button (78ms)". Maskeert automatisch gevoelige data.
Auth Token Injectie
JWT injecteren in localStorage voor tests. Test geauthenticeerde apps zonder inlogflows.
On-Demand Capture
Screenshot van elke URL direct via MCP of CLI zonder een test te schrijven.
Volledig Netwerklogging
Volledige request/response vastlegging (URL, methode, headers, body). Opgeslagen in SQLite.
Seriële Tests
{ "serial": true } voert tests sequentieel uit na de parallelle batch.
Uitsluitpatronen
Sla suites over met glob: exclude: ["legacy-*", "wip-*"]
Strikte Validatie
Structuurvalidatie voor uitvoering: geldige actietypes, verplichte velden, correcte naamgeving.
.env Ondersteuning
Automatisch .env laden. Geen dependencies, KEY=VALUE, overschrijft bestaande variabelen niet.
CLAUDE.md Context
AI-testgeneratie leest je CLAUDE.md voor echte routes, selectors en patronen.
17 MCP Tools
Volledige AI-integratie. Elke tool beschikbaar voor Claude Code en elke MCP-client.
| Tool | Beschrijving |
|---|---|
e2e_run | Tests uitvoeren: alle, per suite, per bestand. Ondersteunt concurrency, baseUrl, retries, failOnNetworkError |
e2e_list | Testsuites en beschikbare modules weergeven |
e2e_create_test | Test-JSON aanmaken met expect-veld en $use-referenties |
e2e_create_module | Herbruikbare module aanmaken met params, standaardwaarden en acties |
e2e_pool_status | Chrome-pool beschikbaarheid en capaciteit |
e2e_screenshot | Screenshot ophalen via hash (ss:a3f2b1c9) |
e2e_capture | On-demand screenshot van elke URL |
e2e_issue | GitHub/GitLab issue ophalen, tests genereren (prompt- of verify-modus) |
e2e_learnings | Test intelligentie bevragen: instabiele tests, selectors, fouten, trends |
e2e_analyze | Analyseer een afgeronde run: fouten, flaky-signalen en stabiliteitsinzichten |
e2e_network_logs | Inspecteer vastgelegde netwerk-requests/responses van een run |
e2e_vars | Beheer gedeelde variabelen en secrets beschikbaar voor tests |
e2e_app_pool_status | Status van de app-under-test pool (dev servers) |
e2e_neo4j | Neo4j-kennisgraaf container beheren |
e2e_dashboard_start | Het real-time webdashboard starten |
e2e_dashboard_restart | Herstart het realtime web dashboard |
e2e_dashboard_stop | Het webdashboard stoppen |
claude mcp add e2e-runner \ npx @matware/e2e-runner mcp
claude mcp add e2e-runner \ docker run -i --rm \ matwaredev/e2e-runner mcp
Snel Starten
Klaar in vier commando's.
Installeren
npm install -g @matware/e2e-runner Initialiseren
e2e-runner init Chrome Pool Starten
e2e-runner pool start Tests Uitvoeren
e2e-runner run --all 27 Acties
Alle beschikbare acties in een JSON-testbestand. select_combobox en type_react zijn nieuw in v1.5.0.
| Actie | Velden | Beschrijving |
|---|---|---|
goto | value | Navigeer naar een URL |
click | selector | text, scope?, visible?, last? | Klik op een element — beperk tot een dialog, vereis zichtbaar, of kies de laatste match |
type | selector, value | Typ tekst in een invoerveld |
type_react | selector, value, blur?, waitAfter? | Typ in React-gestuurde inputs; blur triggert validatie bij blur |
select | selector, value | Selecteer een optie uit een dropdown |
select_combobox | selector, filter, option | Opent een MUI Autocomplete/Select, filtert en kiest — vervangt evaluate |
press | selector?, key | Druk op een toets |
wait | value (ms) | selector | gone | Wacht op een duur, tot een element verschijnt, of tot het verdwijnt (gone) |
hover | selector | Beweeg over een element |
scroll | selector?, value? | Scroll op de pagina of een element |
clear | selector | Wis een invoerveld |
screenshot | value (filename) | Maak een screenshot |
evaluate | value (JS code) | Voer JavaScript uit in de browser |
navigate | value (back|forward|reload) | Browsernavigatie |
clear_cookies | — | Wis alle cookies |
assert_text | selector, text | Controleer de tekstinhoud van een element |
assert_element_text | selector, text, exact? | Controleer de exacte textContent van een element |
assert_visible | selector | Controleer of een element zichtbaar is |
assert_not_visible | selector | Controleer of een element NIET zichtbaar is |
assert_url | value | Controleer of de huidige URL overeenkomt |
assert_count | selector, value | Controleer het aantal overeenkomende elementen |
assert_attribute | selector, name, value? | Controleer de waarde van een HTML-attribuut |
assert_class | selector, value | Controleer of een CSS-klasse aanwezig is |
assert_input_value | selector, value | Controleer de waarde van input/select/textarea |
assert_matches | selector, value (regex) | Controleer of textContent overeenkomt met regex |
assert_no_network_errors | — | Controleer of er geen netwerkfouten zijn |
get_text | selector | Haal tekst op uit een element (geen assertie) |
Doe Mee
Geef de repo een ster, open een issue of probeer het in je volgende project.