Seleniumの操作を音声付きで動画に記録する方法

目的

Seleniumの操作を動画で記録したい。
その際にブラウザの音声も記録したい。

方法

以下のelgalu/seleniumのコンテナを使用すると簡単にできる。
https://github.com/elgalu/docker-selenium

以下のサンプルはSeleniumでYoutubeの動画を30秒間再生して、その様子を動画に保存するサンプルである。

環境
macos Catalina 10.15.6
v14.10.1

事前準備

npm init -y
npm install --save selenium-webdriver
mkdir videos

テストコード

const {Builder, By, Key, until} = require('selenium-webdriver');
(async function example() {
  let driver = await new Builder()
    .forBrowser('chrome')
    .usingServer('http://localhost:4444/wd/hub')
    .build();
  try {
    await driver.get('https://www.youtube.com/watch?v=WX6_koWVVpY');
    // 再生をする
    await driver.findElement(By.className('ytp-play-button')).click();
    const elTimeCurrent = await driver.findElement(By.className('ytp-time-current'));
    let bFlg = true;
    const timeId = setInterval(async ()=>{
      // 一秒毎にマウスを動かして再生時間が隠れないようにする
      const rc = await elTimeCurrent.getRect();
      let x = Number(rc.x);
      if(bFlg) x += 1;
      driver.actions().move({x: x, y:rc.y}).perform();
      bFlg = !bFlg;
    }, 1000);
    // 30秒再生するまで待つ
    await driver.wait(until.elementTextContains(elTimeCurrent, '0:30'), 40*1000);
    clearInterval(timeId);
  } finally {
    await driver.quit();
  }
})();

dockerコンテナの起動〜テストコードの起動するシェルスクリプト

sample.sh

docker run -d --rm --name=grid -p 4444:24444 -p 5920:25900 \
  --shm-size=2g -e VNC_PASSWORD=hola \
  -e VIDEO=true \
  -e AUDIO=true elgalu/selenium

sleep 5
docker exec grid wait_all_done 30s

node test.js

docker exec grid stop-video
docker cp grid:/videos/. videos
docker stop grid

このスクリプトを実行するとvideosフォルダにvid_chrome_25550_firefox_25551.mkvが作成される。
このファイルはブラウザにドラッグ&ドロップすると再生して確認可能。

参考

https://www.selenium.dev/selenium/docs/api/javascript/index.html
https://github.com/elgalu/docker-selenium/blob/master/docs/videos.md