Playwrightで動かしているシナリオを動画で記録する

公式ヘルプに設定方法は載っているので、この記事で知れることは「Playwrightで動画を撮影できる」というのがこの記事の最大の目玉です。

環境

• Playwright
  • 1.12.1

対応

new_contextのパラメータにビデオ用のディレクトリを設定するだけです。new_contextしてから、closeするまでの処理を記録してくれます。

なお、Playwrightを動かす言語によって設定パラメータ名がかなり違うので、公式で再確認してください。

# 撮影開始
context = browser.new_context(
    record_video_dir="videos/", # ビデオの保存ディレクトリ
    record_video_size={"width": 640, "height": 480} # ビデオの画面の大きさ（オプション）
)

# 撮影終了
context.close()

Node.js

const context = await browser.newContext({
  recordVideo: {
    dir: 'videos/',
    size: { width: 640, height: 480 },
  }
});

Python

context = browser.new_context(
    record_video_dir="videos/", 
    record_video_size={"width": 640, "height": 480} 
)

Java

BrowserContext context = browser.newContext(new Browser.NewContextOptions()
  .setRecordVideoDir(Paths.get("videos/"))
  .setRecordVideoSize(640, 480));

.NET

var context = await browser.NewContextAsync(new BrowserNewContextOptions
{
    RecordVideoDir = "videos/",
    RecordVideoSize = new RecordVideoSize() { Width = 640, Height = 480 }
});

終わりに

プラグイン等で動画も取得できるだろう、とは思っていましたが、デフォルトの機能に含まれているのがいいですね。

公式に全て書いてありますが、全てのページに目を通すのはつらいので、この記事がその一助になればと思います。

参考記事

• https://playwright.dev/python/docs/videos/