本エントリーは、Selenium/Appium Advent Calendar 2017の9日目エントリーです。
Selenium WebDriverでは、テストの実行時に、ブラウザーの画面のスクリーンショットを取得するAPIを提供しています。
ですが、たとえばトーストが消える消えないというような、画面のアニメーションの動作の不具合をスクリーンショットだけを見て判断するのは、なかなか厳しいものがあります。
また近年の風潮であるシングルページアプリケーション(SPA)では、不具合として画面の操作中にアプリケーションが操作不能(ハングアップ)する場合があり、この場合も操作を停止した部分のスクリーンショットのみで不具合の原因を判断することには困難が伴います。
これまでは、Selenium WebDriverのテスト実行時の画面を録画するには、BrowserStackとかSauce Labsなどのサービスが選択肢とされてきました。
本稿では、オープンソースソフトウェアを用いて、Selenium WebDriverのテスト実行時の画面録画を行うことを目指します。
用意するもの
環境構築
sudo apt install openjdk-8-jdk language-pack-ja-base language-pack-ja xvfb ffmpeg tmux
実行
実行するのは、Gebの公式サンプルをもとにカスタマイズを加えた以下のレポジトリー上のテストです。
Xvfb :1 -screen 0 1920x1200x24 -ac & tmux new-session -d -s Recording1 'ffmpeg -y -f x11grab -video_size 1920x1200 -i :1 -codec:v libx264 -r 12 -ab 128k /vagrant/out4.mp4' export DISPLAY=:1 ./gradlew test -Pbrowser=firefox tmux send-keys -t Recording1 q
枠組みは、Xvfbで起動した仮想デスクトップを、ffmpegでキャプチャーするというものです。
環境変数 DISPLAY を指定して、Gradleによるテスト実行時に、仮想デスクトップ上でブラウザーを実行するようにしています。
ffmpegは録画を終了するために、qのキーシーケンスを送る必要があります。これを実現するために、仮想端末マネージャーであるtmuxのセッション上でffmpegを起動するように指定しています。
実行結果
(最初の30秒くらいが空白なのはFirefoxの起動待ちです...)
改善が必要な点
- VMだからなのかffmpegが起動しているとFirefoxの起動がやたら時間がかかる
- クライアントPCがWindowsなのでmp4のコーデックがない→ 自分はVLC media player をインストールしました。なお以下のようなオプションで、WMVフォーマットで録画することができます。
tmux new-session -d -s Recording1 'ffmpeg -y -f x11grab -video_size 1920x1200 -framerate 60 -i :1 -ab 256k /vagrant/out4.wmv'
(なお、WMVフォーマットだと画質は相当落ちました)
特にブラウザー起動時の待ち時間の問題等、まだ荒削りなところはありますが、テスト実行時の画面録画を行うという当初の目的は達成できているので、今後実戦投入を目指して改善を行っていきたいです。
参考サイト
Recording headless selenium tests to mp4 with Xvfb and ffmpeg
実行手順
本稿のアイデアの実現にあたっては、id:swimming_pooh に情報提供をいただきました。感謝します。
