docs

How we record install videos with Playwright

One script gives us the video, the captions, the transcript and the screenshots. A test keeps them honest.

Mammoth WP · · 1 min read · Read as Markdown

Docs videos go stale the day after you record them. A button moves, a label changes, and the video shows a screen that no longer exists. We stopped recording by hand.

One script, four outputs

Each plugin has two specs: docs/video/install.spec.ts and docs/video/usage.spec.ts. Playwright drives a real wp-admin. From a single run we get:

  • the video of the session,
  • WebVTT captions,
  • a transcript,
  • the screenshots we upload to wordpress.org.

The captions and the transcript come from the same step list that drives the browser, so they cannot disagree with what you see.

Rules for the specs

Every spec stays under 90 seconds and runs at 1280x720, with a visible cursor so viewers can follow it. A video that needs more than 90 seconds is a sign the screen asks too much of the user.

An E2E test on every merge request

The specs also run headless on every merge request, as an end-to-end test. If a change breaks the install flow or the usage flow, the pipeline fails before anyone ships it.

Re-record only when it matters

Recording is not free, and a new video that looks identical is noise. We hash the specs together with the admin UI files. The videos are re-recorded only when that hash changes.

What you get

The video stays current without anyone remembering to update it, and it ships with captions and a transcript.

Tags