テストリール：Claude Codeによるプログラム的なデモ動画生成

Testreelの機能

Testreelは、JSON、YAML、またはPlaywright形式でユーザー操作（クリック、入力、スクロール、ズームなど）を記述し、視覚効果を備えた洗練されたデモ動画を生成するnpmパッケージです。

主な機能（Sourceより）

• 操作記述からwebm、mp4、またはgif動画を生成
• カーソルのオーバーレイ、クリック時の波紋、グラデーション背景を追加
• JSON、YAML、またはPlaywrightを使用して操作を定義
• モックとサンプルデータを使用した動画作成のためにPlaywrightと統合
• MITライセンス
• Playwright + FFMPEGを基盤に構築

主な使用例

Sourceでは、主に2つの価値提案が挙げられています：

• タイプミスや誤クリックによるデモの手動再録画が不要 - 設定を更新して再生成するだけ
• LLMエージェント（Claude Codeなど）が、カーソルオーバーレイとカスタマイズ可能なデスクトップ背景付きでWebアプリのデモ動画を生成可能

実践的な実装

Sourceによると、ユーザーはClaude CodeにTestreelを使用して特定のUIフローのデモ動画を生成するよう依頼できます（例：「現実的なデータを使用」「この画像を使用」）。著者は、これは比較的簡単に実装できると述べています。

このツールは、ScreenStudioやCapのプログラム版として位置付けられており、Playwrightがエンドツーエンドテストを扱う方法と同様に、自動化されたデモ作成を可能にします。

リポジトリ情報

パッケージは以下で利用可能です：https://github.com/greentfrapp/testreel

著者は、Claude Codeを使用して作成し、自身の使用に基づいて更新を続けると述べています。