Playwright Video Recording vs a Product Demo Video
Playwright can record video of a browser session: set recordVideo on a browser context (or video in the Playwright Test config) and you get a WebM file for each page when the context closes. That is made for debugging tests, and it does that job well. As a product demo it falls short: there is no visible cursor, no zoom, no captions, the size is capped small by default and every wait is in the clip. You can build those layers yourself, or use a tool that already does. Klevo is that tool for web apps: Claude or ChatGPT drives the browser, and Klevo renders an MP4 with a smooth cursor, zooms and one caption per step.
How does Playwright record video?
Two ways, per the Playwright docs:
- Playwright Test: set
videoin the config to'on','retain-on-failure'or'on-first-retry'. Videos land in the test output folder. - Library: create a context with
browser.newContext({ recordVideo: { dir: 'videos/' } }). The file is written when the context closes, soawait context.close()before you look for it, and read the path withpage.video().path().
By default the video is the viewport scaled down to fit 800 by 800 pixels; set recordVideo.size (and a matching viewport) for a bigger one. Newer versions can also outline each action in the video for debugging. Puppeteer has its own screencast API that relies on ffmpeg; check the Puppeteer docs for your version.
Why isn’t a raw recording a product demo?
Watch one back and the gaps are obvious:
- No cursor. Headless browsers do not draw one, so clicks happen out of nowhere.
- No focus. The whole viewport stays at the same scale; a small button is a small button.
- No words. Nothing tells the viewer why a step matters.
- Dead time. Every network wait and page load is in the clip.
- One shape. The recording is the viewport, not a 9:16 story or a 1:1 post in a device frame.
Fixing that by hand means logging every action with timestamps and target boxes, drawing a cursor along an eased path, computing zoom keyframes, cutting idle gaps, composing captions and frames, and encoding with FFmpeg. It is a fun project. It is also a few weeks you are not spending on your product.
What does Klevo add on top of a browser recording?
Klevo’s worker runs Chromium too, captures the page as it paints, and logs every step. Then it composes the video:
- Cursor: a cursor drawn along the path the real mouse moved, with a ripple on taps for mobile.
- Zoom: an eased zoom on the steps marked for it.
- Captions: one per step, written by the AI for the viewer.
- Pacing: idle gaps cut down to the style’s hold, so loading never drags.
- Frames and formats: 16:9, 9:16, 1:1 or 4:5, in a browser, phone or tablet frame, with intro and outro cards (demo video formats and device frames by channel).
- Logins: saved secrets that run before the recording, with password fields blurred.
And you do not write the script. You describe the flow to Claude, ChatGPT, Cursor or Claude Code; the AI explores your app one step at a time, retries what fails, and saves the steps as a versioned JSON script with stable targets (role, label, text). How that session works: Claude MCP demo video.
Playwright video or Klevo: which do you need?
Playwright recordVideo |
Klevo | |
|---|---|---|
| Purpose | Debug a test run | A demo people watch |
| Who writes the steps | You, in code | The AI, from your description |
| Output | WebM per page | MP4 with poster and thumbnail |
| Cursor and zoom | None | Smooth cursor, zoom on marked steps |
| Captions | None | One per step |
| Formats | The viewport | 16:9, 9:16, 1:1, 4:5 with device frames |
| Runs on | Your machine or CI | Klevo’s servers, public URLs only |
| Price | Free, open source | Free plan, Pro from $19 a month |
If you need video of failing tests in CI, Playwright is the right tool and costs nothing. If you need a demo for a landing page, a launch or a help article, use something built for viewers.
Can a demo script double as a test?
Partly. A Klevo script fails like a test: when a step no longer works, the render stops on it with a screenshot and the browser console. That makes each demo a quick smoke test of the flow it shows (a failed demo step is a bug report). It does not replace your test suite: nothing runs it on a schedule yet, and it has no assertions beyond “the step worked”.
What does it cost?
| Plan | Price | What you get |
|---|---|---|
| Free | $0 | 3 videos a month, 720p, up to 20 steps, small watermark, 10 voice credits to start |
| Pro | $19 a month or $149 a year | 1080p without the watermark, device frames, any Google Font, your brand, up to 120 steps |
| Ultra | $49 a month or $399 a year | Everything in Pro, up to 240 steps, more voice credits |
Your first Pro or Ultra subscription is free for 14 days, then $19 or $49 a month; cancel before the trial ends and you pay nothing. See the pricing section.
What is the next step?
Try it on a flow you already test: take the one your Playwright suite covers and ask for it as a demo. Create a free account, add Klevo to Claude Code or Cursor with a key (setup guide), and describe the flow. Compare the MP4 with your test video.
FAQ
Can Klevo record localhost?
No. The browser runs on Klevo’s servers and opens public URLs only. Use a staging URL.
Can I export the steps?
Yes. Every video has a downloadable JSON script, and the same script renders again in another format or device (demo videos that never go stale).
Does it handle logins?
Yes: a password, a saved browser session or a magic link, stored as a secret (record a demo of an app behind a login).