@matware/e2e-runner 1.1.0: Realtime Dashboard, Issue-to-Test en Screenshot Hashes

Versie 1.1.0 van @matware/e2e-runner is uit. Het is de grootste update sinds de eerste release — een realtime web dashboard, automatische bugverificatie vanuit GitHub/GitLab issues, en screenshot hashes die visuele output verbinden met AI-debugging. Alles blijft JSON-driven, zero-config standaard.

Realtime Web Dashboard

De hoofdfunctie. Een complete dark-themed SPA die je volledige zichtbaarheid en controle geeft over je testruns — zonder extra configuratie.

npx @matware/e2e-runner dashboard

Open http://localhost:8484 en je bent er.

Live Uitvoering

Bekijk tests in realtime. Elke actie — goto, wait, click, evaluate — streamt via WebSocket met individuele duurtijden. Pass/fail-tellers worden live bijgewerkt.

Live-weergave tijdens testuitvoering: steps streamen in realtime met individuele duurtijden, pass/fail-tellers worden direct bijgewerkt.

Test Suites

Al je test suites georganiseerd per project. Klik op “Run Suite” op elke card of “Run All Tests” om alles uit te voeren.

Suites-weergave: cards georganiseerd per project, elk met een Run Suite knop.

Uitvoergeschiedenis met Trends

Een pass rate trendgrafiek en een gedetailleerde tabel van alle runs over projecten heen. Kleurgecodeerde percentages maken het makkelijk om regressies te spotten.

Runs-weergave: pass rate trendgrafiek en uitvoergeschiedenis over alle projecten.

Run Detail

Klap elke run open om individuele tests te zien met pass/fail badges, duurtijden, screenshots met klikbare hash badges, en geformateerde consolfouten.

Run detail: uitgevouwen test met PASS badge, screenshot thumbnail met klikbare hash badge ss:77c28b5a.

Screenshot Galerij

Een grid-galerij van alle screenshots vastgelegd tijdens testruns, georganiseerd per project.

Screenshots-weergave: visuele galerij van alle captures voor het geselecteerde project.

Multi-Project Ondersteuning

Het dashboard verwerkt meerdere projecten tegelijk. Elk project wordt geidentificeerd door zijn werkdirectory (cwd) met een configureerbare weergavenaam.

Multi-project: suites van verschillende projecten in aparte secties, poolstatus in de footer.

# Via CLI flag
e2e-runner dashboard --project-name "Mijn App"

# Via omgevingsvariabele
PROJECT_NAME="Mijn App" e2e-runner dashboard

# Via e2e-runner.config.json
{ "projectName": "Mijn App" }

Het dashboard is ook beschikbaar als MCP-tools: e2e_dashboard_start en e2e_dashboard_stop.

Issue-to-Test: Van Bug Report naar E2E Test Automatisch

Converteer GitHub- en GitLab-issues naar uitvoerbare E2E-tests. Ondersteunt github.com en GitLab (inclusief self-hosted), detecteert de provider automatisch vanuit de URL.

Twee operatiemodi:

Prompt Modus (standaard, geen API key nodig)

De MCP-tool e2e_issue haalt de issue-details op (titel, body, labels, reacties) en retourneert een gestructureerd prompt. Claude Code gebruikt dat prompt om tests te maken met e2e_create_test en ze uit te voeren met e2e_run. De flow wordt volledig georkestreerd door de AI.

Verify Modus (vereist ANTHROPIC_API_KEY)

Roept de Claude API direct aan om tests te genereren, voert ze automatisch uit en rapporteert of de bug bevestigd is of niet reproduceerbaar. De logica: gegenereerde tests verifieren het correcte gedrag, dus als ze falen = bug bevestigd, als ze slagen = niet reproduceerbaar.

# Issue details tonen
e2e-runner issue https://github.com/org/repo/issues/42

# Test file genereren via Claude API
e2e-runner issue https://github.com/org/repo/issues/42 --generate

# Genereren + uitvoeren + bugstatus rapporteren
e2e-runner issue https://github.com/org/repo/issues/42 --verify

# Prompt als JSON outputten (voor piping)
e2e-runner issue https://github.com/org/repo/issues/42 --prompt

Authenticatie: Gebruikt gh CLI voor GitHub en glab CLI voor GitLab. Alle externe commando’s gebruiken execFileSync (geen shell injection). Geen nieuwe dependencies.

Screenshot Hashes: Van Dashboard naar Claude Code in Een Klik

Elke screenshot die tijdens een testrun wordt gemaakt krijgt een kort, deterministisch hash-identificatie zoals ss:a3f2b1c9.

