@matware/e2e-runner 1.5.0: lichtere tests & een vernieuwd live dashboard

Versie 1.5.0 van @matware/e2e-runner pakt het lastigste deel van declaratief E2E-testen aan: de “moeilijke” widgets — MUI autocompletes, modals, spinners — die je vroeger dwongen tot een handgeschreven evaluate-blok met ruwe JavaScript. Die gevallen zijn nu één enkele actie. En terwijl je tests draaien, toont het dashboard ze live beter dan ooit.

Lichtere tests

De belangrijkste verandering is een set nieuwe acties die imperatieve code vervangen door declaratieve intentie:

• select_combobox: opent een MUI Autocomplete/Select, filtert en kiest de optie in één actie.
• click met scope:"dialog", visible:true, last:true: klik op tekst binnen een modal, zonder te vechten met dubbelzinnige selectors.
• wait met gone: wacht tot een element verdwijnt (een spinner, een backdrop) in plaats van een vaste sleep. Dit alleen al verwijdert een van de grootste bronnen van flakiness.
• type_react met blur en waitAfter: voor React-gestuurde inputs die validatie moeten triggeren bij blur.
• Geneste modules: een module kan andere modules samenstellen en hun parameters doorgeven, zodat je geen sequenties meer kopieert en plakt.

Het voor-en-na spreekt voor zich. Een land kiezen in een autocomplete ging van dit:

{
  "action": "evaluate",
  "script": "const i=document.querySelector('#land');i.focus();i.value='Arg';i.dispatchEvent(new Event('input',{bubbles:true}));await new Promise(r=>setTimeout(r,800));[...document.querySelectorAll('.MuiAutocomplete-option')].find(o=>o.textContent.includes('Argentinië')).click();"
}

naar dit:

{ "action": "select_combobox", "selector": "#land", "filter": "Arg", "option": "Argentinië" },
{ "action": "wait", "gone": ".MuiBackdrop-root" }

Minder regels, geen magische setTimeout en — het belangrijkste — geen blinde waits: wait gone synchroniseert tegen de echte staat van de DOM.

Vernieuwd live dashboard

De LIVE-weergave is vanaf nul opnieuw ontworpen. De screenshot-feed staat nu horizontaal bovenaan, met een filmstrip van de laatste frames in vaste slots zodat het scherm niet springt. Het voegt auto-follow toe van de lopende test (met een handmatige selector als je een andere wilt vastzetten) en klik-om-te-vergroten op elke opname.

Het tabblad Screenshots kreeg een Find blank-scan die lege opnames detecteert en verwijdert, zodat ze je rapporten niet vervuilen. En ja, er is een nieuwe favicon: het E²-monogram.

Quality of life

• WCAG AA dark-mode contrast in de hele interface.
• De accentkleur (cyaan) is nu losgekoppeld van het PASS-groen, zodat je “geselecteerd” niet verwart met “geslaagd”.
• Beter leesbare typografie en persistentie van de projectselectie tussen herladingen.

Hoe te updaten

npm i @matware/e2e-runner@1.5.0

De volledige details staan in de CHANGELOG. Kom je van een oudere versie? Begin met het vervangen van je combobox-evaluate-blokken en je sleeps door select_combobox en wait gone: dat is de wijziging met de minste moeite en de grootste impact op stabiliteit.