Help us understand the problem. What is going on with this article?

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

pegass85
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away