playwrightのテスト結果を動画として残す方法

はじめに

e2eテスト界にキラ星のごとく登場したplaywright。
後発ツールなだけあって超絶クールですが、標準構成のみでテスト結果を動画として保存することができます。

動画を出力するための設定

const context = await browser.newContext({
  videosPath: 'videos/'  // 動画を出力するフォルダ名
});

テストコードに上記設定を追加するだけで、テスト結果を動画に残せます。
本当にこれだけでOKなので、世の中便利になったものだなと思います。
なお、公式サイトには、これ以外のやり方も書かれているので、
よろしければ参考にしてください、

公式ドキュメント
https://playwright.dev/#version=v1.5.1&path=docs%2Fverification.md&q=videos

サンプルコード

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({
    headless: false
  });
  const context = await browser.newContext({
    videosPath: 'videos/'
  });

  // Open new page
  const page = await context.newPage();

  // Go to https://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8
  await page.goto('https://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8');

  // Click input[name="search"]
  await page.click('input[name="search"]');

  // Fill input[name="search"]
  await page.fill('input[name="search"]', 'ユニットテスト');

  // Go to https://ja.wikipedia.org/wiki/%E3%83%A6%E3%83%8B%E3%83%83%E3%83%88%E3%83%86%E3%82%B9%E3%83%88
  await page.goto('https://ja.wikipedia.org/wiki/%E3%83%A6%E3%83%8B%E3%83%83%E3%83%88%E3%83%86%E3%82%B9%E3%83%88');

  // Go to https://ja.wikipedia.org/wiki/%E5%8D%98%E4%BD%93%E3%83%86%E3%82%B9%E3%83%88
  await page.goto('https://ja.wikipedia.org/wiki/%E5%8D%98%E4%BD%93%E3%83%86%E3%82%B9%E3%83%88');

  // Click text="契約による設計"
  await page.click('text="契約による設計"');
  // assert.equal(page.url(), 'https://ja.wikipedia.org/wiki/%E5%A5%91%E7%B4%84%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0');

  // Click text="ソフトウェア開発工程"
  await Promise.all([
    page.waitForNavigation(/*{ url: 'https://ja.wikipedia.org/wiki/%E5%8D%98%E4%BD%93%E3%83%86%E3%82%B9%E3%83%88' }*/),
    page.click('text="ソフトウェア開発工程"')
  ]);

  // Close page
  await page.close();

  // ---------------------
  await context.close();
  await browser.close();
})();

wikipediaのページを遷移するテストを書きました。
8行目でvideosPath: 'videos/' と書いていますが、これが動画出力の設定です。
テストを実行するとvideosフォルダ配下に、テスト動画が自動生成されます。
念のためにgithubにコードのフルセットを用意したので、
実際に動かしてみたい方はぜひお試しください。

コードフルセット
https://github.com/kaidouji85/playwright-video-record