Deze hashes verschijnen als klikbare badges door het hele dashboard. Klik op de badge en ss:a3f2b1c9 wordt naar je klembord gekopieerd.

Plak het vervolgens in Claude Code. De e2e_screenshot MCP-tool lost de hash op, leest het bestand van schijf en retourneert de daadwerkelijke afbeelding — geen bestandspaden, geen giswerk.

# In Claude Code, plak gewoon de hash
ss:a3f2b1c9
# → Claude ziet de screenshot en kan erover redeneren

Hoe het werkt: De hash bestaat uit de eerste 8 hex tekens van de SHA-256 van het absolute pad. Identiek berekend op server (Node crypto) en browser (Web Crypto API), dus hashes verschijnen in de Live-weergave voordat de run zelfs naar SQLite is geschreven.

Wanneer saveRun() resultaten schrijft, registreert het elke hash in de screenshot_hashes-tabel binnen dezelfde transactie. De run detail API bevat een screenshotHashes-map per test, en /api/screenshot-hash/:hash serveert afbeeldingen per hash.

Dit sluit de cirkel tussen visuele testuitvoer en AI-ondersteund debuggen.

SQLite Persistentie

Elke testrun wordt opgeslagen in een centrale SQLite database op ~/.e2e-runner/dashboard.db. WAL-modus voor gelijktijdige toegang, dual-write naar filesystem (JSON) en SQLite voor achterwaartse compatibiliteit.

Tabellen: projects, runs, test_results, screenshot_hashes met foreign keys en indices.

REST API:

• GET /api/db/projects — lijst alle geregistreerde projecten
• GET /api/db/projects/:id/runs — runs voor een specifiek project
• GET /api/db/runs/:id — volledig detail van een enkele run

Pool-Aware Wachtrij

Voor v1.1.0 veroorzaakte het lanceren van meer tests dan het Chrome pool aankon opgestapelde verbindingen, geheugendruk en SIGKILL van Chrome-processen.

Nu controleert elke worker het /pressure endpoint van het pool voordat een verbinding wordt geopend. Als het pool op capaciteit zit, wacht de worker (polling elke 2s, tot 60s) tot er een slot vrijkomt.

Live Voortgangsgebeurtenissen

Gestructureerde gebeurtenissen via een onProgress callback-systeem:

Gebeurtenis	Wanneer
run:start	Run begint (totaal tests, concurrency, project)
test:start	Individuele test start
test:action	Elke actie voltooid (succes/fout, duur)
test:retry	Gefaalde test wordt opnieuw geprobeerd
test:complete	Test eindigt met resultaat
run:complete	Samenvatting met passed/failed aantallen

Gebeurtenissen voeden de realtime updates van het dashboard via WebSocket, met buffer voor herverbindingen.

Nieuwe navigate Actie

Voor SPA’s waar client-side routing geen traditionele paginaladingsgebeurtenissen triggert:

{
  "type": "navigate",
  "value": "/dashboard/settings"
}

Gebruikt een race-patroon met 5-seconden timeout. Ondersteunt absolute URL’s en relatieve paden.

MCP Server: 8 Tools via stdio + HTTP

De MCP-integratie kreeg een significante upgrade. Tool-definities zitten in een gedeelde module, en het dashboard stelt dezelfde tools beschikbaar via Streamable HTTP op /mcp.

Tool	Beschrijving
e2e_run	Tests uitvoeren (alle, suite, of bestand)
e2e_list	Beschikbare test suites lijsten
e2e_create_test	Nieuw testbestand aanmaken
e2e_pool_status	Chrome pool status controleren
e2e_screenshot	Screenshot ophalen via hash
e2e_dashboard_start	Dashboard starten
e2e_dashboard_stop	Dashboard stoppen
e2e_issue	Issue naar E2E test converteren

Quick Start

# One-liner: installeert, scaffolds, start pool, draait sample tests
curl -fsSL https://raw.githubusercontent.com/fastslack/mtw-e2e-runner/main/scripts/quickstart.sh | bash

Of stap voor stap:

npm install -g @matware/e2e-runner
e2e-runner run --all
e2e-runner dashboard

Breaking Changes

Geen. Alles is achterwaarts compatibel. De enige nieuwe runtime dependency is better-sqlite3.

---

Bekijk de GitHub repo voor volledige documentatie en het npm pakket voor installatiedetails.

@matware/e2e-runner blijft JSON-driven, zero-config standaard, en geeft je nu een realtime dashboard, automatische bugverificatie vanuit issues, en AI-aangedreven screenshot debugging — allemaal met eersteklas Claude Code integratie via MCP.