Je Playwright-tests zijn al een demo

TL;DR: @viaalink/playwright-video-merge voegt de video’s van een Playwright-run samen tot één film. Elke test begint met zijn naam, uit het JSON-rapport, in de volgorde waarin je de tests schreef. Versie 0.2.0 is de eerste release onder de naam Viaalink. Hij lost ook drie bugs op die we pas vonden toen we de tool op echte Playwright-uitvoer draaiden.

Bekijk de film op YouTube. We linken hem in plaats van hem in te sluiten: een ingesloten speler laadt bij elk paginabezoek de servers van Google.

End-to-endtests klikken door alles wat je app kan. Playwright kan ze allemaal filmen. Die video’s staan daarna in een map per test, en niemand kijkt ze, tenzij er een test faalt.

Achter elkaar vormen ze een demo: wat het systeem doet, in de volgorde van de tests. Een nieuwe collega kan hem bekijken, en een klant of een reviewer ook. En hij bewijst dat deze build het allemaal doet.

Opnemen, dan samenvoegen

Zet video aan voor elke test en voeg de JSON-reporter toe. Het rapport levert de testnamen.

// playwright.config.ts
export default defineConfig({
  use: {
    video: { mode: 'on', size: { width: 1280, height: 720 } },
  },
  reporter: [['list'], ['json', { outputFile: 'playwright-report.json' }]],
});

Draai de tests en voeg dan de video’s samen:

npm install -D @viaalink/playwright-video-merge   # ffmpeg moet op je PATH staan
npx playwright test
npx playwright-video-merge --report playwright-report.json --sort report-order

Het resultaat is merged-demo.webm, of een MP4 met -o demo.mp4 -f mp4. Elke test begint vijf seconden lang met zijn naam in beeld, bijvoorbeeld Shop > checks out with a card.

Zet het in een script, en elke testrun laat een verse demo achter:

"scripts": {
  "test": "playwright test",
  "reel": "playwright-video-merge --report playwright-report.json --sort report-order"
}

Vanuit code kan het ook, met mergePlaywrightVideos({ inputDir, outputPath, reportPath, onProgress }).

Wat testen op echte uitvoer opleverde

De eerste versie slaagde voor zijn eigen tests, maar die gebruikten zelfgemaakte fixtures. Voor deze release hebben we hem gedraaid op wat Playwright 1.58 en 1.62 echt wegschrijven, en drie bugs gevonden:

• Tests met eigen browsers vielen weg. Een test die twee contexten opent, zoals een klant en een supportmedewerker in één chat, neemt elk daarvan op met recordVideo. Playwright noemt die bestanden naar een hash (page@3a9bb5….webm), niet video.webm, en de tool zocht alleen video.webm. Nu telt elke .webm. Meerdere opnames uit één test worden delen: (1/2), (2/2).
• De meeste namen kwamen uit mapnamen. De tool bouwde de mapnaam van elke test na uit de titel, in kleine letters. Playwright houdt de hoofdletters en kort lange titels in met een hash (app-Checkout-shows-a-very--18022-e-because-it-goes-on-and-on-chromium), dus maar één test op drie kreeg zijn echte naam. Het JSON-rapport noemt het pad van elke video al, dus daar matcht de tool nu op. Herhalingen krijgen (retry1).
• --sort report-order deed niets. Nu volgt hij je bestanden in de volgorde van declaratie. Het JSON-rapport zet de tests buiten een describe-blok apart van de describe-blokken, dus de tool sorteert ze terug op regelnummer.

De echte Playwright-uitvoer is nu een testfixture, zodat deze gevallen gedekt blijven.

De film is gemaakt met de tool

De film is op dezelfde manier gemaakt als onze Caddy-promofilm: een Playwright-run waarin elke stap controleert dat hij gelukt is. Hij typt npx playwright test in een echte terminal, controleert dat vier tests slaagden, draait playwright-video-merge, controleert dat er vijf video’s zijn samengevoegd, en speelt de film af die hij net maakte. Als de tool stuk is, komt er geen film.

Nieuwe naam

Het pakket heette @accelerated-software-development/playwright-video-merge. De oude naam is deprecated. De laatste versie (0.1.1) stuurt alleen door naar het nieuwe pakket: imports en het commando playwright-video-merge blijven werken. Overstappen: vervang de naam in package.json en in je imports.

npm uninstall @accelerated-software-development/playwright-video-merge
npm install -D @viaalink/playwright-video-merge

Versie 0.2.0 heeft Node.js 20 of nieuwer en ffmpeg nodig.

Aan de slag: npm-pakket · broncode op GitHub