O hirunewani blog

Playwrightの動画を取りたい

Created at

Playwrightのテスト結果を動画で録画する方法について紹介する。

全てのテストで共通の録画設定を行う場合は、playwright.config.tsファイルに次のように記述する。

https://playwright.dev/docs/videos

import type { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = {
  use: {
    video: {
      mode: 'on-first-retry',
      size: { width: 640, height: 480 }
    }
  },
};
export default config;

常に録画したい

モードをonに設定すれば、常に録画されるようになる。

  • on : 常に録画される。
{
  video: {
    mode: 'on',
  }
}

失敗したテストのみ録画したい

モードをretain-on-failureまたはon-first-retryに設定する。

  • retain-on-failure : 常に録画されるが成功したテストの録画は削除される。
  • on-first-retry : 最初のリトライ時にのみ録画される。
{
  video: {
    mode: `retain-on-failure`,
  }
}

テストファイル毎に録画設定を変更したい

テストファイル毎にPlaywrightの設定を変更したい場合は、test.useが利用できる。

import { test } from "@playwright/test";

test.use({ video: "on" });

test("Rcord the page", async ({ page }) => {
  // ...
});

録画ファイルを指定したファイル名で保存したい

video.saveAs()を利用すればいい。

https://playwright.dev/docs/api/class-video#video-save-as

test("Rcord the page", async ({ page }) => {
  // ...
  await page.close();
  await page.video()?.saveAs(`/videos/result.webm`);
});

ただし、次の点に注意が必要。

  • video.saveAs()を利用すると、ページを明示的に閉じないとテストが終了されなくなる。
  • webm以外のフォーマットはサポートされていない。