Playwrightを使ったアプリのデモ動画作成の自動化

アプリのデモ動画を作ってみた。

最初自分で操作して画面を録画しようかと思ったけど、 タスクツールのデモで文字入力が多いため 何度も取り直したりするのは非常に辛いので自動化してみた。

Playwright + アプリ内のデモモード + デモデータの自動投入 + ffmpegを使って自動化してmp4に変換できた。日本語/英語のデモ動画も2分ほどで最新のUIで作成が完了する。

取り直しやシナリオの変更など楽になるのでこのパターンありだと思う。

Playwrightでスクショだけでなく、以下のようなコードで動画をファイル出力できるのでWebアプリの操作説明などの録画には応用できるはず。

const context = await browser.newContext({
  viewport,
  deviceScaleFactor,
  locale,
  recordVideo: { dir: tempDir, size: viewport },
});

※BGMは自作曲(not AI音楽)です。