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()
})()

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

参考


Related #js

Next.js 11

手軽にアップグレードできた

仕事ですぐに使えるTypeScript

奥が深い

prismのモックサーバはexamples定義からレスポンスを返してくれる

仕様書を作る際はexamplesも定義するようにしておきたい

明日のゴミ収集対象をSlackに通知する

これでもう翌日のゴミ収集内容に迷わない