E2EテストツールであるPlaywrightの使用して、ブラウザの操作のキャプチャを録画を行う。
node.jsだけではなくPython、Java、.NETのライブラリもあるみたい。
環境構築&インストール
playwrightをE2Eテストとして使用するときは
yarn create playwright
でインストールするとテスト用ディレクトリ・設定ファイルが作成される。
今回はライブライだけ使用したのでyarn addでインストール。
# 環境初期化
yarn init
# インストール
yarn add ts-node typescript @types/node playwright
# tsconfig.jsonを作成
npx tsc --init
サンプルプログラム
プログラムのポイント
- goto：画面遷移
- screenshot：キャプチャ
- locator：ページ内の要素をセレクタを使用して取得(今回はキャプチャを取得)
- evaluate：ヘッドレズブラウザ(ページを表示しているブラウザ)に対する処理を記述
index.ts
import { chromium } from "playwright";
(async () => {
// ブラウザの高さ(スクロールなどに使用するので変数で定義)
const viewHeight = 1080;
// ヘッドレスブラウザを起動
const browser = await chromium.launch();
const context = await browser.newContext({
recordVideo: {
dir: "./videos/",size: { width: 1920, height: viewHeight },}, // 動画の保存先を指定
});
// ヘッドレスブラウザのページを開く
const page = await context.newPage();
await page.setViewportSize({ width: 1920, height: viewHeight });
await page.goto("https://playwright.dev/");
// ページの読み込みを待つ
await page.waitForLoadState("load");
// 画面全体をキャプチャ
await page.screenshot({ path: "img/top.png", fullPage: true });
// ヘッダー部分をキャプチャ
await page.locator(".hero--primary").screenshot({ path: "img/header.png" });
// 録画用に2秒待機
await page.waitForTimeout(2000);
await page.goto("https://playwright.dev/docs/intro");
await page.waitForLoadState("load");
// 表示している画面の高さを取得
const maxScrollHeight = await page.evaluate(() => {
return document.body.scrollHeight;
});
// ページ全体を録画できるように、画面の高さを超えるまでスクロール
let newScrollHeight = 0;
while (newScrollHeight < maxScrollHeight) {
await page.evaluate(
({ newScrollHeight, viewHeight }) => {
window.scrollTo(0, newScrollHeight + viewHeight);
},
{ newScrollHeight, viewHeight }
);
await page.waitForTimeout(2000);
newScrollHeight = newScrollHeight + viewHeight - 100;//100px分余白として
}
const video = await page.video();
await context.close();
if (video) {
// 動画ファイルに名前を付けて保存、元の動画ファイルは削除
await video.saveAs("videos/playwright_video.webm");
await video.delete();
}
await browser.close();
})();実行
npx ts-node index.ts
実行結果
実行後、imgフォルダとvideosフォルダにファイルが作成されていることを確認。
実行中はvideosに録画中の仮ファイルが作成される。
左：top.pngと右：header.pngと
top.pngはサイズが大きいので縮小
録画した動画ファイル
webm形式なのでvideoタグなどに指定して再生できる
<video controls width="1280" height="720">
<source src="./videos/playwright_video.webm" type="video/webm">
お使いのブラウザは動画再生に対応していません。
</video>