👺

Playwrightでウェブページの操作を録画する

に公開
Node.js
video
Playwright
tech

はじめに

PlaywrightはウェブのE2Eテストでよく使われるツールですが、通常のライブラリとして使うことも可能です。また、Playwrightには動画を録画する機能がデフォルトで備わっています。これらの機能を使うと、ウェブページを操作している様子を動画として録画するスクリプトを作成できます。

インストール

公式の記事 (https://playwright.dev/docs/intro) を参考にPlaywrightをインストールします。

$ npm init playwright@latest

動画を録画してみる

実際に動画を録画するコードを書いてみました。下記のコードでは、Playwrightの公式サイトにアクセスしてインストール方法のページを開く操作を録画しています。これは https://playwright.dev/docs/videos を参考に実装しました。

import { chromium } from "@playwright/test";

const viewportSize = {
  width: 375,
  height: 667,
};

async function main() {
  // Setup
  const browser = await chromium.launch();
  const context = await browser.newContext({
    viewport: viewportSize,
    recordVideo: {
      dir: "videos/",
      size: viewportSize,
    },
  });

  const page = await context.newPage();
  await page.goto("https://playwright.dev/");
  await page.waitForTimeout(1000);

  await page.getByRole("link", { name: "Get Started" }).first().click();
  await page.waitForTimeout(1000);

  await page.getByRole("button", { name: "On this page" }).first().click();
  await page.waitForTimeout(1000);

  await page.getByRole("link", { name: "Introduction" }).first().click();
  await page.waitForTimeout(1000);

  console.log(await page.video().path());

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

main();

それではスクリプトを実行してみましょう。

$ node index.js
/Users/xxxxx/workspace/playwright-example/videos/722da881dd5d47fdac3a46b41ebca397.webm

すると、こんな感じでウェブページの操作の様子を録画することができました。

Discussion