Playwrightで画面収録をする

ブラウザの操作を録画しようと思いPuppeteerでできないか調べてみたが、公式機能としてはサポートされていなかったのでplaywrightを使うことにした。

こちらはWebM形式での録画機能がサポートされている。

import * as pw from 'playwright'

;(async () => {
  const w = 800
  const h = 400

  const browser = await pw.chromium.launch({
    headless: false,
  })
  const context = await browser.newContext({
    recordVideo: { dir: 'videos/', size: { width: w, height: h } },
  })
  const page = await context.newPage()
  await page.setViewportSize({
    width: w,
    height: h,
  })

  await page.goto('http://localhost:3000')

  await page.close()
  await context.close()
  await browser.close()
})()

とはいえ実際に録画された動画を見てみると画質が粗く、かつ画質変更オプションはなさそうだったので高品質で録画したい場合は自前で仕組みを用意する必要がありそう。

参考

• Puppeteer/Playwrightでの画面録画・コードリーディング - kamijin-fanta