Playwrightの動画を取りたい

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

1
import type { PlaywrightTestConfig } from "@playwright/test";
2
const config: PlaywrightTestConfig = {
3
  use: {
4
    video: {
5
      mode: "on-first-retry",
6
      size: { width: 640, height: 480 },
7
    },
8
  },
9
};
10
export default config;

常に録画したい#

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

on : 常に録画される。

1
{
2
  video: {
3
    mode: 'on',
4
  }
5
}

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

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

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

1
{
2
  video: {
3
    mode: `retain-on-failure`,
4
  }
5
}

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

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

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

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

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

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

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

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

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

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

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