I Was Tired of Re-Recording Product Demos Every Sprint. So I Built a Tool That Turns Playwright Tests Into Videos.

# I Was Tired of Re-Recording Product Demos Every Sprint. So I Built a Tool That Turns Playwright Tests Into Videos. *How I went from "can we reshoot the demo?" to "just run the pipeline" — and why I'm open-sourcing it.* --- Let me paint you a picture you probably recognize. It's Wednesday. The sprint is almost done. Marketing needs an updated product video for the landing page because last sprint we changed the sidebar layout. The previous video — the one that took me an entire afternoon to record, narrate, subtitle, and edit — is now outdated. Three screens look different. The button moved. The flow changed slightly. So I open my screen recorder, clear my throat, and start again. Forty-five minutes of recording. Miss a click. Start over. Get the flow right but stumble on the voiceover. Start over. Finally nail it. Now spend another hour adding subtitles, syncing the timing, exporting. **I did this every two weeks for months.** And every time, a voice in the back of my head kept saying: *"My Playwright tests already do this exact flow perfectly. Every single time. Why am I doing this manually?"* --- ## The Moment It Clicked I was looking at a Playwright trace file one day — you know, the ZIP you get when you set `trace: 'on'` in your config. I opened it in the trace viewer and realized something: **This trace contains everything a demo video needs.** Every click, every navigation, every network request. Precise timestamps. Screenshot frames. Cursor positions. DOM snapshots. It's literally a recording of someone using the product — just in a structured data format instead of a video file. What if I could take that data and turn it into a polished video? With voiceover? With subtitles? Automatically? That's when I started building [playwright-recast](https://github.com/ThePatriczek/playwright-recast). --- ## What It Does In its simplest form: ```typescript import { Recast } from 'playwright-recast' await Recast .from('./test-results/trace.zip') .parse() .render() .toFile('demo.mp4') ``` Trace in, video out. But the real magic is in the pipeline. Every step is optional, composable, and chainable: ```typescript await Recast .from('./test-results/') .parse() .hideSteps(s => s.text?.includes('logged in')) .speedUp({ duringIdle: 3.0, duringUserAction: 1.0 }) .subtitlesFromSrt('./narration.srt') .voiceover(ElevenLabsProvider({ voiceId: 'daniel' })) .render({ format: 'mp4', resolution: '1080p' }) .toFile('demo.mp4') ``` Let me break down what each line does and why it matters. --- ## The Problems I Was Solving ### Problem 1: "The login screen is in every video" Nobody cares about the login flow in a product demo. But every test starts with authentication. In playwright-recast, you just hide it: ```typescript .hideSteps(s => s.text?.includes('logged in')) ``` The video starts right at the interesting part. No login screen, no cookie dialogs, no setup noise. ### Problem 2: "There's 10 seconds of nothing while the API loads" Real applications have loading states, network requests, idle moments. In a live demo, you'd say "and now we wait for the data to load..." In a video, it's dead time. The speed processor classifies every millisecond of the trace: ```typescript .speedUp({ duringIdle: 4.0, // Fast-forward empty moments duringUserAction: 1.0, // Keep clicks and typing at real speed duringNetworkWait: 2.0, // Compress API wait times }) ``` A 2-minute test becomes a tight 30-second demo where every second shows something happening. ### Problem 3: "Voiceover takes forever" I used to record voiceover separately, then sync it in a video editor. Now: ```typescript .voiceover(ElevenLabsProvider({ voiceId: 'daniel' })) ``` One line. The library calls ElevenLabs (or OpenAI TTS) for each subtitle segment, handles timing and silence padding, and merges the audio with the video. The MP3 is also saved separately in case you need it. ### Problem 4: "We need this in Czech, English, and German" The pipeline is immutable — every method returns a new instance. So you can branch: ```typescript const base = Recast.from('./traces').parse().speedUp({ duringIdle: 3.0 }) await base.subtitlesFromSrt('./en.srt').voiceover(englishVoice).render().toFile('demo-en.mp4') await base.subtitlesFromSrt('./cs.srt').voiceover(czechVoice).render().toFile('demo-cs.mp4') await base.subtitlesFromSrt('./de.srt').voiceover(germanVoice).render().toFile('demo-de.mp4') ``` Same trace, same flow, three languages. Zero re-recording. ### Problem 5: "The UI changed, reshoot everything" This is the big one. The reason I built this. Your Playwright tests already handle UI changes — that's their job. When the sidebar moves, you update the test. When a button gets renamed, you update the selector. **The test always reflects the current state of the product.** So instead of re-recording a video, you just re-run the pipeline: ```bash npx playwright test --trace on npx playwright-recast -i ./test-results -o demo.mp4 --srt narration.srt --provider elevenlabs ``` Two commands. Same narration, fresh video that matches the current UI. Every sprint. Automatically. --- ## The Developer Experience I Wanted I'm a TypeScript developer. I wanted an API that felt like writing code, not configuring a video editor. The pipeline is **lazy** — nothing happens until you call `.toFile()`. It's **immutable** — every method returns a new pipeline. It's **type-safe** — TypeScript guides you through the stages. ```typescript // This builds a pipeline description. Zero side effects. const pipeline = Recast .from('./traces') .parse() .speedUp({ duringIdle: 3.0 }) .subtitlesFromSrt('./narration.srt') .voiceover(openaiProvider) .render({ format: 'mp4' }) // This executes everything. await pipeline.toFile('output.mp4') ``` There's also a CLI for when you don't want to write code: ```bash npx playwright-recast \ -i ./test-results/trace.zip \ -o demo.mp4 \ --speed-idle 4.0 \ --srt narration.srt \ --provider openai \ --voice nova \ --burn-subs ``` --- ## The playwright-bdd Secret Weapon This is where it gets really powerful. If you use [playwright-bdd](https://github.com/vitalets/playwright-bdd) for BDD testing with Gherkin, your feature files become your video script: ```gherkin Feature: Product dashboard Scenario: Explore analytics Given the user opens the dashboard """ Let's open the analytics dashboard to explore real-time metrics. """ When the user clicks the revenue chart """ Clicking the revenue chart reveals a detailed breakdown by region. """ ``` Those doc strings (`"""..."""`) become your voiceover narration. The step definitions use helpers from playwright-recast: ```typescript import { setupRecast, narrate, pace } from 'playwright-recast' Given('the user opens the dashboard', async ({ page }, docString?) => { narrate(docString) // → voiceover text for this step await page.goto('/dashboard') await pace(page, 4000) // → visual pause for narration timing }) ``` **Your test is your script. Your script is your test.** Change the feature file, re-run, get a new video. No separate workflow. No manual sync. --- ## What I Learned Building This **Playwright traces are underrated.** Everyone uses them for debugging failed tests. But they're actually a rich, structured recording of user behavior — richer than any screen recorder output. **ffmpeg is incredibly powerful and incredibly painful.** The `crop` filter doesn't support timeline enable/disable. The `zoompan` filter is designed for still images. WebM VP8 can't stream-copy into MP4 containers. I learned all of this the hard way so you don't have to. **Blank frames are everywhere.** Playwright's `recordVideo` starts recording before the browser renders the first frame. Every video starts with ~1 second of white. playwright-recast detects this automatically and trims it. **TTS timing is tricky.** A voiceover segment might be 4 seconds long but the video step only takes 0.5 seconds. You need silence padding, duration measurement, proper concatenation. The voiceover processor handles all of this. --- ## Where It's Going The library is at v0.1.0. Here's what's coming: - **Burned-in subtitles** — styled captions rendered directly into the video - **Smooth zoom transitions** — animated zoom into UI elements during actions - **Edge TTS provider** — free voiceover, no API key needed - **Playwright Reporter** — generate videos automatically as part of `npx playwright test` - **Multi-language variants** — one trace, many languages - **Intro/outro cards** — title screens and branding - **Background music** — ambient tracks with auto-ducking --- ## Try It ```bash npm install playwright-recast ``` You need `ffmpeg` on your PATH and Node.js 20+. Then either use the CLI: ```bash npx playwright-recast -i ./test-results -o demo.mp4 ``` Or the programmatic API: ```typescript import { Recast, ElevenLabsProvider } from 'playwright-recast' await Recast .from('./test-results/') .parse() .speedUp({ duringIdle: 3.0 }) .subtitlesFromSrt('./narration.srt') .voiceover(ElevenLabsProvider({ voiceId: 'daniel' })) .render({ format: 'mp4', resolution: '1080p' }) .toFile('demo.mp4') ``` **GitHub:** [ThePatriczek/playwright-recast](https://github.com/ThePatriczek/playwright-recast) **npm:** [playwright-recast](https://www.npmjs.com/package/playwright-recast) It's MIT licensed. Contributions, issues, and feedback are welcome. --- *I built this because I was tired of spending afternoons on something a script could do in seconds. If you've ever re-recorded a product demo because a button moved two pixels to the left, this is for you.* cod