この記事は自動テスト Advent Calendar 2020 - Qiitaの12日目です。

アドベントカレンダーが

Puppeteer, Playwright, Cypress, TestCafe, CodeceptJS, など自動テストに関する技術・ノウハウを書いていきましょう。

ということなので、Playwrightのちょっとしたネタを一つ。

前段

自動テストやっていると、テストが失敗（結果がFailになったり、テスト自体が途中で例外吐いて止まったり）したときに

  • テスト対象でほんとうに問題があるのか
  • 自動テスト側に問題があるのか
  • いわゆる「タイミングの問題」などなのか（）

を切り分ける必要があります。これが割と大変な作業になることも多く、

  • そもそもテストが想定外の理由で失敗しないように、例外処理や待機やリトライ処理などを工夫しておく
  • 失敗の原因を特定する手間をなるべく少なくするよう、エビデンスやログを残しておく

などの対応がなされます。

原因特定の手間を減らすためによくある対策として、スクショや動画を残しておく、という方法があります。私はテスト自動化エヴァンジェリストとしてお仕事しているので、この手の希望はよくいただきます。

Seleniumで自動化していると、意外と自動テスト中の動画撮るのが面倒だったりしますが、Playwrightは1.4から動画がかんたんに撮れるようになってます。

参考：テスト自動化ツールのPlaywrightでインタラクションスクリプトの記録と再生、テストビデオのキャプチャが可能に

動画の取得方法

正直公式を見れば一発だったりします。

参考：Videos

一応上記から転載しておくと、contextかpageかに対してrecordVideoを設定すればできます。

// With browser.newContext()
const context = await browser.newContext({ recordVideo: { dir: 'videos/' } });
// Make sure to await close, so that videos are saved.
await context.close();

// With browser.newPage()
const page = await browser.newPage({ recordVideo: { dir: 'videos/' } });
// Make sure to await close, so that videos are saved.
await page.close();

// [Optional] Specify video size; defaults to viewport size
const context = await browser.newContext({
  recordVideo: {
    dir: 'videos/',
    size: { width: 800, height: 600 },
  }
});

サイズの設定も可能です。

サンプル

playwright-cliでブラウザ操作からコード生成した - テストウフ

の記事で生成したコードで、実際に録画してみました。

コード

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

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

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

  // Go to https://qiita.com/
  await page.goto('https://qiita.com/');

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

  // Fill input[name="q"]
  await page.fill('input[name="q"]', 'playwright-cli');

  // Press Enter
  await page.press('input[name="q"]', 'Enter');
  // assert.equal(page.url(), 'https://qiita.com/search?q=playwright-cli');

  // Click text=/.*関連順.*/
  await page.click('text=/.*関連順.*/');

  // Click text=/.*新着順.*/
  await page.click('text=/.*新着順.*/');
  // assert.equal(page.url(), 'https://qiita.com/search?q=playwright-cli&sort=created');

  // Click div[id="main"] input[name="q"]
  await page.click('div[id="main"] input[name="q"]');

  // Fill div[id="main"] input[name="q"]
  await page.fill('div[id="main"] input[name="q"]', 'playwright-cli video');

  // Click text=/.*検索.*/
  await page.click('text=/.*検索.*/');
  // assert.equal(page.url(), 'https://qiita.com/search?sort=created&q=playwright-cli+video');

  // Click //*[local-name()="svg" and normalize-space(.)='Qiita']
  await page.click('//*[local-name()="svg" and normalize-space(.)=\'Qiita\']');
  // assert.equal(page.url(), 'https://qiita.com/');

  // Close page
  await page.close();

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

Contextのところにrecord videoを足しただけです。

今回はvideosというフォルダを指定していますが、これはフォルダがない場合にも自動で作成してくれました。

また、拡張子はwebmというファイルで記録されました。

記録した動画

かんたん。

お試しください。