Playwrightで撮影したwebm動画をmp4に変換する方法

Playwrightで動画撮影

Playwrightを使用すればpage.screenshot()メソッドでスクリーンショット画像を保存できますが、設定を追加すれば動画撮影をしてwebmファイルでの動画の保存もできます。

動画撮影をオンにするにはplaywright.config.tsのuseに「video: 'on'」を追記するだけです。

これだけだと遷移などが早すぎて見づらいので、launchOptionsで「slowMo: 1000」も追加すると見やすくなります。

playwright.config.ts

use: {
  video: 'on',
  launchOptions: {
    slowMo: 1000,
  },
}

webmファイルはVS Codeで再生できません。

webmだと他の人に渡しても環境によってはダブルクリックなどで再生できないので、扱いづらい動画フォーマットです。

webmはmp4に変換すればVS Codeを含め、多くの環境で再生できるようになります。

ffmpegを使用すればwebmをmp4に変換できます。

Macならbrewコマンドでインストールできます。

brew install ffmpeg

インストールしたらターミナルで以下のコマンドでwebmをmp4に変換できます。

for file in ./**/*.webm; do
  ffmpeg -i "$file" "${file%.webm}.mp4"
done

変換時に元のwebmファイルを削除したい場合はrmで削除します。

for file in ./**/*.webm; do
  ffmpeg -i "$file" "${file%.webm}.mp4"
  if [ $? -eq 0 ]; then
    rm "$file"
  fi
done

これらのコマンドはshファイルで保存すればテストコードを実行後にwebmをmp4に変換するコマンドを実行しやすくなります。

convert_webm_to_mp4.sh

#!/bin/bash
for file in ./**/*.webm; do
  ffmpeg -i "$file" "${file%.webm}.mp4"
done