DEV Community

Patrik Szewczyk
Patrik Szewczyk

Posted on

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

#playwright #product #marketing #ai

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.

What It Does

In its simplest form:

import { Recast } from 'playwright-recast'

await Recast
  .from('./test-results/trace.zip')
  .parse()
  .render()
  .toFile('demo.mp4')
Enter fullscreen mode Exit fullscreen mode

Trace in, video out.

But the real magic is in the pipeline. Every step is optional, composable, and chainable:

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')
Enter fullscreen mode Exit fullscreen mode

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:

.hideSteps(s => s.text?.includes('logged in'))
Enter fullscreen mode Exit fullscreen mode

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:

.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
})
Enter fullscreen mode Exit fullscreen mode

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:

.voiceover(ElevenLabsProvider({ voiceId: 'daniel' }))
Enter fullscreen mode Exit fullscreen mode

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:

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')
Enter fullscreen mode Exit fullscreen mode

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:

npx playwright test --trace on
npx playwright-recast -i ./test-results -o demo.mp4 --srt narration.srt --provider elevenlabs
Enter fullscreen mode Exit fullscreen mode

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.

// 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')
Enter fullscreen mode Exit fullscreen mode

There's also a CLI for when you don't want to write code:

npx playwright-recast \
  -i ./test-results/trace.zip \
  -o demo.mp4 \
  --speed-idle 4.0 \
  --srt narration.srt \
  --provider openai \
  --voice nova \
  --burn-subs
Enter fullscreen mode Exit fullscreen mode

The playwright-bdd Secret Weapon

This is where it gets really powerful.

If you use playwright-bdd for BDD testing with Gherkin, your feature files become your video script:

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.
      """
Enter fullscreen mode Exit fullscreen mode

Those doc strings ("""...""") become your voiceover narration. The step definitions use helpers from playwright-recast:

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
})
Enter fullscreen mode Exit fullscreen mode

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 

npm install playwright-recast
Enter fullscreen mode Exit fullscreen mode

You need ffmpeg on your PATH and Node.js 20+.

Then either use the CLI:

npx playwright-recast -i ./test-results -o demo.mp4
Enter fullscreen mode Exit fullscreen mode

Or the programmatic API:

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')
Enter fullscreen mode Exit fullscreen mode

GitHub: ThePatriczek/playwright-recast
npm: 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

Top comments (0)